Design Spec

Apa ini

Design spec ialah file pendek yang describe macam mana website kamu patut nampak dan rasa.

Kamu cipta ia dengan berbual ringkas dengan ChatGPT, lepas tu simpan output sebagai design-spec.md dalam project folder kamu — bersebelahan dengan project-brief.md.

Kenapa penting

Bila kamu mula bina dalam IDE, AI agent kamu baca kedua-dua files.

Tanpa design spec, AI agent pilih warna, fonts, dan layout styles sendiri. Hasilnya biasanya generic. Dengan design spec, AI agent ada visual direction yang jelas untuk diikuti dari prompt pertama.

Langkah ni ambil 5 minit. Ia jimatkan banyak back-and-forth kemudian.

Apa nak buat

Langkah 1 — Guna design spec coach prompt

Buka ChatGPT. Paste prompt ni dan isi details project kamu:

I am building a website. Here is my project brief:

[paste your project-brief.md content here]

Help me turn this into a better visual direction before you write the final design spec.

First, ask me 3-5 short questions about:
- the audience
- the feeling the site should create
- any color or style I already like
- anything the site should avoid looking like

After I answer, suggest 2-3 simple improvements that would make the site feel less generic.

Then create the final design spec in this format:

# Design Spec

Include only these sections:
1. Mood — 3-5 words describing the feeling
2. Audience feel — what the visitor should feel in one sentence
3. Colors — primary color, background color, and one accent color with hex codes
4. Typography feel — 1-2 short phrases
5. Layout direction — how the pages should be arranged
6. Component style — how buttons, cards, and sections should feel
7. Images or icons — what kind of visuals to use or avoid

Keep the final spec short enough for a beginner to use. Do not create a full brand book.

Langkah 2 — Jawab dan refine

Jawab soalan-soalan ChatGPT dengan simple. Lepas tu baca cadangannya.

Tanya diri sendiri:

• Adakah color mood sepadan dengan perasaan site yang saya bayangkan?
• Adakah primary color rasa sesuai untuk audience?
• Adakah layout style masuk akal untuk pages yang saya plan?
• Adakah ChatGPT cadangkan sesuatu yang buat site lebih jelas atau lebih memorable?

Kalau sesuatu rasa tak kena, beritahu ChatGPT untuk adjust:

Adjust the design direction toward [your preference].
Keep it beginner-friendly and do not add complex animations or advanced UI patterns.

Kalau final spec jadi terlalu panjang, guna ini:

Shorten this design spec. Keep the same sections, but make each section 1-2 lines.

Langkah 3 — Simpan design spec

Copy output akhir. Buat file baru dalam project folder kamu bernama:

design-spec.md

Paste design spec ke dalam file tu dan save.

Project folder kamu patut ada dua reference files sekarang:

project-brief.md
design-spec.md

Contoh design spec yang bagus

# Design Spec

## Mood
Warm, local, relaxed, easy to read

## Audience feel
Visitors should feel like the cafe is friendly, nearby, and easy to visit.

## Colors
- Primary: #D97706 (warm amber)
- Background: #FFFBF5 (warm off-white)
- Accent: #166534 (deep green for small highlights)

## Typography feel
Rounded, readable, not too formal

## Layout direction
Mobile-first pages with clear sections, generous spacing, and the menu easy to scan.

## Component style
Soft cards for menu items, clear amber buttons, simple section headings.

## Images or icons
Use real cafe photos if available. Avoid dark stock photos or overly fancy icons.

Langkah 4 — Guna kedua-dua files bila mula bina

Bila kamu buka IDE dan hantar prompt pertama ke AI agent, rujuk kedua-dua files:

Read project-brief.md and design-spec.md before writing any code.
Use them as your reference for what to build and how it should look.

AI agent akan guna kedua-dua files untuk kekal selaras dengan plan dan visual direction kamu sepanjang build.

Mistake biasa

• Skip langkah ni — AI agent akan cipta visual style sendiri yang mungkin tak sepadan dengan idea kamu.
• Buat design spec terlalu detail — kekalkan bahagian pendek di atas sahaja.
• Tak simpan sebagai file — AI agent tak boleh baca ChatGPT window.
• Simpan dalam folder yang salah — ia mesti ada di project root bersebelahan dengan project-brief.md.