Mula Di Sini · 05 / 07
Data Shape + Design
Tetapkan satu item object, kemudian tukar DesignMD inspiration anda menjadi design.md rules untuk app layout, item cards, controls, dan mobile view.
Vibe 102 / Checkpoint sekarang
Data + Design
Sedia untuk stamp - Disimpan dalam browser ini sahaja.
0 daripada 7 checkpoints complete.
Data Shape + Design
Apa ini
Data shape maksudnya struktur satu item dalam app anda.
Dalam Vibe 102, setiap app ialah satu list item. Setiap item ialah object.
Kenapa penting
Website kebanyakannya dibina around sections.
Mini app dibina around data.
Kalau anda tahu item shape, anda tahu app perlu add, show, update, delete, dan save apa.
Apa nak buat
Bandingkan project brief anda dengan 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 |
Jawab:
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?Kalau AI sudah create data shape, semak dengan page ini. Simpan hanya jika ia match satu list item dan elak login, database, API, charts, dan extra pages.
Reka app di sekeliling item
Design app anda bukan hanya warna. Ia menentukan bagaimana item ditambah, ditunjuk, diupdate, dipadam, dan dibuktikan selepas refresh.
design.md untuk Vibe 102 mesti jawab:
- 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?Guna Design Direction sebelum anda approve app build blueprint.
Common mistakes
- Design screen sebelum tahu item.
- Tambah terlalu banyak fields.
- Campur beberapa idea app dalam satu data shape.
- Tambah user accounts sebab perkataan "data" bunyi macam database.
- Terima data shape yang simpan private atau sensitive information.