shichen35

03 Mock — Design skill for Claude Code

Design community

Build a UI mock at doc/mock/ui-mock.html from the requirements and architecture.

How to install 03 Mock

Installs to ~/.claude/skills/shichen35-app-bootstrap-playbook-03-mock/SKILL.md

Terminal

mkdir -p ~/.claude/skills/shichen35-app-bootstrap-playbook-03-mock && curl -fsSL https://raw.githubusercontent.com/shichen35/app-bootstrap-playbook/HEAD/prompts/03-mock.md -o ~/.claude/skills/shichen35-app-bootstrap-playbook-03-mock/SKILL.md

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

What 03 Mock does

Build a UI mock at doc/mock/ui-mock.html from the requirements and architecture:

One file, plain HTML / CSS / JS, no installed dependencies, fixed demo data.
Design language: {{Material 3 Expressive / iOS 26 Liquid Glass}}; encode status with both color and icon.
Lay these out side by side on the canvas: {{phone main list, detail, add (with preview), settings, wide-screen two-pane / three-pane, short window}}.
Cover empty states, error states and Free-tier limit states.
Check the key

Alternatives in Design

Doc — Read, create, and edit .docx documents with formatting and layout fidelity 14.6k ★
Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★
Icm Architect — Claude skill: design any process, idea, or problem into an ICM workspace (folder structure as agent architectu 1.3k ★