implement-design
โดย figma
แปลการออกแบบจาก Figma เป็นโค้ดที่พร้อมใช้งานจริงด้วยความเที่ยงตรงของภาพในระดับพิกเซล ต้องมีการเชื่อมต่อกับเซิร์ฟเวอร์ Figma MCP และ URL ของ Figma ที่มีคีย์ไฟล์และ ID โหนดเพื่อดึงบริบทการออกแบบ ภาพหน้าจอ และทรัพยากร ขั้นตอนการทำงานแบบมีโครงสร้างเจ็ดขั้นตอน: แยกวิเคราะห์ URL ดึงบริบทการออกแบบ จับภาพอ้างอิง ดาวน์โหลดทรัพยากร แปลงเป็นรูปแบบของโปรเจกต์ ทำให้เท่ากัน 1:1 และตรวจสอบกับ Figma ให้ความสำคัญกับการนำระบบการออกแบบกลับมาใช้ใหม่มากกว่าการทำซ้ำ แมปโทเค็นของ Figma กับการออกแบบของโปรเจกต์...
npx skills add https://github.com/figma/mcp-server-guide --skill implement-designSkills เพิ่มเติมจาก figma
video-interaction-mapper
figma
ทักษะนี้ควรใช้เมื่อผู้ใช้ขอให้วิเคราะห์การบันทึกหน้าจอ UI และแมปสถานะการโต้ตอบลงใน Figma เรียกใช้สำหรับคำขอเช่น "put video…
figma-code-connect
figma
สร้างและดูแลไฟล์เทมเพลต Figma Code Connect ที่แมปส่วนประกอบของ Figma กับโค้ดสั้นๆ ใช้เมื่อผู้ใช้พูดถึง Code Connect, ส่วนประกอบของ Figma…
create-design-system-rules
figma
กฎระบบการออกแบบที่กำหนดเองสำหรับการนำ Figma ไปใช้เป็นโค้ดอย่างสม่ำเสมอทั่วทั้งโปรเจกต์ของคุณ สร้างข้อกำหนดเฉพาะของโปรเจกต์สำหรับการจัดระเบียบคอมโพเนนต์ การจัดรูปแบบสไตล์ โทเค็นการออกแบบ และการจัดการแอสเซ็ตที่ช่วยแนะนำเอเจนต์ AI ในการสร้างโค้ดที่สอดคล้องกัน รองรับรูปแบบไฟล์กฎสามแบบ: CLAUDE.md สำหรับ Claude Code, AGENTS.md สำหรับ Codex CLI และ .cursor/rules/figma-design-system.mdc สำหรับ Cursor ต้องมีการเชื่อมต่อเซิร์ฟเวอร์ Figma MCP และการวิเคราะห์โค้ดเบสเพื่อค้นหารูปแบบที่มีอยู่ก่อนสร้างกฎ...
figma-implement-motion
figma
แปลการเคลื่อนไหวและแอนิเมชันจาก Figma เป็นโค้ดแอปพลิเคชันที่พร้อมใช้งานจริง ใช้เมื่อต้องการนำแอนิเมชัน/การเคลื่อนไหวจากดีไซน์ Figma ไปใช้งาน — ผู้ใช้กล่าวถึง…
figma-swiftui
figma
การแปล SwiftUI ↔ Figma ใช้เมื่อผู้ใช้กล่าวถึง Swift, SwiftUI, iOS, iPhone หรือ iPad — ไม่ว่าทิศทางใด — แปลการออกแบบ Figma เป็น…
figma-use-motion
figma
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
figma
ทักษะนี้ช่วยให้เอเจนต์ใช้เครื่องมือ MCP use_figma ของ Figma ในบริบทของสไลด์ สามารถใช้ร่วมกับ figma-use ซึ่งมีบริบทพื้นฐานสำหรับการใช้…
figma-use-figjam
figma
ทักษะนี้ช่วยให้เอเจนต์ใช้เครื่องมือ MCP use_figma ของ Figma ในบริบทของ FigJam สามารถใช้ควบคู่กับ figma-use ซึ่งมีบริบทพื้นฐานสำหรับการใช้…