技能说明
来自 JPeetz/agent-skills 的 design-to-code，专门处理 Figma、Sketch、Adobe XD、截图或设计规范到 React、Vue、Svelte 或原生 HTML/CSS 的落地。它会先提取设计令牌、拆组件层级和断点，再实现 WCAG 2.1 AA 语义结构、键盘操作和视觉回归检查。仓库 README 提供跨平台安装方式，但当前 GitHub 仓库根目录未发现可识别的许可证文件，使用前应确认项目许可和依赖边界。
关于此技能
把设计文件和视觉规范转成可运行的前端实现，兼顾设计令牌、响应式、可访问性与视觉复核。
核心能力
读取多种设计来源
处理 Figma、Sketch、Adobe XD、截图和设计规范，先整理颜色、字体、间距和组件信息。
从令牌到组件结构
把设计令牌映射到组件层级、状态、属性和 CSS 架构，减少硬编码和后期返工。
实现后做质量复核
覆盖断点、键盘操作、语义结构、对比度和视觉回归，确保结果不只是看起来像。
适用场景
Figma 转 React/Vue
把设计稿里的页面和组件拆成适合项目技术栈的可维护代码。
截图还原网页
从截图推断布局、色彩、排版和状态，并明确截图无法提供的交互假设。
建立响应式和无障碍实现
在实现设计的同时安排断点、焦点、键盘操作、语义标签和 WCAG 2.1 AA 检查。
使用步骤
- 01
确认设计来源和目标
说明是 Figma、截图还是规范文件，确定要做的页面、技术栈、浏览器和交付标准。
- 02
提取令牌并盘点组件
整理颜色、字体、间距、阴影、圆角、组件层级、状态和重复模式。
- 03
规划断点与实现方式
先决定响应式行为、CSS 组织方式、组件边界和现有设计系统的接入点。
- 04
实现并做视觉回归
写语义化代码，检查各断点、状态、键盘和读屏体验，并用截图或浏览器结果复核差异。
常见问题
只有一张截图也能转换吗？+
可以，但只能推断可见的布局和样式；隐藏状态、字体来源和交互行为需要补充说明或在实现时明确假设。
它会只生成静态页面吗？+
不会。工作流会关注组件状态、响应式、键盘操作和视觉回归，最终应落到项目可维护的前端代码。
会不会强行换掉现有技术栈？+
不会。技能强调保留项目已有框架、组件和设计系统，只在有理由时选择新的 CSS 或组件组织方式。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/09
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
gh skill install JPeetz/agent-skills design-to-code