implement-from-design
基于 Figma、Sketch、MasterGo、Pixso、墨刀或摹客的设计上下文实现页面或组件，强调复用、设计 Token 映射以及面向生产的前端实现方式，并将实现计划保存为 Markdown 文件。当用户提供设计稿链接、设计选区、截图或要求按设计稿实现组件/页面时自动激活。
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/bovinphang/implement-from-designWhat This Skill Does
implement-from-design is a specialized technical agent skill designed to bridge the gap between design mockups and production-ready frontend code. It supports major design tools like Figma, Sketch, MasterGo, Pixso, and others by leveraging MCP (Model Context Protocol) integrations to extract design structures, variables, and components directly. This skill enforces rigorous design-to-code workflows, prioritizing existing design tokens, atomic design principles, and component reuse over redundant implementation.
Installation
To integrate this skill into your OpenClaw environment, execute the following command in your terminal:
clawhub install openclaw/skills/skills/bovinphang/implement-from-design
Use Cases
- Feature Development: Implementing new UI features such as dashboards, complex forms, or modal dialogs directly from design files.
- Design System Consistency: Ensuring new components align perfectly with existing brand tokens (spacing, color, typography) by mapping design definitions to project-specific CSS variables.
- Component Refactoring: Analyzing design files to replace scattered hardcoded UI elements with centralized, reusable component library members.
- Rapid Prototyping: Generating implementation plans and scaffolding code for new pages based on low-to-high fidelity prototypes.
Example Prompts
- "Implement the new User Settings dashboard based on the latest Figma design file link: [https://figma.com/file/...]. Focus on using our existing button and input components."
- "Here is a screenshot of the new login modal. Please analyze the layout and spacing, compare it with our current Modal component, and generate an implementation plan."
- "Convert this MasterGo design section into a reusable React component, ensuring all colors map to our defined Tailwind or CSS design tokens."
Tips & Limitations
- Pre-requisites: Ensure your project has an established component library or design token file. This skill is most effective when it has a clear reference system to map against.
- Plan First: Always review the Markdown implementation plan generated in the
reports/folder before executing large codebase changes. This ensures the component hierarchy and state management align with your architecture. - Constraint Awareness: The skill is highly opinionated regarding accessibility and semantic HTML. If you are working on a legacy system, be prepared to adjust the output to match existing (potentially non-semantic) patterns. When using tools without MCP support like 摹客, please provide high-resolution screenshots and style annotations to avoid accuracy loss.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-bovinphang-implement-from-design": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read, code-execution
Related Skills
frontend-code-review
从架构、可维护性、类型安全、可访问性、样式一致性、性能和可测试性等角度审查前端代码，并将报告保存为 Markdown 文件。当用户要求代码审查、Review、评审代码质量时自动激活。
legacy-web-standard
针对 JavaScript + jQuery + HTML/CSS 传统前端项目的开发与维护规范。当用户在非框架项目中工作，涉及 jQuery、原生 JS、传统多页面应用（MPA）、模板引擎渲染页面、或维护遗留代码时自动激活。
accessibility-check
审查或改进前端 UI 的语义结构、键盘支持、焦点管理、标签以及常见的 WCAG 相关问题，并将报告保存为 Markdown 文件。当用户提到无障碍、accessibility、a11y、WCAG，或在实现交互组件时自动激活。
security-review
前端代码安全审查，检测 XSS、CSRF、敏感数据泄露、不安全的用户输入处理和依赖风险，并将报告保存为 Markdown 文件。当用户要求安全检查、安全审查，或代码涉及用户输入、认证、支付、文件上传等敏感操作时自动激活。
nextjs-project-standard
Next.js 14+ 项目规范，涵盖 App Router、SSR/SSG、流式渲染、路由与布局、数据获取、中间件、元数据与 SEO。当用户在 Next.js 项目中创建、修改页面或模块时自动激活。