figma-create-design-system-rules:给 Agent 写一套项目专属设计系统规则
介绍 openai/skills 策展目录中的 figma-create-design-system-rules:在已连接 Figma MCP 的前提下,分析代码库并生成项目级设计系统规则,约束组件路径、Design Token、样式方案与 Figma-to-code 流程,分别写入 CLAUDE.md、AGENTS.md 或 .cursor/rules/figma-design-system.mdc,缓解 AI 落地 UI 时乱用间距、硬编码颜色、重复造组件等问题。文中核实安装方式、五步工作流与注意事项。
阅读全文用 figma-generate-design 把页面从代码反向生成到 Figma
介绍 OpenAI curated 与 Figma MCP 生态中的 figma-generate-design Skill:在已连接 Figma MCP、目标文件具备设计系统的前提下,把应用页面或多区块布局按组件实例与 Token 写入 Figma,并强制配合 figma-use。文中核实了插件安装(Cursor / Claude Code / Codex)、npx skills 安装方式、按区块组装与 generate_figma_design 并行校准等官方流程,以及与 figma-implement-design、Code Connect 等相邻 Skill 的边界。
阅读全文