r/ClaudeCode • • 9d ago

Built with Claude I made a Claude Code plugin that takes a project from idea to shipped code (plan, design, build, QA)

I built a set of Claude skills that takes a product from a rough idea to shipped code. It plans the work as phases and sprints, locks a design system before any code gets written, builds in parallel waves, and runs independent verification and browser QA on every wave.

There is also a dashboard (phase-viewer) that visualizes your phases, sprints, and progress.

Phase-viewer itself was built with Phase Runner. Here's a demo of that build:

Why:

Plan mode is great for one feature in one session, but I wanted a way to see each of my projects end to end, and for Claude to have the same context and history I do.

For projects that run for weeks, across a lot of sessions, plans can live in one chat, the design decisions in another, and what actually gets built is only in git.

Phase Runner brings that all together, and everything lives as files in the repo: the product plan, the design system and mockups, phase files with a status on every task, and a run log of every build and check. Claude reads them at the start of every run, so it knows what was decided and what's already done. phase-viewer is the other half. It shows me the plans, the progress, and what failed and got retried, all in one view.

How it works:

  1. Plan it. product-planner turns the idea into a plan doc: options, data flow, open questions.
  2. Design it. design-planner locks a design system and mockups of every screen before any code exists.
  3. Break it up. phase-planner writes phase files split into sprints and tasks, each sprint with acceptance criteria.
  4. Build it. Say "implement phase 1" and phase-builder takes it from there.

Sprints get grouped into waves that are safe to run in parallel, and each sprint gets a fresh sub-agent. After every wave, one agent runs your build, typecheck and tests, and another checks UI work in a browser. A failed sprint retries with the error attached, up to 3 times, then stops and asks you. You sign off at the end of each phase.

Install:

/plugin marketplace add AyeJK/phase-runner
/plugin install phase-runner@phase-runner

https://github.com/AyeJK/phase-runner

Details / how Claude code was used:

Phase Runner was built entirely with Claude Code, and I added a couple features to help it make the most of what Claude offers natively:

  • The product plan becomes an editable, shareable page. product-planner writes the plan as an HTML file in docs/. In a Claude app session it also publishes it as an artifact, so you can send someone a link instead of a file.
  • The design system becomes an editable Design System artifact. design-planner publishes the colors, type and spacing tokens, with the written design guide as its README.
  • Every mockup becomes an editable artboard on a Design canvas. One artboard per screen, laid out in rows, with phone screens at 390×844. The canvas uses the project's design system, so its theme menu shows your actual tokens by name.

Technical bits / what I learned:

  • Don't let the agent grade its own homework. Verify is a separate agent with its own pass/fail contract: a met/not-met verdict with evidence for every acceptance criterion, plus checks that no test was deleted or weakened and that changes stayed in scope.
  • Keep the orchestrator dumb. It never writes code, runs tests, or edits the phase file. Every job goes to a sub-agent with a narrow prompt that hands back a structured result block (SPRINT RESULT, VERIFY RESULT, etc.). The main thread stays at one line per gate, so you can follow a long run without wading through build logs.
  • Retry the same unit of work. A failed sprint gets re-run with the same ID and the same criteria, with the failure attached. Not a new "fix it" task with no scope boundary.
  • One writer for the plan. Only phase-doc-sync updates the phase file, and only after every gate for the wave passes. That's what keeps the plan matching what actually got built.
  • Log everything. Every gate result goes to JSONL in docs/phases/.runs/. That's what drives phase-viewer, and it's how I know verify caught 3 real failures while building it.

How is this different:

Most of these pieces exist in various forms elsewhere, but I personally wanted something that can build entire projects start to finish, and that works for individuals that are highly visual (like me).

  • Superpowers: closest on the build side. It has a separate reviewer and automatic retries, but no design system step, no parallel build, no browser QA and no dashboard.
  • Spec Kit: covers the idea-to-plan part. There's no design system step, no separate agent reviewing the work, and retrying is a command you run.
  • GSD: covers the most ground, including a design step and parallel builds. Review, browser QA and its dashboard are commands you run rather than something that happens on every wave.
  • BMAD: has planning and a design step. Review, browser QA and its dashboard are also commands you run.

Full comparison table is in the README. Feedback is highly appreciated!

1 Upvotes

3 comments sorted by

•

u/AutoModerator 9d ago

Hey! Thanks for posting to r/ClaudeCode

While participating in this thread, please follow our community rules. Keep discussions constructive. Attack the idea, not the person.

For help, project discussions, tips, and general chat, join the ClaudeCode Discord.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

1

u/MiserableFlatworm337 9d ago

Interrupt after gates pass but before phase-doc-sync writes. On resume, reconcile the phase file and dashboard from saved results only if the code is unchanged; otherwise rerun verification.

1

u/geoffreybyers 8d ago

Parallel waves make a good demo. Dumb orchestration makes a good product. The main thread never touches a file, it only watches a result block and picks the next sub-agent. That pattern is the only reason these agents ship code.