How do future Claude Code sessions use the design system?

Once the design-system.json and design.json files are created, future sessions will automatically load them into context to ensure all new UI matches the established style.

Will the skill run commands on my machine automatically?

No, the skill is programmed to always confirm with the user before installing dependencies or running long-lived development servers.

Does this skill work with any tech stack?

This specific skill is optimized for projects using React, Vite, and Tailwind CSS v3, as it builds a showcase app using these tools.

What kind of screenshots work best with this skill?

Flat, high-quality design-system-style screenshots (like those found on Dribbble or Pinterest) that include multiple UI components like buttons, inputs, and cards work best.

Where are the design files stored?

All generated files, including the style guide and the showcase application, are stored within a /design folder at the root of your repository.

Design System Architect

Name: Design System Architect
Author: dundas

bydundas

•

Design Tools

Extracts visual styles from reference screenshots to generate production-ready design tokens and interactive React showcase applications.

This skill automates the transition from visual inspiration to a functional design system by analyzing UI screenshots and codifying them into structured JSON files. It guides Claude through a structured four-phase workflow: visual analysis, high-level style guide generation, building a live React + Tailwind showcase app, and final implementation-level tokenization. This ensures that every component built by AI or human developers remains visually consistent and adheres to a centralized source of truth for branding, typography, and layout.

Key Features

01Automated generation of high-level design guidelines in JSON format

02Step-by-step interactive refinement of component styles and UI patterns

03Scaffolding of a React, Vite, and Tailwind CSS showcase application

04Vision-model analysis of UI/UX screenshots to identify brand essence

051 GitHub stars

06Creation of implementation-level design tokens for future AI-assisted coding

Use Cases

01Codifying visual requirements into a format that AI agents can follow consistently

02Establishing a standardized design system at the start of a new frontend project

03Transforming a Dribbble or Figma screenshot into a functional Tailwind theme

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dundas/teleportation-cli design-system-from-reference

For use in Claude.ai and ChatGPT

Download Skill