How does the skill handle dark mode?

The design system extraction process specifically looks for and documents dark mode variants if they are present in the provided reference images.

Does this skill only work with React projects?

While the built-in workflow is optimized for React and Tailwind CSS, the extracted design systems and generated prompts can be adapted for any frontend framework.

What is a Claude Code Skill?

A Claude Code Skill is a specialized capability that provides domain-specific guidance and implementation patterns to enhance Claude's performance in specific development tasks.

What inputs does the UI Designer skill require?

It requires reference images (screenshots or mockups) and a project idea file to guide the design system extraction and UI generation process.

Can I use multiple screenshots for a single design system?

Yes, the skill is designed to analyze multiple images within a directory to identify consistent patterns in colors, typography, spacing, and component styles.

UI Designer

Name: UI Designer
Author: daymade

bydaymade

•

147

デザインツール

Extracts design systems from reference images and generates implementation-ready UI code for React applications.

概要

This skill streamlines the frontend development process by analyzing visual UI references to extract comprehensive design systems, including color palettes, typography, and component styles. It automates the transition from visual inspiration to a functional MVP by generating structured PRDs and implementation prompts that guide Claude in building consistent, high-fidelity React interfaces using Tailwind CSS and Lucide icons.

主な機能

Automated generation of structured Product Requirement Documents (PRDs)
Creation of multiple UI variations following consistent design principles
Composition of high-fidelity, implementation-ready UI prompts
147 GitHub stars
Visual design system extraction from screenshots and mockups
React and Tailwind CSS environment verification and setup

ユースケース

Building a functional MVP that matches the visual style of existing design references
Standardizing design systems across multiple web pages or mobile views
Rapidly prototyping UI variations from a single product concept and reference images

概要

主な機能

Automated generation of structured Product Requirement Documents (PRDs)
Creation of multiple UI variations following consistent design principles
Composition of high-fidelity, implementation-ready UI prompts
147 GitHub stars
Visual design system extraction from screenshots and mockups
React and Tailwind CSS environment verification and setup

ユースケース

Building a functional MVP that matches the visual style of existing design references
Standardizing design systems across multiple web pages or mobile views
Rapidly prototyping UI variations from a single product concept and reference images