How does this skill improve future AI coding tasks?

It generates a design-system.json file that acts as a permanent reference, allowing Claude to match your specific style in all future UI modifications.

Does this skill work with any CSS framework?

This skill is specifically optimized for React + Vite projects utilizing Tailwind CSS version 3 for component implementation.

What inputs are required for this skill?

You need to provide a flat, high-quality screenshot of a UI or design system and have a project environment capable of running Node.js.

Can I use multiple screenshots?

Yes, you can provide multiple reference images during the visual analysis phase to give the AI a broader understanding of your desired design system.

Will it modify my project files automatically?

The skill proposes changes and will always ask for your explicit confirmation before installing dependencies, running servers, or writing files.

Design System from Reference

Name: Design System from Reference
Author: dundas

bydundas

디자인 도구

Transforms UI screenshots into comprehensive, production-ready React and Tailwind design systems for consistent AI development.

소개

This skill automates the transition from visual inspiration to implementation by analyzing UI screenshots and codifying their style into a structured design system. It guides users through a four-phase workflow: visual analysis, high-level style guide generation, scaffolding a React/Tailwind showcase application, and final codification into a machine-readable JSON format. By establishing a 'source of truth' for design tokens and component recipes, it ensures that all future UI generated by Claude Code remains visually consistent and brand-aligned.

주요 기능

Ensures cross-session UI consistency for AI-assisted development
Automated visual analysis of UI screenshots using vision models
Scaffolds functional React + Vite + Tailwind showcase apps
Codifies component recipes into design/design-system.json
0 GitHub stars
Generates structured design/design.json style guides

사용 사례

Bootstrapping a new project's visual identity from a Dribbble or Figma reference
Creating a machine-readable source of truth for AI agents to follow during UI expansion
Bridging the gap between static design mockups and functional Tailwind component libraries

소개

주요 기능

Ensures cross-session UI consistency for AI-assisted development
Automated visual analysis of UI screenshots using vision models
Scaffolds functional React + Vite + Tailwind showcase apps
Codifies component recipes into design/design-system.json
0 GitHub stars
Generates structured design/design.json style guides

사용 사례

Bootstrapping a new project's visual identity from a Dribbble or Figma reference
Creating a machine-readable source of truth for AI agents to follow during UI expansion
Bridging the gap between static design mockups and functional Tailwind component libraries