Academyacademy / vibe-102 / static-layout
Static App Layout
What this is
Static layout is the screen before the app works.
It has the shape of the app, but no add, update, delete, or save behavior yet.
Why it matters
Build the screen before the logic.
If the layout is clear, the next coding steps become easier to test.
What to do
Ask your AI assistant to build only the static layout:
Copy prompt
CONTEXT:
I am building my Vibe 102 mini app.
CURRENT STATE:
The React + Vite + Tailwind project runs on localhost.
TASK:
Build only the static layout.
Include:
- app title
- short subtitle
- input field
- add button
- empty list area
- mobile-friendly container
Rules:
- do not add functionality yet
- do not use localStorage yet
- keep it beginner-friendly
- explain which files changedTest on desktop and mobile width.
Common mistakes
- Adding state before the screen is readable.
- Making the UI too fancy before the app works.
- Letting the input or buttons overflow on mobile.
Vibe 102 / Current checkpoint
Static Layout
Ready to stamp - Saved in this browser only.
0 of 11 checkpoints complete
0 of 11 checkpoints complete.