Skills
.Work. You
Rest

design-system-from-reference

Community

Codify a design system from any UI screenshot.

Design & Creative#React#frontend#UI/UX#design system#style guide#visual design#component library#Tailwind CSS
Authordundas
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill solves the challenge of establishing a consistent visual style and design system for a project from scratch, or translating an existing visual reference into actionable, codified design rules. It automates the tedious process of design system creation.

Core Features & Use Cases

  • Visual Style Extraction: Analyzes a reference UI screenshot to identify core design elements like colors, typography, and spacing.
  • High-Level Style Guide: Generates design/design.json for overarching design principles and brand essence.
  • Showcase Application: Builds a React + Vite + Tailwind app to visually demonstrate and refine core components.
  • Codified Design System: Produces design/design-system.json as the implementation-level source of truth for future development.
  • Use Case: You have a beautiful Dribbble shot of a dashboard and want to adopt its style for your new project. Use this skill to automatically extract its design language, build a showcase, and generate a full design system JSON for consistent future development.

Quick Start

Create a design system for my project based on the attached screenshot of a modern analytics dashboard.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-system-from-reference
Download link: https://github.com/dundas/liveport/archive/main.zip#design-system-from-reference

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository