Skip to content
UXClaim
Design Ops

Backend Design

Auto-scaffold a matching backend from your frontend by analyzing screens, components, forms, and API calls.

View source More in Design Ops

What it does

Backend Design reads your existing frontend (React, Vue, Next.js, Svelte, Angular, or 9+ other frameworks) and automatically scaffolds a production-ready backend that matches it.

The skill inventories every screen, component, form, button, and network call in parallel, then synthesizes a complete backend design with entities, relationships, endpoints, and auth models — each decision explained and open to your approval before code generation.

How it works

  1. Inventory — Parallel agents scan your frontend, auto-detecting the framework and extracting screens, components, forms, and API calls as structured JSON state
  2. Synthesize — A synthesis agent infers database entities, FK relationships, endpoints, and auth models from the UI; recommends answers to product-intent questions
  3. Validate — Checks invariants: every foreign key resolves, every button has a handler, every entity has a primary key
  4. Detect gaps — Identifies missing environment variables, unwired buttons, incomplete auth flows; writes prescriptive fix instructions
  5. Review & scaffold — Shows you a human-readable design doc; once approved, generates a runnable backend in your chosen stack

Supported stacks

Pick one at setup: Express + Prisma, Fastify + Prisma, Hono + Drizzle, Next.js API routes, FastAPI + SQLAlchemy, or schema-only (Mermaid).

Use cases

  • Ship a full-stack app without context-switching between frontend and backend codebases
  • Enforce API contract consistency — the backend is always wired to what the UI actually calls
  • Onboard new backends to existing frontends without reverse-engineering
  • Detect orphan buttons and unwired forms before they reach production

Frequently asked questions

How do I install backend-design?
Run `npm i -g backend-design && backend-design install`, or clone the repo and run `node bin/backend-design.mjs install`. Either creates a symlink in `~/.claude/skills/`. Then restart Claude Code.
What frontends does backend-design support?
Next.js (App/Pages Router), React (Vite/CRA), Vue, Nuxt 3, Svelte/SvelteKit, Angular 17+, Astro, SolidJS, Qwik, Remix, Gatsby, HTMX, and vanilla HTML+JS. Framework detection is automatic via `package.json` and key files.
What backend stacks can it generate?
Express + Prisma + Postgres, Fastify + Prisma + Postgres, Hono + Drizzle + Postgres, Next.js API routes + Prisma, FastAPI + SQLAlchemy + Postgres, or schema-only (Mermaid). All support JWT auth and bcrypt hashing.
How does backend-design know what APIs to create?
It scans your frontend for data fetches, form submissions, and button handlers, then infers endpoints and entities from the UI. A synthesis agent proposes the schema and endpoints; you review and approve before code gen.
Can I re-run backend-design after my frontend changes?
Yes. Phase 0 checks if the frontend signature changed; if so, it re-runs inventory and synthesis. If the design is already approved, it jumps straight to re-scaffolding. Run `npx backend-design status` to see progress.
What is vibe-coder mode?
Opt-in mode that scaffolds stub endpoints for orphan UI signals (buttons with no handler). Stubs return 501 errors in dev. Default is strict mode: orphan buttons are flagged in next-steps as wire-up work, not invented.
What files does backend-design create?
`backend-design.md` (design doc), `backend-design-next-steps.md` (action checklist), `backend-design.env.example` (env template), and `.backend-design/` (state JSON). The generated backend goes in your output directory (e.g., `backend/`).
Can I customize the generated backend after scaffolding?
Yes, it's your code. The skill scaffolds a starting point; you own the git repo. Each state file includes evidence (file:line) linking decisions back to the UI so you can trace why any design choice was made.

Glossary

Inventory
Phase 1 of backend-design: parallel agents scan the frontend to extract screens, components, forms, data fetches, and buttons as structured JSON state.
Synthesis
Phase 2: a Claude agent infers database entities, relationships, endpoints, and auth models from the inventory, proposes answers to product questions, and validates the design against invariants.
Gap detection
Phase 2.5: identifies missing environment variables, unwired buttons, incomplete auth flows, and other blockers; writes prescriptive fix instructions in `backend-design-next-steps.md`.
Frontend signature
Hash of the frontend codebase (git HEAD + dirty files, or content hash). Compared at start to decide whether to re-run inventory or skip to a later phase.
Vibe-coder mode
Optional flag: when enabled, scaffolds 501 stub endpoints for orphan UI signals (buttons, forms with no backend handler). Default is strict mode (no invention).

More in Design Ops

All →
Design Ops

AI Code Refactoring

Disciplined 5-phase workflow for refactoring AI-generated code with safety nets, design systems, and tests.

chake111
Design Ops

Goal Workflow Designer

Interrogates you until your /goal prompt is precise enough to work, using a five-element framework and rubric SOP.

dragon375014
Design Ops

Claude Code Design AI

AI-powered tool that converts design screenshots and wireframes into production-ready React components with Tailwind CSS styling.

Corn7012
Design Ops

Claude Codex Handoff

Three-phase workflow (plan→implement→review) pairing Claude Code specs with Codex implementation and independent adversarial review for complex code changes.