将与应用程序页面、视图或多部分布局转换为 Figma 设计相关的任务，与 figma-use 技能配合使用。根据代码或描述在 Figma 中发现设计系统组件、变量和样式，并逐步组装视图。
这是一个专门用于将应用代码或用户描述转换为 Figma 设计的 AI Agent 技能。它通过解析代码连接文件、现有屏幕和库搜索，发现设计系统中的组件、变量和样式，然后逐步导入并组装视图。该技能适用于需要将完整页面、模态框、对话框、侧边栏、面板或多部分布局构建或更新到 Figma 的场景。它强调使用设计系统令牌而非硬编码值，确保设计的一致性和可维护性。支持平台包括 Figma，推荐与 figma-use 技能配合使用以实现更复杂的工作流。触发的自然语言指令包括“写入 Figma”、“从代码创建 Figma”、“推送页面到 Figma”等。
npx skills add https://github.com/figma/mcp-server-guide/tree/main/skills/figma-generate-design当任务涉及将应用程序页面、视图或多部分布局转换为 Figma 时，请与 figma-use 技能一起使用此技能。触发词：'写入 Figma'，'从代码在 Figma 中创建'，'将页面推送到 Figma'，'将此应用/页面构建到 Figma'，'创建一个屏幕'，'在 Figma 中构建一个落地页'，'更新 Figma 屏幕以匹配代码'，'将此模态框/对话框/抽屉/面板转换为 Figma'。每当用户希望从代码或描述在 Figma 中构建或更新完整页面、模态框、对话框、抽屉、侧边栏、面板或任何组合的多部分视图时，这是首选的工作流技能。它从代码连接文件、现有屏幕和库搜索中发现设计系统组件、变量和样式，然后将其导入，并使用设计系统令牌（而非硬编码值）逐步按部分组装视图。
This repo contains 9 individual skills — each has its own dedicated page.
Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this component", "link component to code", "create code connect mapping", "add code connect", "connect design to code", or wants to establish mappings between Figma designs and code implementations. Requires Figma MCP server connection.
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides file — or when you need a fresh file before calling `use_figma`. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard, /figma-create-new-file slides Q3 Review)
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".