作者 scoobynko · scoobynko/claude-code-design-skills
Figma-to-Next.js以正确的方式—首先重用组件， Figma变体映射到props ，严格的TypeScript ，默认情况下为a11y。
scoobynko/claude-code-design-skills是用于设计到代码工作流程的Claude Code技能包。旗舰“Figma to Code”技能将Figma设计转换为具有明确规则的生产就绪的React/Next.js代码：更喜欢重用现有组件，将Figma变体映射到类型化的道具，强制执行前端/后端边界，并从一开始就连接a11y。与Figma MCP配对；更关注像素完美，而不是生成您的团队实际将合并的代码。
何时使用： 你有一个现成的Figma框架，并希望React/Next.js代码适合你的代码库。
结果： 一个真正的Next.js页面合并在一个PR中—无需审阅者重写。
何时使用： 设计师在Figma中添加了一个新的变体，代码需要跟上。
结果： 设计系统漂移关闭而不会破坏消费者。
何时使用： 您需要通过屏幕阅读器审核的对话框/菜单/表单。
结果： 无需手持每个组件即可实现。
将Figma模式映射到存在的Magic UI组件上
| 工具 | 输入参数 | 何时调用 | 成本 |
|---|---|---|---|
| figma-to-code (SKILL) | Figma frame URL + repo conventions | 将设计转化为适合您代码库的代码 | 0 |
专员编写新按钮，而不是重复使用现有按钮在提示符中显式列出存储库的组件目录。
Include 'check src/components/ first' in the request缺少较新Figma变体的道具在转换之前询问变体diff ；更新组件而不是分叉。
Agent output includes a 'variants' section类型过于宽松（随处可见）要求“无任何;如果无法键入变量，则大声失败”。
Search the diff for ': any'| 替代方案 | 何时用它替代 | 权衡 |
|---|---|---|
| magic-ui-mcp | 您需要预先构建的动画组件，而不是Figma转换器 | 库优先，而不是设计优先 |
| claude-design-auditor-skill | 您想要评估设计质量，而不是生成代码 | 审核，而不是生产 |
| hue-brand-skill | 您需要设计语言，而不是帧转换 | 系统优先，而不是帧优先 |