ui-designer

An agent skill by daymade, from daymade/claude-code-skills. Tags: assets, design, prototyping, ui-ux, visual-art.

What it does

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.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

npx skills add daymade/claude-code-skills --skill ui-designer

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/daymade/claude-code-skills
cp -r claude-code-skills/ui-designer ~/.claude/skills/ui-designer

Safety box score

Grade C, moderate risk: 33 of 100 risk points, rated 2026-09-25. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This skill analyzes UI reference images, generates design-system/PRD/prompt documents, and can scaffold a React UI with npm/npx. The main risks are prompt-injection text embedded in the templates and the fact that the workflow fetches and runs package tooling while writing files in the project.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	2 (moderate)	The workflow explicitly runs shell commands like `npx create-react-app my-app` and `npx tailwindcss init -p`, which executes external tooling during setup.
Network access	2 (moderate)	Those same `npx`/`npm install` steps fetch packages from the npm registry, so the skill reaches out to remote package hosts.
Filesystem reach	1 (low)	It saves outputs under `documents/designs/`, `documents/prd/`, and `documents/ux-design/`, and the template says to hook output into `index.html` and `App.js`, but it stays within the workspace.
Secrets & credentials	0 (none)	The files do not request API keys, passwords, browser sessions, `.env` files, or other credential stores.
Privilege & persistence	0 (none)	There is no sudo, service registration, global install, or shell/OS configuration change required by the skill.
Instruction hijack surface	3 (high)	`assets/design-system.md` tells the agent to wrap its entire thinking process in `<pondering>` tags, which is direct prompt-injection pressure to reveal chain-of-thought and follow template text over higher-priority rules.
Irreversible actions	0 (none)	The skill does not push, deploy, publish, pay, book, message, or delete anything outside local project file edits.
Transparency	0 (none)	All shipped files are plain markdown templates; there are no binaries, base64 blobs, or hidden runtime payloads.

Before installing

Read `assets/design-system.md` first; it contains prompt-injection text about revealing the model’s thinking.
Run the workflow in a scratch repo or branch if you do not want `index.html`, `App.js`, or `documents/` files changed.
If you want to avoid npm downloads, preinstall dependencies yourself and skip the `npx`/`npm install` steps.

Rated 2026-09-25 by an automated review of 4 files from the skill's repository.

Source

Repository: daymade/claude-code-skills (all skills from this repository)
Path: ui-designer/SKILL.md
Branch: main
Updated: 2026-09-20

prototype — Build multiple genuinely different versions of a UI piece you describe.
principle-exhaust-the-design-space — Apply when facing a novel UI interaction or architectural decision with no precedent in the codebase.
design-style-picker — Batch-generate and compare visual design directions so a user can choose the style they actually want.
excalidraw-use — Place existing images onto an Excalidraw whiteboard, turn a slide deck into clean per-slide images first.
interaction-design-board — Generate several genuinely different, runnable HTML interaction prototypes for one product surface, combine them in an interactive Design Board.
prototype — Build a throwaway prototype to answer a design question.