<aside>
📌
The rule: design owns the core screens, the components and the new moments. Dev builds everything else from the design system. Design reviews what dev built on the preview link within a day. We don't draw every frame.
</aside>
Design draws in hi-fi
- The critical path. Every screen a judge or tester walks. For MVP2: card setup, the reminder email, the in-app notification, "I paid it down", the star, and Home.
- Anything new or emotional. Signature moments: the star burst, safe-to-spend, Penny's chat.
- Components in every state. Default, pressed, disabled, loading, error and empty, for buttons, cards, notices, inputs and chat messages. This is what lets dev fill gaps without a frame.
- Short interaction notes for anything not obvious: motion, how Penny types, what happens when something fails.
Dev builds from the system
- Repeat variants, standard errors, edge cases, long text, and in-between screens that reuse existing components.
- If a screen needs something the system doesn't have, ask design in #cense-private before inventing it.
Design reviews the build
- Every PR gets a Vercel preview link. Design checks it within a day and comments on the PR or in Slack.
- Fixes found in review beat frames drawn in advance: they reflect the real product.
Why this way
|
Draw every frame |
Core frames plus components |
| Design time |
About 3x more |
Spent on what's scored (design is 25% of Demo Day) |
| Staleness |
Frames go stale as code changes |
Components stay true |
| Risk |
Little left to interpretation |
Dev improvises; preview review catches it |
Example: Ask Penny
Design already has chat start, typing, mid-conversation, results, welcome back, answer with source, and out of scope. Still needed from design:
- Penny can't answer (points to a source or a person)
- Daily limit reached
- Error
- The line "Penny explains, it doesn't give financial advice"