# UI Mockup > Generate HTML/CSS mockups for UI design. Produces browser-previewable mockup files with placeholder data. Use when the user says ui-mockup, mockup, design UI, wireframe, or needs visual reference for a feature. - Skill: `yugasun/ui-mockup` (Agent Skill) - Install (CLI): `npx skillmds@latest add yugasun/ui-mockup` - Raw SKILL.md: https://api.skillmd.com/api/skills/yugasun/ui-mockup/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: yugasun (https://skillmd.com/u/yugasun) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/yugasun/ui-mockup --- # UI Mockup Generate static HTML mockups as visual reference for Builder implementation. ## Output structure ``` .scratch//mockups/ ├── index.html # Entry page linking to all mockups ├── .html # One HTML per page/state └── design-notes.md # Design decisions and interactions ``` ## Mockup rules ### HTML - Self-contained: open directly in browser, no build step - Inline CSS via ` ``` ## index.html Entry page with links to all mockup files: ```html Mockups — [Feature Name]

[Feature Name] Mockups

``` ## Design notes format Write `design-notes.md` with: 1. **Pages** — table of all mockup files and their purpose 2. **Design Decisions** — colors, fonts, spacing rationale 3. **Interactions** — describe hover, click, transitions in words 4. **Responsive** — breakpoint behavior for each page 5. **Components** — table of UI components used and their variants ## Flow 1. Read `.scratch//NOTES.md` and `tech-spec.md` for context 2. Identify pages and states needed 3. Generate `index.html` first 4. Generate each page HTML 5. Write `design-notes.md` 6. Report: list of generated files + open browser command ## Integration with design systems If the target project has a design system: - Use its color tokens as CSS variables - Match its component patterns - Reference its component names in design-notes.md