create-design-system-rules

โดย figma

กฎระบบการออกแบบที่กำหนดเองสำหรับการนำ Figma ไปใช้เป็นโค้ดอย่างสม่ำเสมอทั่วทั้งโปรเจกต์ของคุณ สร้างข้อกำหนดเฉพาะของโปรเจกต์สำหรับการจัดระเบียบคอมโพเนนต์ การจัดรูปแบบสไตล์ โทเค็นการออกแบบ และการจัดการแอสเซ็ตที่ช่วยแนะนำเอเจนต์ AI ในการสร้างโค้ดที่สอดคล้องกัน รองรับรูปแบบไฟล์กฎสามแบบ: CLAUDE.md สำหรับ Claude Code, AGENTS.md สำหรับ Codex CLI และ .cursor/rules/figma-design-system.mdc สำหรับ Cursor ต้องมีการเชื่อมต่อเซิร์ฟเวอร์ Figma MCP และการวิเคราะห์โค้ดเบสเพื่อค้นหารูปแบบที่มีอยู่ก่อนสร้างกฎ...

npx skills add https://github.com/figma/mcp-server-guide --skill create-design-system-rules

ดาวน์โหลด ZIP GitHub

Skills เพิ่มเติมจาก figma

video-interaction-mapper

ทักษะนี้ควรใช้เมื่อผู้ใช้ขอให้วิเคราะห์การบันทึกหน้าจอ UI และแมปสถานะการโต้ตอบลงใน Figma เรียกใช้สำหรับคำขอเช่น "put video…

figma-code-connect

สร้างและดูแลไฟล์เทมเพลต Figma Code Connect ที่แมปส่วนประกอบของ Figma กับโค้ดสั้นๆ ใช้เมื่อผู้ใช้พูดถึง Code Connect, ส่วนประกอบของ Figma…

figma-implement-motion

แปลการเคลื่อนไหวและแอนิเมชันจาก Figma เป็นโค้ดแอปพลิเคชันที่พร้อมใช้งานจริง ใช้เมื่อต้องการนำแอนิเมชัน/การเคลื่อนไหวจากดีไซน์ Figma ไปใช้งาน — ผู้ใช้กล่าวถึง…

การแปล SwiftUI ↔ Figma ใช้เมื่อผู้ใช้กล่าวถึง Swift, SwiftUI, iOS, iPhone หรือ iPad — ไม่ว่าทิศทางใด — แปลการออกแบบ Figma เป็น…

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

ทักษะนี้ช่วยให้เอเจนต์ใช้เครื่องมือ MCP use_figma ของ Figma ในบริบทของสไลด์ สามารถใช้ร่วมกับ figma-use ซึ่งมีบริบทพื้นฐานสำหรับการใช้…

figma-use-figjam

ทักษะนี้ช่วยให้เอเจนต์ใช้เครื่องมือ MCP use_figma ของ Figma ในบริบทของ FigJam สามารถใช้ควบคู่กับ figma-use ซึ่งมีบริบทพื้นฐานสำหรับการใช้…

code-connect-components

สร้างการเชื่อมโยงแบบสองทิศทางระหว่างคอมโพเนนต์การออกแบบใน Figma และการใช้งานในโค้ดโดยใช้ Code Connect ต้องมีการเชื่อมต่อเซิร์ฟเวอร์ Figma MCP และคอมโพเนนต์ที่เผยแพร่บนแผน Organization หรือ Enterprise โดยอัตโนมัติจะระบุคอมโพเนนต์ที่ไม่มีการแมปในการเลือกใน Figma จากนั้นสแกนโค้ดเบสของคุณเพื่อหาคอมโพเนนต์โค้ดที่ตรงกันตามชื่อ โครงสร้าง และพร็อพส์ นำเสนอคอมโพเนนต์ที่ตรงกันให้คุณตรวจสอบก่อนสร้างการแมป เพื่อให้สามารถยอมรับหรือปฏิเสธแบบเลือกได้ รองรับหลาย...