LiamMorganDev

UI Proto — Design skill for Claude Code

Design community

Prototype a UI/UX change as an Artifact with 2+ options before touching component code.

How to install UI Proto

Installs to ~/.claude/skills/liammorgandev-claude-setup-ui-proto/SKILL.md

Terminal

mkdir -p ~/.claude/skills/liammorgandev-claude-setup-ui-proto && curl -fsSL https://raw.githubusercontent.com/LiamMorganDev/claude-setup/HEAD/commands/ui-proto.md -o ~/.claude/skills/liammorgandev-claude-setup-ui-proto/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What UI Proto does

description: Prototype a UI/UX change as an Artifact with 2+ options before touching component code argument-hint:

Prototype this UI change: $ARGUMENTS

Get oriented first: if in a repo, skim the relevant existing components, styles/tokens and docs/ so the mock matches the real app (colors, spacing, fonts, components). Then invoke the ui-ux-pro-max skill for style/palette/typography/UX guidance on each option.
Build one interactive Artifact with **

Alternatives in Design

Theme Factory — Style artifacts with professional themes including 10 pre-set color/font combinations 94.1k ★
Part 3 — Technical Design Document Generator — I'll help you create a Technical Design Document for your MVP 2.1k ★
Deepen — Spare-budget design pass 1.1k ★