ui-designer SKILL.md skillA

This file is byte-identical to the first copy the registry indexed. Same content hash, so the same checks give both the same grade.

ui-designer from daymade/claude-code-skills is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

mdr add daymade/claude-code-skills/ui-designer@git:20251025.1661f91

Pins git:20251025.1661f91 in mdr.lock. Pin the fingerprint instead.

Audit grade

A, 17 of 17 checks passed

Kind

SKILL.md skill

Repository

daymade/claude-code-skills

Path

ui-designer/SKILL.md

Versions recorded

1

Latest version

git:20251025.1661f91, committed Oct 25, 2025

Size

6,923 bytes

Repository stars

1,485

License

MIT

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.

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

# 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)
…

Read the whole file at its exact version.

How to install

mdr add daymade/claude-code-skills/ui-designer@sha256:f6a8eb5e20c9c291

[![mdr](https://markdownregistry.com/badge/art_23qxxoxraslsvr5t.svg)](https://markdownregistry.com/a/art_23qxxoxraslsvr5t)

Versions

The registry has recorded 1 version of this file, committed on Oct 25, 2025.

Audit of the latest version

Source

API

GET https://markdownregistry.com/api/v1/artifacts/art_23qxxoxraslsvr5t
GET https://markdownregistry.com/api/v1/resolve?ref=daymade/claude-code-skills/ui-designer
GET https://markdownregistry.com/api/v1/blob/f6a8eb5e20c9c291546eed3e106d2272ad36d08564f45fbedfbfc21a25a3609b

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

More from daymade/claude-code-skills

Every file in daymade/claude-code-skills

Other files named ui-designer

Browse by kind, by grade A, or by owner.