Does it generate styling for different component states?

Yes, the Vision AI detects visual cues for hover, focus, and disabled states, automatically generating the corresponding CSS classes and Storybook variants.

Can I extract design tokens without generating a full component?

Yes, you can use the specialized /extract-design-tokens command to generate only the CSS variables, spacing scales, and theme JSON from your design assets.

Which image formats are supported for design conversion?

The skill supports standard high-resolution image formats including PNG and JPG, making it compatible with screenshots and exports from Figma, Sketch, Adobe XD, and Photoshop.

How accurate is the spacing and layout generation?

It provides high accuracy for layout structures (Flexbox/Grid), exact hex codes, and typography. It typically handles 80-90% of the manual styling work, requiring only minor refinements for complex animations.

Does it work with hand-drawn wireframe sketches?

Yes, it can interpret hand-drawn sketches to create basic layouts and component structures, though high-resolution digital mockups provide the best results for production code.

Design-to-Code Assistant

Name: Design-to-Code Assistant
Author: flight505

byflight505

Herramientas de Diseño

Transforms design screenshots, Figma exports, and mockups into production-ready React components using Claude's multimodal vision capabilities.

Acerca de

The Design-to-Code Assistant bridges the gap between design and development by leveraging Claude’s advanced vision models to analyze visual assets. It extracts precise design tokens—including color palettes, typography scales, and spacing systems—and converts them into high-quality React code with built-in accessibility and responsive layouts. Whether working from high-fidelity Figma exports or hand-drawn sketches, this skill accelerates frontend development by automating the repetitive task of translating visuals into functional components, complete with state-driven Storybook stories and theme variables.

Características Principales

0 GitHub stars
Multi-design analysis to maintain consistency across design systems
Automatic extraction of design tokens including colors, fonts, and spacing
Generation of responsive, accessible React components using modern frameworks
Visual analysis of screenshots, Figma exports, and UI mockups
Automated Storybook story creation for hover, focus, and disabled states

Casos de Uso

Converting legacy website screenshots into modern, modular React codebases
Rapidly prototyping UI components directly from Figma design frames
Extracting reusable design systems and CSS variables from visual brand guides

Acerca de

Características Principales

0 GitHub stars
Multi-design analysis to maintain consistency across design systems
Automatic extraction of design tokens including colors, fonts, and spacing
Generation of responsive, accessible React components using modern frameworks
Visual analysis of screenshots, Figma exports, and UI mockups
Automated Storybook story creation for hover, focus, and disabled states

Casos de Uso

Converting legacy website screenshots into modern, modular React codebases
Rapidly prototyping UI components directly from Figma design frames
Extracting reusable design systems and CSS variables from visual brand guides