← Back to Skills Marketplace
136
Downloads
0
Stars
1
Active Installs
1
Versions
Install in OpenClaw
/install design-to-code-local
Description
本地版设计稿还原工具。Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, im...
README (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
Usage Guidance
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).
Capability Analysis
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.
Capability Assessment
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.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install design-to-code-local - After installation, invoke the skill by name or use
/design-to-code-local - Provide required inputs per the skill's parameter spec and get structured output
Version History
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.
Metadata
Frequently Asked Questions
What is 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... It is an AI Agent Skill for Claude Code / OpenClaw, with 136 downloads so far.
How do I install Design To Code Local?
Run "/install design-to-code-local" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Design To Code Local free?
Yes, Design To Code Local is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does Design To Code Local support?
Design To Code Local is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Design To Code Local?
It is built and maintained by LongFer (@longfer); the current version is v1.0.0.
More Skills