PD Phase 3: Prototype¶
Generate a deployable Angular prototype following VisiTrans Corporate Design, designed for 95% code reuse.
Command: /vt-c-pd-3-prototype [--feature NAME | --deploy]
When to use¶
After the PRD is complete and approved. The prototype serves as both a stakeholder demo and a development handoff artifact -- components are built to production patterns so developers can reuse them directly.
What happens¶
- PRD analysis -- Reads the PRD to identify features, user flows, and required screens from Section 4 (Feature table).
- Project scaffolding -- Creates an Angular 21 + PrimeNG project in
04-prototyp/with VisiTrans Corporate Design tokens pre-configured (colors, typography, brand palette) via PrimeNG preset. - Component generation -- Builds reusable Angular standalone components (button, card, input, navigation) wrapping PrimeNG, then generates feature-specific screens with mock data.
- PRD delta tracking -- Throughout prototyping, any user-provided requirement
changes are logged to
03-PRD/PRD-DELTA.mdfor later incorporation. - Deployment (
--deploy) -- Builds production version and deploys to a preview URL for stakeholder sharing.
VisiTrans design tokens¶
| Token | Value |
|---|---|
| Primary orange | #FC9E00 |
| Black | #1F1F1F |
| Action magenta | #E6007E |
| Font | Inter |
Output¶
- Complete Angular 21 prototype in
04-prototyp/ - PrimeNG preset with VisiTrans CD tokens
- Feature screens with responsive layouts (PrimeFlex grid)
- Mock data fixtures matching API contracts
- PRD delta log (
03-PRD/PRD-DELTA.md) if changes were discovered
Quality gate¶
- VisiTrans CD tokens correctly applied
- All PRD features have screens
- Responsive layouts work at mobile, tablet, and desktop
- Prototype deployed and accessible