UI Designer
Extract design systems from reference UI images and generate implementation-ready design prompts — turn a screenshot into a consistent system you can build against.
A reference screenshot inspires you but doesn't tell you the colors, spacing, or type scale to reproduce it. This playbook reverse-engineers the design system and outputs build-ready prompts.
Who it's for: designers, frontend developers, founders, indie hackers
Example
"Build a design system from this app screenshot" → An extracted design system (colors, type, spacing) plus implementation-ready UI prompts
CLAUDE.md Template
New here? 3-minute setup guide → | Already set up? Copy the template below.
npx ccplaybooks add ui-designer# 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 aestheticsGet new playbooks like this one
One email a week with new Claude Code workflows. Free, like everything here.
No spam. Unsubscribe anytime.
What This Does
Extract design systems from reference UI images and generate implementation-ready design prompts — turn a screenshot into a consistent system you can build against.
What's Inside
The template covers:
- When to Use
- Workflow
- Template Assets
- Best Practices
- Example Usage
- Notes
Quick Start
Step 1: Create a Project Folder
Make a dedicated folder for this workflow and open it in Claude Code.
Step 2: Download the Template
Click Download above to save the template, then drop it into your project as CLAUDE.md (or paste it into your existing one).
Step 3: Start Working
Tell Claude what you need in plain language — it will follow the template's workflow automatically. For example:
Build a design system from this app screenshot
Claude reads the template and runs the steps for you.