Agent skill · design visual · daymade
ui-designer
Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.
Why this skill is useful
Adds a multi-step workflow for extracting design systems and generating implementation-ready UI prompts that aren't available in public documentation.
What it needs
Requires npm, npx installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 1,320 stars on the source repository.
What this skill does
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 Step 2: Extract Design System from Images Use Task tool with general-purpose subagent, providing: Prompt template from assets/design-system.md: Analyze color palettes (primary, secondary, accent, functional colors) Extract typography (font families, sizes, weights, line heights) Identify component styles (buttons, cards, inputs, icons) Document spacing system Note animations/transitions patterns Include dark mode variants if present Attach reference images to the subagent context. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daymade/ui-designer