← 返回 Skills 市场
136
总下载
0
收藏
1
当前安装
1
版本数
在 OpenClaw 中安装
/install design-to-code-local
功能描述
本地版设计稿还原工具。Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, im...
使用说明 (SKILL.md)
\r \r
还原设计图（Design to Code）\r
\r 将设计稿（Figma/Sketch/图片）高保真还原为前端代码，保证布局、间距、字体、颜色与交互一致。\r \r
触发场景\r
\r
- 用户说「还原设计图」「按设计稿实现」「切图」「设计转代码」\r
- 提供 Figma/Sketch 链接、设计图截图或标注\r
- 需要实现某个页面/组件的 UI\r \r
执行流程\r
\r
1. 解析设计稿\r
\r
- 标注：尺寸、间距（padding/margin/gap）、字号与行高、颜色（含透明度）、圆角、阴影、边框\r
- 层级：组件划分、嵌套关系、可复用模块\r
- 状态：默认 / hover / focus / disabled / 加载 / 空态 / 错误\r
- 响应式：断点、不同宽度下的布局变化（栅格、换行、隐藏）\r \r
2. 设计 token 对齐\r
\r
- 颜色、字号、间距尽量映射到项目已有 CSS 变量或 Tailwind 配置\r
- 若无现成 token，在实现时用变量命名（如
--color-primary），便于后续统一\r \r
3. 实现优先级\r
\r
- 布局：Flex/Grid 先搭骨架，保证对齐与间距\r
- 字体排版：字体、字号、字重、行高、颜色\r
- 视觉：背景、边框、圆角、阴影\r
- 交互状态：hover/focus/disabled 等\r
- 响应式：断点与弹性布局\r
- 动效：若有设计说明的过渡/动画再补\r \r
4. 还原度自检\r
\r
- 关键尺寸与设计稿一致（可容忍 1–2px 差异）\r
- 字体与颜色与设计一致\r
- 主要断点下布局合理、无错位\r
- 可交互元素有明确状态反馈\r \r
输出约定\r
\r
- 使用项目现有技术栈（如 Next.js、Tailwind、SCSS、组件库）\r
- 组件化：可复用部分拆成组件并命名清晰\r
- 语义化 HTML + 合理 ARIA（按钮、链接、表单）\r
- 必要时注明：某处与设计稿差异及原因（如兼容性、可访问性）\r \r
常用对照\r
\r | 设计稿 | 实现方式 |\r |--------|----------|\r | 8px 栅格 | 间距用 8 的倍数（8/16/24/32） |\r | 字体层级 | 对应 heading/body/caption 等语义类或 design token |\r | 模糊/毛玻璃 | backdrop-filter + 半透明背景 |\r | 多行截断 | line-clamp 或 -webkit-line-clamp |\r | 安全区域 | padding 配合 env(safe-area-inset-*) |\r
安全使用建议
This skill is coherent and instruction-only, but it implicitly needs access to your project files and design assets to produce code—ensure you only grant the agent access to repositories or design links you trust. Note minor metadata inconsistencies (the package metadata files reference different owner/slug/homepage details); if provenance matters, verify the author/source (e.g., the GitHub link in clawhub.json) before use. Always review generated code and avoid exposing private design assets to unknown endpoints (the skill itself does not declare any).
功能分析
Type: OpenClaw Skill
Name: design-to-code-local
Version: 1.0.0
The skill bundle is a set of instructions for an AI agent to perform frontend development tasks, specifically converting design mockups (Figma/Sketch/images) into code. It contains no executable code, no network requests, and no instructions that would lead to data exfiltration or unauthorized system access. The content in SKILL.md and README.md is strictly aligned with its stated purpose of UI implementation and design token mapping.
能力评估
Purpose & Capability
Name and description match the SKILL.md instructions: parsing design artifacts, mapping design tokens, and producing componentized frontend code. No unrelated credentials, binaries, or install steps are requested.
Instruction Scope
SKILL.md is high-level and stays within the design-to-code scope. It implicitly assumes access to the user's design assets and project files to produce code, but it does not instruct reading unrelated system files or transmitting data externally. Users should be aware the agent will need access to local project files or design links to perform the task.
Install Mechanism
No install spec or code files are included; this is instruction-only, so nothing is downloaded or written to disk by the skill itself.
Credentials
The skill requests no environment variables, credentials, or config paths. The lack of secrets or extra env access is proportionate to the described functionality.
Persistence & Privilege
Skill is not always-on, does not request persistent presence, and contains no code that modifies agent/system configuration.
如何使用
- 确保已安装 OpenClaw（本地或 Docker 部署）
- 在对话框中输入安装命令：
/install design-to-code-local - 安装完成后，直接呼叫该 Skill 的名称或使用
/design-to-code-local触发 - 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
版本历史
v1.0.0
- Initial release of design-to-code-local.
- Converts Figma, Sketch, or image-based design mockups into pixel-accurate frontend code with responsive layouts.
- Supports parsing design details: spacing, typography, colors, layer hierarchy, component states, and breakpoints.
- Maps design tokens to project CSS variables or uses clear variable naming.
- Outputs semantically structured, componentized code matching the project tech stack.
元数据
常见问题
Design To Code Local 是什么？
本地版设计稿还原工具。Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, im... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 136 次。
如何安装 Design To Code Local？
在 OpenClaw 或 Claude Code 对话框中运行命令「/install design-to-code-local」即可一键安装，无需额外配置。
Design To Code Local 是免费的吗？
是的，Design To Code Local 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。
Design To Code Local 支持哪些平台？
Design To Code Local 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。
谁开发了 Design To Code Local？
由 LongFer（@longfer）开发并维护，当前版本 v1.0.0。
推荐 Skills