skills.rest
dundas
dundasCOMMUNITY
Explore all skills by this author →
Website𝕏@dundasGitHub

design-system-from-reference

Extract visual styles from UI screenshots into design system JSON files.

Updated Nov 28, 2025
Search Tags:#React#frontend#UI/UX#design system#style guide#visual design#component library#Tailwind CSS
One-click install
npx skills add https://github.com/dundas/liveport --skill design-system-from-reference
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-from-reference
Source: https://github.com/dundas/liveport/tree/main/.claude/skills/design-system-from-reference
Command: npx skills add https://github.com/dundas/liveport --skill design-system-from-reference

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about design-system-from-reference

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design system from a UI screenshot?▼

Extract visual style from a reference UI screenshot to codify a reusable design system. The Skill analyzes colors, typography, and spacing from your screenshot, then generates design/design.json as a high-level style guide and design/design-system.json as implementation-level rules for consistent component development.

Can I build a design system with React and Tailwind CSS?▼

Yes. This Skill scaffolds a React + Vite + Tailwind 3 showcase application that demonstrates and refines core components based on your extracted design language, letting you validate the design system before applying it across your project.

What do I need before using a design system extraction tool?▼

Provide a flat, high-quality reference screenshot of a UI you want to replicate. The Skill requires this visual reference to extract design elements and codify them into actionable design rules and JSON configuration files.

How does design system extraction differ from manual style guide creation?▼

Extraction automates the analysis of visual references to identify and codify design rules, eliminating tedious manual documentation. It produces structured JSON outputs and a working showcase app, accelerating the translation of design mockups into implementable systems.

What are the limitations of generating a design system from a single screenshot?▼

Extraction works best with flat, high-quality screenshots showing clear design intent. Complex interactions, responsive behavior across breakpoints, or subtle state variations may require manual refinement after the initial system generation and user-approval checkpoints.

Related Skills

Explore More Design & Creative Skills→
ramiro-qqramiro-qq

design-to-code

Convert Figma, screenshot, and Pencil prototypes into React/Tailwind/TypeScript code.

Community
Advanced
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate
silaslopes100silaslopes100

reversa-design-system

Extract design tokens from CSS, Tailwind, and UI library configurations.

Community
Intermediate
johnlindquistjohnlindquist
24

figma

Extract design tokens, components, and styles from Figma files.

Community
Intermediate