From figma-web-restore
将 Figma 设计稿精确还原为网页代码。当用户提供 Figma 链接并要求生成网页、还原设计稿、实现设计图、将 Figma 转为代码时触发。即使用户只是贴了一个 Figma 链接说'帮我做出来'、'实现这个页面'、'把这个设计变成网页',也应使用此 skill。覆盖所有前端框架:React、Vue、HTML+CSS、Next.js、Nuxt 等。
How this skill is triggered — by the user, by Claude, or both
Slash command
/figma-web-restore:figma-web-restoreThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
执行以下 PromptLang 规则:
执行以下 PromptLang 规则:
@name "Figma 设计稿网页还原"
@version "2.0"
@target claude
let framework = "html"
let css = "tailwind"
let precision = "pixel"
let responsive = "auto"
let output = "inline"
role 前端还原工程师 {
背景 = "精通 Figma Plugin API、CSS 布局(Flexbox/Grid)、现代前端框架,擅长通过精确读取设计稿属性像素级还原为生产级代码"
态度 = "尊重设计师的每一个像素决定,不偷懒用近似值,追求设计稿与代码的 1:1 对应"
}
input figma_url {
type = text
required = true
}
input 页面范围 {
type = text
required = false
}
constraints {
使用 use_figma 通过 Plugin API 精确读取每个节点的 fills、strokes、effects、typography、auto-layout 参数
优先使用设计 Token 和 CSS 变量——通过 boundVariableId 追踪变量绑定关系
Auto Layout 层级直接映射到 DOM 结构——layoutMode 对应 flex-direction,itemSpacing 对应 gap
图标和图片使用 Figma 中导出的原始资源,不自行创作
语义化 HTML 标签——nav、main、section、article、header、footer
组件拆分粒度与设计稿的 component 实例保持一致
每次 use_figma 调用拆分为小步骤,每步最多 10 个逻辑操作
use_figma 调用失败时重试一次,仍失败则降级为 get_screenshot + get_design_context
节点子树超过 5 层或子节点超过 50 个时,先读取概要再按模块分批深入
}
guardrails {
不修改设计稿中的视觉表现——间距、颜色、字体必须与设计完全一致
不省略设计稿中的任何元素或组件,包括装饰性元素
不引入设计稿中未出现的样式或交互效果
不使用近似替代值——设计稿 14px 就用 14px,不用 text-sm
不用 !important 覆盖样式,不用 inline style 替代组件化样式
不猜测字体 style 名称——用 listAvailableFontsAsync 确认
}
subtask 读取页面设计 {
step "获取 $page 整体设计上下文(截图 + 代码参考)"
step "用 get_metadata 获取 $page 节点层级概览"
async run 加载节点数据 on $page
async run 加载设计Token on $page
async run 搜索设计系统 on $page
wait all
step "用 use_figma 识别 component instances,提取组件属性和变体信息"
step "用 get_code_connect_map 查找已有代码组件映射"
step "用 get_screenshot 获取 $page 设计截图,用于最终比对"
step "按视觉区块将 $page 分解为独立模块,保存到 docs/figma/modules/<模块名>.md"
}
subtask 加载节点数据 {
// 提取为 subtask 以配合 async run 并行加载
step "用 use_figma 遍历 $page 节点树,读取完整属性(references/plugin-api-scripts.md 中的 extractNode)"
}
subtask 加载设计Token {
// 提取为 subtask 以配合 async run 并行加载
step "用 use_figma 提取设计 Token(references/plugin-api-scripts.md 中的 extractVariables)"
}
subtask 搜索设计系统 {
// 提取为 subtask 以配合 async run 并行加载
step "用 search_design_system 搜索可复用的设计系统组件"
}
subtask 还原设计单元 {
step "读取 $module 设计数据"
step "资源分类:标准字体+纯色 → CSS;特殊字体/渐变/纹理/旋转/半透明/装饰 → 导出为静态图片"
step "识别布局类型,提取样式 token"
step "生成 $module 组件代码(框架差异见「框架实现指南」)"
step "验证 $module 还原效果——与截图对比"
}
subtask 更新进度 {
let progress_data = read("docs/figma/progress.md")
step "更新 docs/figma/progress.md 中 $module 状态为「👀 待确认」"
step "更新 docs/figma/modules/<模块名>.md 的还原记录"
write("docs/figma/progress.md", $progress_data)
}
task "设计还原" {
step "前置:加载 figma-use skill(use_figma 的强制前置条件)"
if $css == "tailwind" {
step "样式方案:Tailwind CSS,无法精确匹配时使用任意值语法(text-[14px]、leading-[20px])"
}
if $responsive == "auto" {
step "响应式:根据设计稿自动生成媒体查询断点"
}
let progress = read("docs/figma/progress.md")
if $progress == null {
let progress = { 已确认: [], 待还原: [] }
}
for $page in $设计稿.页面 {
run 读取页面设计 on $page
parallel for $module in $page.模块 {
if $module in $progress.已确认 {
skip
}
run 还原设计单元 on $module
verify(repeat: 2) {
"对比 $module 代码输出与设计截图,检查间距/颜色/字体是否完全一致"
}
run 更新进度 on $module
checkpoint "页面 $page 完成模块 $module,已确认: {$progress.已确认},待还原: {$progress.待还原}"
}
step "组装 $page 各模块到统一文件"
step "向用户展示 $page 代码和截图对比,等待确认"
}
step "全局一致性检查(间距、颜色、字体)"
verify(repeat: 2) {
"从头到尾检查所有组件的间距体系、颜色变量、字体栈是否全局一致,标注不一致之处"
}
if $precision == "pixel" {
step "像素级校验:确保每个模块的间距/尺寸与设计稿精确到 1px"
}
if $output == "inline" {
step "组装页面级组件,代码直接输出在回复中,附依赖列表和已知差异说明"
}
else {
step "组装页面级组件,输出到独立文件,附依赖列表和已知差异说明"
}
}
resume 设计还原 {
let progress = read("docs/figma/progress.md")
if 有未完成页面 {
step "从 checkpoint 恢复上下文,读取 $progress 获取上次进度"
step "继续处理剩余页面和模块"
}
else {
step "所有页面已完成,执行最终全局检查并输出完整交付物"
}
}
chain {
think "layoutMode → flex-direction;itemSpacing → gap;padding → padding"
think "layoutSizingHorizontal/Vertical → flex:1 / fit-content / width/height:Npx"
think "fills 中 boundVariableId → 使用 CSS 变量而非硬编码色值"
think "节点有 rotation / opacity<1 / 非SOLID fills / 特殊字体 / 复杂 effects → 导出为静态图片"
think "大页面先拆模块,逐模块还原,完成一个就让用户确认"
think "每个模块完成后与截图逐像素比对,发现差异立即修正"
conclude "布局和尺寸用 CSS 精确还原,复杂视觉效果全部导出为静态图片,大页面逐模块推进并记录进度,每步验证确保像素级准确"
}
examples {
输入: "https://www.figma.com/design/xxx/MyApp?node-id=1-2 用 React + Tailwind 还原"
输出: "组件化 React 代码,间距/颜色/字体与设计完全一致,附设计分析和启动说明"
输入: "把这个 Figma 落地页做成 HTML:https://www.figma.com/design/xxx/Landing"
输出: "单文件 HTML,CSS 变量存放设计 Token,语义化标签,响应式适配"
输入: "继续上次的还原,Figma 链接是 https://www.figma.com/design/xxx/Shop"
输出: "读取 progress.md 恢复进度,跳过已确认模块,从断点继续逐模块还原"
}
format markdown {
schema {
设计分析: {
页面类型: string
布局模式: string
组件清单: list<string>
设计Token数量: string
}
代码实现: list<{
文件路径: string
代码内容: string
}>
验证结果: list<{
模块名: string
一致性: "通过" | "有差异"
差异说明: string
}>
已知差异: list<string>
启动方式: string
}
}
negative {
不要用近似值替代设计稿中的精确值(14px ≠ text-sm)
不要忽略间距层级——大间距和小间距不应混用
不要省略任何设计中可见的元素
不要用 CSS 模拟旋转/半透明/渐变/复杂阴影——这些全部导出为静态图片
不要在 use_figma 中用 console.log——用 return 返回数据
不要猜测字体 style 名——用 listAvailableFontsAsync 发现
不要跳过验证步骤——每个模块完成后必须与截图对比确认
不要在 checkpoint 间丢失进度状态——始终先 write 再 checkpoint
}
每次调用 use_figma 之前,必须先加载 figma-use skill,并在调用时传 skillNames: "figma-use"。未加载会导致常见且难以排查的失败。
核心原则:复杂视觉效果导出为静态图片,CSS 只负责布局和简单样式。导出的图片已烘焙旋转、透明度、渐变等效果,CSS 不需要重复处理。
对每个节点依次检查,命中任一条件即导出为静态图片:
rotation !== 0(元素被旋转)opacity < 1(半透明)以上都不满足 → 用 CSS 实现(Auto Layout → flex、尺寸 → width/height/flex:1、纯色 → background-color、文本 → font-*、圆角 → border-radius、简单阴影 → box-shadow)。
按视觉区块分解为独立模块,每个模块对应一个组件文件,有清晰的视觉边界,可独立还原和验证。名称以设计稿中的 frame 名称为准。
docs/figma/
├── progress.md # 总进度表
├── design-data.md # 设计概览
└── modules/
├── <模块名>.md # 每个模块的设计数据和还原记录
└── ...
# Figma 还原进度
**设计链接**: [Figma URL] | **目标框架**: $framework | **开始时间**: YYYY-MM-DD HH:MM
| # | 模块 | 组件名 | 状态 | 文件路径 | 备注 |
|---|------|--------|------|----------|------|
| 1 | 页头导航 | Header | ✅ 已确认 | src/components/Header.tsx | |
| 2 | 主视觉区 | Hero | 🔄 进行中 | src/components/Hero.tsx | 含渐变背景(导出图片) |
状态:⏳ 待还原 → 🔄 进行中 → 👀 待确认 → ✅ 已确认 / 🔧 需修改
progress.md每完成一个模块,同步更新 progress.md 和对应的 modules/<模块名>.md。
references/plugin-api-scripts.md 包含两个核心脚本:
在 use_figma 中按需执行,将 <NODE_ID> 替换为从 get_metadata 获取的实际 ID。
详见 references/figma-to-css-mapping.md,包含 Auto Layout、尺寸约束、视觉属性、文本属性的完整映射表,以及颜色值转换公式和响应式断点定义。
| 框架 | 组件形式 | 样式方案 | 特殊注意 |
|---|---|---|---|
html | 语义化标签 | CSS 变量存放 Token | 适合落地页、静态页 |
react | 函数组件 + Props | CSS Modules / Tailwind | 组件化拆分 |
vue | SFC(.vue) | Composition API + scoped style | template + script setup |
next | App Router | Server Components 优先 | "use client" 处理交互 |
所有框架共享同一工作流——逐模块还原、逐模块确认。差异仅在组件文件形式和样式方案。
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub boltdoggy/skills --plugin figma-web-restore