Ui Designer

Takes UI screenshots you like and systematically extracts the design system (colors, typography, spacing, components) into documentation, then combines that with your product idea to generate implementation-ready prompts for building React UIs. The workflow is thorough: analyze images, generate a PRD if you don't have one, compose a final prompt with all the design constraints baked in, then scaffold multiple UI variations as actual components. Honestly most impressive for how it bridges the gap between "I like this design" and "here's working code that matches it." You'll need reference images and a project concept file to start, and it saves everything to a documents folder so you can iterate.

skills.sh installs: 1.7K
GitHub stars: 1.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add daymade/claude-code-skills --skill ui-designer --agent claude-code

Installs into .claude/skills of the current project.

Files

UI Designer

Overview

This skill enables systematic extraction of design systems from reference UI images through a multi-step workflow: analyze visual patterns → generate design system documentation → create PRD → produce implementation-ready UI prompts.

When to Use

User provides UI screenshots, mockups, or design references
Need to extract color palettes, typography, spacing from existing designs
Want to generate design system documentation from visual examples
Building MVP UI that should match reference aesthetics
Creating multiple UI variations following consistent design principles

Workflow

Step 1: Gather Inputs

Request from user:

Reference images directory: Path to folder containing UI screenshots/mockups
Project idea file: Document describing the product concept and goals
Existing PRD (optional): If PRD already exists, skip Step 3