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

0•

Herramientas de Diseño

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.

Características Principales

01Ensures cross-session UI consistency for AI-assisted development

02Automated visual analysis of UI screenshots using vision models

03Scaffolds functional React + Vite + Tailwind showcase apps

04Codifies component recipes into design/design-system.json

050 GitHub stars

06Generates structured design/design.json style guides

Casos de Uso

01Bootstrapping a new project's visual identity from a Dribbble or Figma reference

02Creating a machine-readable source of truth for AI agents to follow during UI expansion

03Bridging the gap between static design mockups and functional Tailwind component libraries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dundas/liveport design-system-from-reference

For use in Claude.ai and ChatGPT

Download Skill