Design To Code

Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...

Security Scan

The skill is an instruction-only Design→Code helper whose requested resources and runtime instructions are consistent with its stated purpose and do not ask for unrelated credentials or installs.

Purpose & Capability

Name/description (convert Figma/Sketch/images to frontend code) matches the SKILL.md: the instructions focus on analyzing designs, extracting sizes/colors/typography, and producing front-end components. No unrelated services, binaries, or credentials are requested.

Instruction Scope

Runtime instructions are scoped to reading provided design assets and, if the user supplies it, existing project code to align tokens/tech stack. The skill does not instruct the agent to read unrelated system files, environment variables, or transmit data to unexpected endpoints. It does ask to inspect 'existing code' when provided, which is appropriate for this task.

Install Mechanism

No install spec or code files — purely instruction-only. That minimizes disk writes and arbitrary code execution risk.

Credentials

No environment variables, credentials, or config paths are required. The instructions mention Figma/Sketch links and asking about access permissions, but do not request API tokens or other secrets.

Persistence & Privilege

always is false (good). The skill allows normal autonomous invocation (platform default). When invoked autonomously it may read user-supplied project files to determine tech stack — this is expected for the task but users should be aware and only provide repos/designs they consent to share.

Assessment

This skill appears coherent and low-risk: it only contains step-by-step guidance for converting designs to frontend code and asks users to provide design assets or existing project code when necessary. Before using it, avoid pasting secrets or private tokens into messages; grant only the minimal access needed (for example, Figma view links or a code snippet rather than entire private repos) and confirm whether the agent will make commits or only generate code snippets. If you need the agent to use a Figma API token or push to a repository, treat those actions as separate and supply credentials through secure channels only when you explicitly intend that behavior.

还原设计图（Design to Code）

将设计稿（Figma/Sketch/图片）高保真还原为前端代码，保证布局、间距、字体、颜色与交互一致。

触发场景

• 用户说「还原设计图」「按设计稿实现」「切图」「设计转代码」
• 提供 Figma/Sketch 链接、设计图截图或标注
• 需要实现某个页面/组件的 UI

执行流程

1. 先确认用户给了什么

用户给的	第一步
Figma 链接	问：有没有 Figma 访问权限？如果没有，让用户截图或导出标注
设计图截图	直接分析，提取尺寸/颜色/字体/间距，列出关键标注
只有描述，没有设计图	问：「有没有设计稿？如果没有，我可以按常见 UI 规范实现，但可能和你预期有出入」
有设计图 + 现有代码	先读现有代码，了解技术栈和已有组件，再还原设计

2. 分析设计稿，提取关键信息

读设计图时，按这个顺序提取（不要跳过）：

布局结构

• 整体是几列？用 Flex 还是 Grid？
• 各区块的宽度是固定的还是弹性的？
• 有没有响应式断点？

间距与尺寸（精确到 px）

• 容器的 padding
• 元素之间的 gap/margin
• 组件的宽高（固定值还是百分比）

字体

• 字号、字重、行高、字间距
• 颜色（含透明度）

颜色

• 背景色、文字色、边框色、阴影
• 是否能映射到项目已有的 design token 或 Tailwind 颜色

交互状态（设计稿里有没有标注）

• hover、focus、active、disabled
• 没有标注的，按项目现有规范处理，不要自己发明

3. 实现顺序，不要乱

按这个顺序写代码，不要一上来就写细节：

1. HTML 骨架：先把语义化结构搭出来，不加任何样式
2. 布局：Flex/Grid 定位，保证对齐和间距
3. 字体排版：字号、字重、行高、颜色
4. 视觉装饰：背景、边框、圆角、阴影
5. 交互状态：hover/focus/disabled
6. 响应式：断点适配
7. 动效：最后加，设计稿有说明才加

4. 遇到这些情况，按以下方式处理

设计稿里的颜色/字号在项目 token 里没有 → 先问用户：「这个颜色 #3B82F6 是不是对应 blue-500？」不要直接写魔法值 → 如果确认没有对应 token，用 CSS 变量命名（--color-brand-primary），便于后续统一

设计稿标注不清晰，看不出具体数值 → 说明哪里看不清，给出合理推测值，让用户确认：「这里间距看起来是 16px，对吗？」

设计稿有动效但没有说明 → 不要自己发明动效，问用户：「这里有过渡动画吗？如果有，持续时间和缓动函数是什么？」

实现后和设计稿有出入 → 主动说明差异和原因，不要假装没有：「这里字体用了系统字体代替，因为项目没有引入 Inter」

5. 还原度自检（提交前必做）

• 关键尺寸与设计稿一致（容忍 1-2px 差异）
• 字体、颜色与设计一致
• 主要断点下布局正常，无错位
• 可交互元素有明确的状态反馈（hover/focus/disabled）
• 语义化 HTML（按钮用 <button>，链接用 <a>，不用 <div> 代替）
• 图片有 alt 属性

输出约定

• 使用项目现有技术栈（如 Next.js、Tailwind、SCSS、组件库）
• 组件化：可复用部分拆成组件并命名清晰
• 语义化 HTML + 合理 ARIA（按钮、链接、表单）
• 必要时注明：某处与设计稿差异及原因（如兼容性、可访问性）

常用对照

设计稿	实现方式
8px 栅格	间距用 8 的倍数（8/16/24/32）
字体层级	对应 heading/body/caption 等语义类或 design token
模糊/毛玻璃	backdrop-filter + 半透明背景
多行截断	line-clamp 或 -webkit-line-clamp
安全区域	padding 配合 env(safe-area-inset-*)