Prompts

Prototype-from-PRD scaffolder

Scaffold a working reference implementation from a PRD

DesignDigitalClaude Code

Output: Scaffolded, PRIZM-conformant reference code that implements the user stories in the PRD. Runs as an interactive prototype users can walk through.

Run with Claude Code

Open this prompt inside a Claude Code workspace with access to your prototype repo.

I want to scaffold a working reference implementation from the PRD below — real code, running as an interactive prototype users can walk through, that DevSecOps can pick up in parallel.

Stack:
- Next.js + TypeScript + Tailwind v4
- PRIZM C3 (read PRIZM.md and llms.txt at
  https://github.com/prizm-design/prizm before generating)
- Semantic tokens only — never raw colour utilities

For each user story / job-to-be-done in the PRD:
- Scaffold the minimal screens / flows needed
- Compose PRIZM primitives where they exist
- Don't fabricate components; if you need a primitive
  that doesn't exist in PRIZM, tell me

Before writing any code:
- Read the PRD and identify the 3-5 critical user flows
- Confirm with me which to scaffold first
- Don't try to scaffold everything in one pass

INPUTS:

PRD:
{{PRD}}

Design intent (if any):
{{DESIGN_INTENT}}

Where the output goes

A working scaffold in your repo. The running scaffold is the prototype teams put in front of users; the source is the reference code DevSecOps picks up — push to a branch so their technical assessment runs in parallel with the next Design iteration.

Inputs you'll fill in

{{PRD}}
The PRD you're building from, in any of these forms:
  • Output of PRD generator, reviewed and refined by hand
  • A PRD authored by hand, pasted as markdown
  • A PRD exported from another system
{{DESIGN_INTENT}}optional
Any visual or interaction direction you want to anchor on. Plain text.
  • calm and information-dense
  • fast and keyboard-first

Use this prompt with Claude Code to scaffold working reference code from a finalised PRD — the same running scaffold serves as the interactive prototype for the next Test pass.

Tips

  • The "before writing any code, confirm" step is what prevents Claude Code from generating 500 lines of irrelevant scaffolding. Don't skip it.
  • The output is reference code, not production code. Treat it as the starting point for the team's iteration, and let DevSecOps act on it in parallel.
  • If Claude Code starts inventing PRIZM components that don't exist, stop and tell it to check lib/components-registry.ts in the PRIZM repo before generating.
  • The scaffolded prototype is the thing the next Test phase puts in front of users — pair it with the test-plan generator, which reads the PRD to draft the plan, then close the loop with usability sessions and DASH surveys.

Where this fits in the chain

Use after

These prompts produce outputs you can paste as inputs here.