Membuat Frontend yang Baik dengan AI

AI coding tidak otomatis menghasilkan UI yang “fancy”, mewah, original, dan siap brand hanya karena PRD lengkap. Coding skill, visual design taste, image generation, illustration, photography, iconography, dan brand direction adalah kemampuan yang berbeda.

1. Atur Ekspektasi dengan Benar

PRD menjawab pertanyaan seperti:

• siapa user;
• apa problem;
• fitur apa yang diperlukan;
• flow apa yang harus bekerja;
• data apa yang digunakan;
• aturan bisnis apa yang berlaku.

PRD bukan pengganti visual direction.

Tanpa design input yang cukup, agent sering mengisi kekosongan dengan pola generik:

• hero dengan gradient;
• card grid berulang;
• corner sangat bulat;
• shadow berlebihan;
• icon yang tidak konsisten;
• placeholder illustration;
• typography tanpa hierarchy;
• spacing yang terasa “AI template”;
• dashboard yang terlihat seperti marketing site;
• desktop bagus tetapi mobile berantakan.

Kalimat yang perlu dipahami user:

PRD adalah functional intent, bukan polished art direction. AI coding agent dapat mengimplementasikan struktur dengan cepat, tetapi UI brand yang benar-benar polished membutuhkan visual references, DESIGN.md, asset nyata, dan human review.

2. Human Masih Dibutuhkan untuk Web Asset

Jangan berasumsi coding agent akan otomatis menciptakan:

• logo final;
• product photography;
• hero artwork;
• illustrations;
• custom icons;
• screenshots aplikasi;
• avatar yang legal dipakai;
• licensed font;
• brand texture/background;
• animation asset;
• video.

Sebagian AI product dapat menghasilkan image, tetapi kemampuan tersebut tidak selalu tersedia di coding agent yang Anda pakai, dan output-nya tetap memerlukan review hak pakai, brand fit, consistency, dan kualitas.

Buat asset inventory:

public/
├── brand/
│   ├── logo.svg
│   └── mark.svg
├── images/
│   ├── hero.webp
│   └── feature-dashboard.webp
└── icons/

Opsional, tambahkan ASSETS.md. Paket Learning juga menyediakan templates/ASSETS-template.md:

# Asset Inventory

| Asset | Status | Path | Usage | Notes |
|---|---|---|---|---|
| Brand logo | final | public/brand/logo.svg | Header/footer | Do not recolor |
| Hero image | needed | - | Landing hero | 16:10, product-first |
| Dashboard mockup | reference only | references/dashboard.png | DESIGN.md | Do not ship |

3. Mulai dengan 2-3 Mockup/References

Untuk project frontend, rekomendasikan user memberi 2-3 gambar referensi yang mewakili produk yang ingin dibuat.

Contoh kombinasi:

1. landing page reference;
2. dashboard/product page reference;
3. mobile/reference untuk responsive behavior.

Atau untuk aplikasi tanpa landing page:

1. main workspace;
2. data/form/detail screen;
3. mobile state.

Jangan ambil 15 screenshot dari 15 style berbeda. Terlalu banyak reference membuat direction tidak konsisten.

Dari mana mencari inspirasi?

Gunakan reference sebagai bahan analisis, bukan template untuk disalin 1:1:

• getdesign.md - membantu mengekstrak/membentuk design contract;
• Aura - visual inspiration;
• shadcn.io - third-party community directory untuk component/block inspiration;
• shadcn/ui - official open-code component primitives;
• Magic UI - animated components/effects untuk marketing/landing yang dipakai selektif;
• Mobbin/Page Flows - flow dan product screen research bila tersedia;
• Figma Community - kit/reference dengan license review.

Penting: shadcn.io bukan situs official shadcn/ui. Official shadcn/ui berada di ui.shadcn.com.

Bisa minta AI membuat mockup?

Bisa. Jika user belum punya referensi, gunakan AI yang memang mendukung image generation/design mockup. Berikan PRD sebagai input ringkas, bukan seluruh repository.

Contoh prompt mockup:

Buat mockup visual untuk web app habit tracker berdasarkan ringkasan PRD berikut.
Target: desktop 1440px.
Screen: dashboard utama.
Visual direction: calm, focused, editorial, warm-neutral.
Hindari: glassmorphism berat, neon gradients, card berlebihan.
Tampilkan: top navigation, weekly progress, habit list, today actions, streak detail.
Ini hanya visual reference, bukan final production asset.

Buat 2-3 varian, pilih satu arah, lalu dokumentasikan rule-nya.

4. Jangan Langsung Minta Agent “Copy Screenshot”

Gunakan workflow ini:

2-3 references
→ deconstruct
→ pilih traits yang disukai
→ tulis DESIGN.md
→ asset inventory
→ implement one vertical slice
→ screenshot compare
→ revise DESIGN.md/implementation

Deconstruction yang baik menjawab:

• apa hierarchy utamanya;
• berapa lebar content;
• bagaimana grid bekerja;
• bagaimana typography scale;
• bagaimana warna dipakai berdasarkan role;
• bagaimana button hierarchy;
• radius/border/shadow pattern;
• navigation density;
• bagaimana empty/loading/error state;
• bagaimana mobile collapse/reflow;
• animation apa yang benar-benar membantu.

5. Apa Itu DESIGN.md?

DESIGN.md adalah design contract antara user, designer/human reviewer, dan coding agent. File ini mengubah preferensi visual yang ambigu menjadi rule yang dapat diimplementasikan dan direview.

Design contract bukan pengganti Figma atau designer. Ia adalah source of truth tekstual agar agent tidak menebak style di setiap screen.

6. Struktur DESIGN.md yang Direkomendasikan

# DESIGN.md

## Product and audience
- Product:
- Primary users:
- Primary jobs:
- Target devices:

## Experience principles
1. Fast to scan.
2. Calm, not decorative.
3. One obvious primary action per section.

## Visual direction
- Keywords: editorial, calm, precise
- Avoid: neon gradients, heavy glassmorphism, excessive pills

## References
### Reference A
- Source/image:
- Borrow: typography rhythm, content width
- Do not copy: logo, copy, imagery

### Reference B
- Source/image:
- Borrow: dashboard density, table treatment

## Typography
- Font family:
- Heading scale:
- Body scale:
- Line height:
- Weight rules:

## Color system
- Background:
- Surface:
- Text primary:
- Text muted:
- Primary action:
- Success/warning/error:
- Contrast rule:

## Spacing and grid
- Base unit:
- Max content width:
- Desktop columns:
- Section spacing:

## Radius, borders, shadows
- Radius scale:
- Border default:
- Shadow policy:

## Components
- Buttons:
- Inputs:
- Cards:
- Tables:
- Dialogs:
- Toasts:

## Navigation
- Desktop:
- Mobile:
- Active state:

## States
- Loading:
- Empty:
- Error:
- Success:
- Disabled:

## Responsive
- Mobile-first rules:
- Breakpoints:
- Table behavior:

## Accessibility
- Keyboard:
- Focus:
- Contrast:
- Reduced motion:
- Form labels/errors:

## Motion
- Where motion is allowed:
- Duration/easing:
- Do not animate:

## Assets
- Logo:
- Hero:
- Screenshots:
- Icons:
- Illustrations:

## Do / Don't
### Do
- ...
### Don't
- ...

## Visual QA
- reference screenshots:
- required viewport checks:

Paket ini juga menyertakan templates/DESIGN-template.md yang siap diisi.

7. Cara Memakai getdesign.md

getdesign.md dapat dipakai sebagai salah satu cara menyusun design contract/readable design specification dari reference. Gunakan hasilnya sebagai draft.

Jangan langsung percaya output otomatis. Review:

• apakah token warnanya benar;
• apakah typography match product;
• apakah component rules terlalu generik;
• apakah style cocok untuk operational screen, bukan hanya landing page;
• apakah accessibility terpenuhi;
• apakah ia menyalin brand/asset proprietary.

Sumber: https://getdesign.md/

8. Aura untuk Direction, Bukan Source of Truth Teknis

Aura dapat dipakai untuk mencari visual direction dan inspiration. Ambil trait seperti:

• composition;
• rhythm;
• density;
• typography mood;
• layout ideas.

Jangan mengambil screenshot lalu menyalin seluruh visual identity, copy, atau asset. Catat “apa yang dipinjam” pada DESIGN.md.

Sumber: https://www.aura.build/

9. shadcn/ui: Building Blocks, Bukan Final Design

shadcn/ui memberi open-code components/primitives yang dapat Anda miliki dan modifikasi. Ia sangat berguna untuk:

• button/input/dialog;
• form patterns;
• dropdown/popover;
• table-related primitives;
• accessible interaction patterns;
• konsistensi implementation.

Tetapi memasang shadcn/ui tidak otomatis menciptakan brand. Anda tetap harus mengatur:

• tokens;
• typography;
• spacing;
• hierarchy;
• component composition;
• states;
• content;
• responsive behavior.

Sumber: https://ui.shadcn.com/

10. shadcn.io: Community Directory

shadcn.io adalah third-party/community site untuk menemukan component/block inspiration. Perlakukan code dari directory eksternal sebagai third-party dependency/snippet:

• review source;
• review license;
• review dependency tambahan;
• audit accessibility;
• hilangkan style yang bertentangan dengan DESIGN.md.

Sumber: https://www.shadcn.io/

11. Magic UI: Gunakan sebagai Accent

Magic UI menawarkan banyak animated React/Tailwind/Motion components. Cocok untuk:

• marketing hero;
• logo cloud;
• animated text/accent;
• visual showcase;
• decorative background yang ringan.

Jangan menjadikan setiap section bergerak. Untuk dashboard/data-heavy apps, motion berlebihan dapat mengurangi clarity dan performance.

Rule sederhana:

shadcn/ui → interaction primitives / product UI
Magic UI → selective visual accents / marketing moments
DESIGN.md → rule yang menyatukan semuanya

Sumber: https://magicui.design/

12. Design Workflow yang Benar

Step 1 - Tentukan screen priority

Pilih 1-3 screen yang paling menentukan visual system.

Step 2 - Kumpulkan 2-3 references

Simpan screenshot/link dan alasan memilihnya.

Step 3 - Deconstruct references

Jangan bilang “saya suka ini”. Tulis trait yang dapat diimplementasikan.

Contoh:

Reference A
+ content width 1180-1240-ish
+ left-aligned hero
+ quiet neutral background
+ strong serif/display heading
- jangan copy logo
- jangan copy imagery

Step 4 - Buat DESIGN.md

Kunci typography, color roles, spacing, layout, component rules, states, responsive, accessibility, motion.

Step 5 - Buat asset pack

Masukkan asset nyata atau tandai placeholder secara eksplisit.

Step 6 - Implement satu vertical slice

Misalnya landing hero + navigation + CTA, atau dashboard shell + satu real data panel.

Step 7 - Ambil screenshot hasil implementation

Bandingkan dengan design contract, bukan hanya “apakah build berhasil”.

Step 8 - Human visual QA

Periksa hierarchy, spacing, density, alignment, typography, mobile, hover/focus, loading/error/empty.

Step 9 - Baru scale ke screen lain

Jangan membangun 20 screen sebelum visual system lolos review.

13. Prompt untuk Coding Agent Setelah DESIGN.md Siap

Baca PRD dan DESIGN.md terlebih dahulu.
Gunakan reference images di folder /references hanya sebagai visual direction; jangan copy brand/copy/assets.
Gunakan shadcn/ui primitives yang sudah ada sebelum membuat primitive baru.
Magic UI boleh dipakai hanya pada landing/marketing section jika sesuai DESIGN.md.
Jangan menambahkan gradient, glassmorphism, animation, rounded card, atau icon style yang tidak didefinisikan.
Jika asset final tidak tersedia, gunakan placeholder yang jelas dan catat di ASSETS.md.

Implement hanya screen/vertical slice berikut: [scope].
Sebelum edit, jelaskan layout hierarchy dan components yang akan dipakai.
Setelah edit, jalankan lint/typecheck/test/build yang relevan dan berikan daftar viewport untuk visual QA.

14. Visual QA Checklist

• Main action jelas dalam 3-5 detik.
• Heading hierarchy konsisten.
• Body text nyaman dibaca.
• Spacing memakai system, bukan angka acak di tiap component.
• Color dipakai berdasarkan role.
• Border/shadow tidak berlebihan.
• Tidak semua elemen menjadi card.
• Form memiliki label, error, disabled, loading.
• Empty/loading/error state dibuat.
• Mobile tidak sekadar desktop diperkecil.
• Focus state terlihat.
• Motion dapat dikurangi dan tidak menghalangi task.
• Asset final tidak tertukar dengan placeholder/reference-only image.
• UI tidak menyalin brand pihak lain 1:1.