Portable Design Process Kit

Wireframe-first, prototype-first design process kit for JavaScript/TypeScript web and mobile apps.

This folder is an exportable design process for JavaScript/TypeScript products before full UI implementation.

It is intended for:

• Next.js web apps
• Expo React Native mobile apps
• shared product design work across web and mobile
• greenfield products
• brownfield products with existing code and screens

Core principle:

Structure first, wireframe second, prototype third, page contract fourth, implementation last.

Read in this order:

1. 00-workflow-overview.md
2. 07-foundation-stages.md
3. 01-starter-prompt.md
4. Use either:
   • 02-brownfield-audit.md
   • 03-greenfield-discovery.md
5. 04-wireframe-prototype-first.md
6. 05-page-contracts.md
7. 08-visual-direction.md
8. 06-readiness-gates.md

Templates:

• idea-capture.md
• mental-model.md
• information-architecture.md
• project-intake.md
• screen-inventory.md
• wireframe-spec.md
• prototype-brief.md
• page-contract.md
• implementation-handoff.md
• visual-direction.md

Export rule:

• This folder should be copyable into another repo with minimal edits.
• Project-specific screen docs should live outside the kit and use these templates.