Claude Code plugin — autonomous AI agent that builds UIs in a loop. Runs for hours or days, writing code, taking screenshots, evaluating against a design spec, and iterating until the UI is right.
# Add the marketplace
/plugin marketplace add Cheggin/ui-loop
# Install the plugin
/plugin install ui-loopOr test locally during development:
claude --plugin-dir /path/to/ui-loopIn Claude Code, run:
/ui-loop:loop Build a dashboard with real-time analytics
The agent will:
- Clarify — Ask targeted questions about pages, visual direction, data, components, scope, and tech stack
- Plan — Decompose the goal into a prioritized todo DAG
- Build — Work through each todo: read code, edit files, take screenshots, validate, commit
- Loop — Detect plateaus, skip stuck work, re-plan when the queue is empty
Check progress at any time:
/ui-loop:loop-status
ui-loop is a prompt system, not a runtime. It gives Claude Code:
- CLAUDE.md — Design system rules, prohibitions, thinking patterns for 7 agent roles, framework-specific instructions
- /loop skill — The build protocol: clarify → plan → build → validate → commit → loop
- /loop-status skill — Status check against
.ui-loop/todos.md - Session hook — Creates
.ui-loop/directory on startup
All agent state lives in your project as plain markdown:
.ui-loop/todos.md— The todo queue.ui-loop/spec.md— Project brief from Phase 0 clarification.ui-loop/progress.md— Session progress log
The agent adopts different thinking patterns depending on the phase:
| Role | When | Focus |
|---|---|---|
| Orchestrator | Planning, dispatching | Decompose, sequence by dependency, budget awareness |
| Page Planner | Creating todos | Shared-first ordering, verifiable exit conditions |
| Build | Implementing | Read before write, smallest change, visual verification |
| QA | Reviewing | Systematic checklist, zero console errors |
| Auditor | Progress evaluation | Compare built vs requested, actionable recommendations |
| Design Spec | Generating specs | Internal consistency, edge case coverage |
| Inspiration | Analyzing references | Extract the system not the surface |
Built-in heuristics prevent wasted iterations:
- Plateau: < 3% progress for 4 iterations → park todo, move on
- Stuck: < 5% progress for 2 iterations → escalate or skip
- Repetition: Same changes 3x → stop, you're in a loop
- Breadth over depth: Cover all parts of the goal before polishing any one
Next.js (App Router), Vite + React, Remix, SvelteKit, Astro, Nuxt. Default is Next.js + Tailwind v4.
MIT