implement-from-design基于 Figma、Sketch、MasterGo、Pixso、墨刀或摹客的设计上下文实现页面或组件，强调复用、设计 Token 映射以及面向生产的前端实现方式，并将实现计划保存为 Markdown 文件。当用户提供设计稿链接、设计选区、截图或要求按设计稿实现组件/页面时自动激活。
Install via ClawdBot CLI:
clawdbot install bovinphang/implement-from-designGrade Limited — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Apr 23, 2026
A company wants to update its product detail page based on a Figma design, requiring integration of existing design tokens for colors and spacing, and reuse of components like buttons, modals, and cards to maintain consistency across the site.
A startup needs to implement a new analytics dashboard from a MasterGo design, focusing on reusable charts, tables, and input components while mapping new design variables to existing CSS tokens for scalability.
A bank is adding a funds transfer feature designed in Pixso, requiring adherence to accessibility standards, reuse of form and modal components, and integration with the app's existing UI kit to ensure regulatory compliance.
A healthcare provider updates its patient portal using a Sketch design, emphasizing semantic HTML for accessibility, reuse of table and card components, and token mapping for colors and fonts to meet industry standards.
An edtech company implements a course management page from a 墨刀 prototype, requiring responsive behavior, reuse of tabs and loading states, and careful handling of design gaps through user-provided screenshots for accurate implementation.
Companies offer this skill as part of a subscription service for frontend development tools, generating revenue through monthly or annual fees based on usage tiers and premium features like advanced MCP integrations.
Freelancers use this skill to provide design-to-code implementation services for clients, charging per project or hourly rates, with revenue driven by the complexity and scale of the design tasks.
Large enterprises integrate this skill into their internal workflows to streamline UI development, reducing costs and time-to-market by reusing components and tokens, with revenue indirectly supported through improved product efficiency.
💬 Integration Tip
Ensure MCP tools are properly configured for the design source to avoid delays, and always verify existing tokens before coding to maintain consistency.
Scored Apr 19, 2026
Build or update the BlueBubbles external channel plugin for Clawdbot (extension package, REST send/probe, webhook inbound).
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Curated collection of professional color and typography themes for styling artifacts — slides, docs, reports, landing pages. Use when applying visual themes to presentations, generating themed content, or creating custom brand palettes. Triggers on theme, color palette, font pairing, slide styling, presentation theme, brand colors.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.