Panduan Web AI

Standar industri · teknik modern
Implementasi modern

9 tahap industri, dikerjakan pakai AI

Urutan tetap seperti agency besar. Yang berubah: tool + cara (lo operator, AI manufacturing).

Inti

Discovery → Research → Wire → Tokens → Content → Build → QA → Live → Handover.
AI masuk di tiap tahap — bukan loncat brief langsung full site.

Buka

Industri vs modern (ringkas)

Dulu / formalSekarang (AI)
Brief meetingChat Hermes → BRIEF.md
Moodboard manualOpen Design / s2c / scrape ref
Figma full duluTokens + 1 arah, baru kode
Dev tim besar1 coding agent + Hermes deploy
IT deploy lamaCF Pages / Vercel menit

Aturan emas

  • Spec lock dulu (01–05) baru generate besar
  • 1 tool desain + 1 tool bangun per project
  • R1/R2 = saran resep, stack lo boleh beda
  • 1 site live dulu, baru pikir sistem agency
9 tahap + AI

Nama industri kiri · kerja modern kanan. Tap salin template di tahap yang butuh.

01 · Discovery

Rencana / BRIEF

Industri: kickoff, goals, scope.
Modern: chat TB3 / Hermes → kunci ICP, 1 CTA, larangan → file BRIEF.md.

02 · Research

Ref & kompetitor

Industri: competitive research.
Modern: buka 3 site · scrape/Firecrawl · catat tiru/buang di refs.md. Ada screenshot → siap s2c.

03 · IA / Wire

Kerangka section

Industri: sitemap + wireframe.
Modern: sections.md top→bottom + 1 tujuan/section. Excalidraw opsional. Jangan buka v0 dulu.

04 · Design system

Tokens + 1 arah visual

Industri: UI kit / Figma system.
Modern: design-tokens.md + satu tool: Open Design (teks) atau s2c (ref) atau Fable/Dyad explore.

05 · Content

Teks & data real

Industri: copywriting + asset.
Modern: AI bantu rewrite; manusia kunci harga, WA, alamat, jam. No lorem / no “Elevate”.

06 · Build

Development ber-AI

Industri: frontend/backend dev.
Modern: coding agent (OpenCode/9R, Cursor, Cline, Hermes). Urutan: shell → hero → section → 1 wow → CTA → SEO. Bukan 1 prompt dewa.

07 · QA

Cek sebelum live

Industri: QA + UAT.
Modern: HP 375px, semua CTA WA, anti-slop, Lighthouse kasar, minta Hermes audit.

08 · Launch

Deploy online

Industri: release production.
Modern: Cloudflare Pages / Vercel · Hermes wrangler · domain + HTTPS · tes data seluler.

09 · Handover

Serah / case study

Industri: training + maintenance.
Modern: URL + cara edit jujur + case 4 baris (masalah→proses→hasil→lesson).

Stack & toolkit

Married stack

Satu project = 1 desain + 1 bangun. Ganti di project berikutnya, bukan di tengah.

Per tahap → tool modern

TahapToolkit tipikal
01–03 SpecHermes, notes, Excalidraw
02 RefBrowser, Firecrawl, s2c input
04 DesignOpen Design · s2c · Fable · Dyad
05 ContentHermes + AI Editor Style
06 BuildOpenCode+9R · Cursor · Cline · Hermes
07 QAHP + Hermes audit + Lighthouse
08 LiveCF Pages · Vercel · GitHub

Kode default

  • Cepat: 1 file HTML + Tailwind CDN + Phosphor → CF Pages
  • Solid: Next/Astro + Tailwind → Vercel/CF
  • Wow: + Motion; GSAP max 1 pola

Resep (R) = opsional

R1 · Hemat default

Desain: Open Design / s2c · Bangun: OpenCode+9R · Pasang: Hermes CF

R2 · Ada ref kuat

s2c → rewrite brand · OpenCode · Cline poles

Custom · stack lo

Desain = ___ · Bangun = ___ · Host = ___

Kalau situasinya…

SituasiArah
Cuma brief teksOpen Design / explore
Screenshot baguss2c dulu
Mau hemat bulkOpenCode + 9R free
Multi-file macetCursor / Cline
Deploy bingungHermes di chat TB3
Latihan 1 site

Jalankan 01→09 sekali. Contoh sudah ada: Zoneout (live).

Pilih project fiktif

  • Barbershop DPS — CTA WA
  • Kafe kopi — CTA menu + WA
  • VR park rebrand — mirip Zoneout

Demo proses: zoneout-theme-park.pages.dev

Ceklis 01–09

Start di Hermes