Design Explorer — Design skill for Claude Code

Design Explorer

A [Claude Code skill](https://code.claude.com/docs/en/skills) for iterative design exploration. Generate diverse HTML mockups, review them in a full-screen carousel, and give structured feedback with keyboard shortcuts.

How it works

1. You describe what you want designed (a landing page, a dashboard, a component)
2. Claude registers a workspace with the global singleton server (starts it if needed)
3. Claude writes down fixed constraints and variation axes, then generates 5 mockups (3–4 when converging) as separate files
4. A local server serves them in a full-screen carousel with live updates
5. You review with keyboard shortcuts: arrow keys to navigate, ↑/↓ to vote, notes, optional voice
6. Press C to submit feedback — it's written to feedback-round-N.md and Claude, waiting on that file, picks it up automatically
7. Claude iterates — editing liked mockups, removing disliked ones, adding new variants
8. Repeat until you're happy

**Global singleton**: One server on `127.0.0.1:10000` serves all projects. Each exploration uses its own mockup directory (`/tmp/claude/design-explorer/mockups/--`) and gets its own tab in the browser UI, so two sessions in the same repo never clobber each other.

**Feedback-driven sessions**: All mockups written before you submit feedback belong to one round. When you press `C` (submit), the session closes — any new mockups from Claude's next iteration automatically start a new round. No manual session management needed.

**Auto-focus**: The browser automatically switches to the workspace and session with the most recent file additions.

**Feedback file**: When you submit feedback, it's written to `{mockupDir}/feedback-round-N.md` (one file per round, each heading naming the mockup file) AND copied to clipboard. Claude waits for the file — no need to paste.

Install

# Clone into your Claude Code skills directory
git clone https://github.com/houshuang/design-explorer.git ~/.claude/