ui-designer

Community

Turn reference UI images into ready-to-implement prompts.

Authordaymade
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill extracts design systems from reference UI images and translates them into implementation-ready UI prompts, enabling consistent design systems, PRDs, and MVP UI variations aligned with reference aesthetics.

Core Features & Use Cases

  • Extract color palettes, typography, spacing, and component styles from reference images
  • Generate design system documentation and a PRD for UI projects
  • Create implementation-ready UI prompts (themes, variants, components)
  • Produce multiple design方案s (mobile and web) and assemble into a final UX prompt

Quick Start

  • Gather inputs: reference images and project idea(PRD)
  • Generate design system with Task tool and templates
  • Create MVP UI prompts and verify in a React environment

Dependency Matrix

Required Modules

None required

Components

scriptsreferencesassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ui-designer
Download link: https://github.com/daymade/claude-code-skills/archive/main.zip#ui-designer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository