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

0•

デザインツール

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

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.

主な機能

010 GitHub stars

02Multi-design analysis to maintain consistency across design systems

03Automatic extraction of design tokens including colors, fonts, and spacing

04Generation of responsive, accessible React components using modern frameworks

05Visual analysis of screenshots, Figma exports, and UI mockups

06Automated Storybook story creation for hover, focus, and disabled states

ユースケース

01Converting legacy website screenshots into modern, modular React codebases

02Rapidly prototyping UI components directly from Figma design frames

03Extracting reusable design systems and CSS variables from visual brand guides

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flight505/storybook-assistant design-to-code

For use in Claude.ai and ChatGPT

Download Skill