Start Here · 05 / 07
Data Shape + Design
Define one item object, then turn your DesignMD inspiration into design.md rules for the app layout, item cards, controls, and mobile view.
Vibe 102 / Current checkpoint
Data + Design
Ready to stamp - Saved in this browser only.
0 of 7 checkpoints complete.
Data Shape + Design
What this is
Data shape means the structure of one item in your app.
In Vibe 102, every app is one list of items. Each item is an object.
Why it matters
A website is mostly built around sections.
A mini app is built around data.
If you know the item shape, you know what the app needs to add, show, update, delete, and save.
What to do
Compare your project brief with the approved app pattern:
| App | Item | Common fields |
|---|---|---|
| Mission Task Tracker | task | text, completed, createdAt |
| Habit Tracker | habit | name, doneToday, streak |
| Expense Tracker | expense | title, amount, category |
| Project Bookmark Manager | bookmark | title, url, favorite |
| Lead Tracker | lead | name, contact, status |
| Study Flashcards | card | question, answer, mastered |
| Mini Journal | entry | title, note, mood |
| Recipe Idea Saver | recipe idea | name, ingredients, tried |
Answer:
What is one item in my app?
What 3 or 4 fields does that item need?
What field changes when the user updates or marks the item?
Can the app work with one list of those items?If AI already created a data shape, check it against this page. Keep it only if it matches one list of items and avoids login, database, API, charts, and extra pages.
Design the app around the item
Your app design is not only colour. It decides how the item is added, shown, updated, deleted, and proven after refresh.
design.md for Vibe 102 must answer:
- What does one item card look like?
- Where does the input form live?
- How does update/mark state appear?
- How is delete shown safely?
- What does the empty state say?
- How does the list stack on mobile?
- What DesignMD inspiration influenced the style?
- What are we not copying from the inspiration?Use Design Direction before you approve the app build blueprint.
Common mistakes
- Designing the screen before knowing the item.
- Adding too many fields.
- Mixing multiple app ideas into one data shape.
- Adding user accounts because the word "data" sounds like database.
- Accepting a data shape with private or sensitive information.