implement-from-design

What 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

1. "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."
2. "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."
3. "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.