Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From ui-designer
Translates a UI design specification, screenshot, or Figma description into working code by analyzing layout, components, typography, colors, and interactions.
How this command is triggered — by the user, by Claude, or both
Slash command
/ui-designer:implement-designThe summary Claude sees in its command listing — used to decide when to auto-load this command
Implement a UI design from a specification, screenshot, or Figma description into working code. ## Steps 1. Analyze the design specification: 2. Break the design into components: 3. Implement the layout: 4. Add typography and colors: 5. Add interactive behavior: 6. Test against the original design: ## Format ## Rules - Match the design as closely as possible; ask before deviating. - Use the project's existing component library before creating new ones. - All text must be real content, not Lorem Ipsum.
Implement a UI design from a specification, screenshot, or Figma description into working code.
Design: <design name or reference>
Components Created: <list>
Layout: <grid/flex structure>
Responsive: <breakpoints implemented>
6plugins reuse this command
First indexed Mar 30, 2026
npx claudepluginhub ais1m0n3/awesome-claude-code-toolkit --plugin ui-designer/implement-designTranslates a UI design specification, screenshot, or Figma description into working code by analyzing layout, components, typography, colors, and interactions.
/figmaConverts a Figma design URL or Stitch screen reference into production code, analyzing layout, typography, colors, and components.
/frontend-designImplements high-quality UI components compliant with existing design systems like shadcn/ui and Tailwind, covering all states (hover, loading, error, empty).
/ux-designGenerates a premium frontend UI design or component from a brief, running a structured discovery protocol to gather brand, reference, and style direction before producing anti-AI-slop code.
/design-to-codeConverts visual designs, screenshots, or URLs into production-ready React components via a four-stage extraction, matching, adaptation, and verification pipeline.
/sculpt-uiGenerates design brief, micro design system, and implementation strategy for distinctive production-grade frontend interfaces before coding.