Setup 4 langkah yang persis buat berubah dari terminal kosong jadi situs production-ready yang rapi — pakai Claude Code sebagai developer lu.
TL;DR / Key Takeaways
- Lu nggak butuh designer atau tim dev. Yang lu butuh adalah setup yang benar sebelum mulai ngeprompt, karena Claude Code cuma sebagus environment, animasi, design taste, dan komponen yang lu kasih.
- Step 1: install Claude Code lewat npm supaya dia jalan lokal, bisa baca seluruh project, dan edit banyak file sekaligus.
- Step 2: tambah Framer Motion buat animasi. Ini pembeda #1 antara "AI website" dan "agency website".
- Step 3: tambah frontend design skill di .claude/skills/ supaya Claude punya taste soal typography, spacing, dan color tokens.
- Step 4: integrate komponen production-ready dari 21st.dev buat skip sekitar 80% design work.
Kenapa Cara Ini Berhasil
Lu nggak butuh designer. Lu nggak butuh tim dev. Yang lu butuh cuma setup yang benar sebelum mulai ngeprompt — karena Claude Code cuma sebagus environment, animasi, design taste, dan komponen yang lu kasih ke dia.
Guide ini adalah stack persis yang ngubah Claude Code dari generic code generator jadi web designer level senior.
Step 1 — Install Claude Code
Claude Code jalan lokal di mesin lu lewat terminal. Satu command dan lu langsung masuk.
Command buat install:
npm install -g @anthropic-ai/claude-codeTerus jalanin:
claudeSyaratnya: Node.js 18+ terinstall. Login pakai akun Anthropic lu pas diminta.
Kenapa ini penting: Claude Code bisa baca seluruh project lu, edit banyak file sekaligus, jalanin command, dan iterasi — itu yang bikin dia beda dari sekadar copy-paste kode dari jendela chat.
Step 2 — Tambah Dukungan Animasi (Framer Motion)
Situs hasil AI default-nya kelihatan statis dan tanpa nyawa. Animasi adalah hal #1 yang bikin situs terasa premium.
Install Framer Motion:
npm install framer-motionTerus kasih tau Claude Code di project context lu:
Use Framer Motion for all animations. Apply scroll-triggered fades, staggered reveals, and smooth hover transitions on interactive elements.
Yang berubah: Hero section jadi bernapas. Card slide in pas di-scroll. Tombol terasa hidup. Tambahan satu ini yang misahin "AI website" dari "agency website".
Step 3 — Tambah Design Skill
Claude Code support Skills — reusable instruction sets yang ngatur gimana Claude ngedeketin sebuah task. Frontend design skill ngajarin Claude soal taste: spacing, hierarchy, typography, color systems, dan layout principles.
Cara nambahinnya:
- 1Bikin folder
.claude/skills/di root project lu. - 2Tambah file
SKILL.mdberisi design rules (atau pakai public frontend-design skill). - 3Claude Code otomatis nge-reference itu pas lagi bangun UI.
Yang perlu ada di dalam skill:
- Typography scale (pakai type system beneran — bukan font size random)
- Spacing system (base grid 8px)
- Color tokens (primary, neutral, accent — no random hex codes)
- Component patterns (button states, card structure, form layouts)
- Instruksi "avoid generic AI aesthetic"
Kenapa ini penting: Tanpa design skill, Claude Code default ke generic Tailwind patterns. Dengan skill, tiap komponen ngikutin design system yang konsisten — tipe yang biasa di-charge agency $10K.
Step 4 — Integrasi Component Library (21st.dev)
Jangan bikin ulang roda dari nol. 21st.dev adalah library berisi komponen production-ready yang udah didesain rapi dan bisa lu drop langsung ke project.
Cara pakainya:
- 1Buka 21st.dev.
- 2Browse komponen (heroes, pricing tables, testimonials, navbars, footers).
- 3Copy component code-nya.
- 4Paste ke project lu dan minta Claude Code buat nge-integrate.
Prompt yang dipakai:
Integrate this 21st.dev component into our landing page. Match it to our design tokens, replace the placeholder content with our copy, and add Framer Motion entrance animations.
Kenapa ini penting: Tiap komponen udah didesain sama profesional. Claude Code tinggal nyesuaiin ke brand lu. Lu skip 80% design work dan berakhir dengan situs yang keliatan mahal.
Full Stack-nya Sekilas
| Layer | Tool | Fungsinya |
|---|---|---|
| Code generation | Claude Code | Bangun dan edit situs lu secara lokal |
| Animation | Framer Motion | Nambahin polish dan gerakan |
| Design system | Frontend Design Skill | Ngajarin Claude design taste |
| Components | 21st.dev | Blok UI production-ready |
Starter Prompt Setelah Setup
Begitu keempat lapisan udah di tempat, drop prompt ini ke Claude Code buat mulai situs lu:
Build a modern landing page for [YOUR PRODUCT/SERVICE].
Requirements:
- Use Next.js 14 with the App Router
- Tailwind CSS for styling
- Framer Motion for all animations (scroll reveals, hover states, page transitions)
- Pull hero, features, and pricing sections from 21st.dev components
- Follow the design tokens defined in our frontend design skill
- Add a sticky navbar, a hero with a headline + CTA, 3 feature cards, social proof section, pricing, FAQ, and footer
- Mobile-first, fully responsive
- Lighthouse score 90+ on performance
Start by setting up the project structure, then build section by section. Show me each section before moving to the next.Kesalahan Umum yang Harus Dihindari
- Skip design skill. Tanpa itu, lu bakal dapet situs generic yang teriak "AI-generated".
- Prompt yang nggak jelas. Spesifik soal sections, animasi, dan konten. Claude Code cuma sebagus brief lu.
- Nggak iterasi. Output pertama jarang jadi output final. Minta Claude buat refine spacing, contrast, dan motion.
- Lupa performa. Selalu minta lazy-loaded images, optimized fonts, dan Lighthouse audit di akhir.
Yang Barusan Lu Hemat
| Rute tradisional | Biaya | Waktu |
|---|---|---|
| Nyewa web designer | $5K–$15K | 4–8 minggu |
| Nyewa agency | $10K–$30K | 6–12 minggu |
| Claude Code + stack ini | $20/bulan | 1–3 hari |
Langkah Selanjutnya
- 1Install Claude Code hari ini.
- 2Setup Framer Motion + frontend design skill di starter template lu.
- 3Bookmark 21st.dev.
- 4Bangun situs pertama lu minggu ini.
Inti artikel
Itu aja. Nggak ada fluff, nggak ada upsell. Cuma stack-nya: Claude Code, Framer Motion, frontend design skill, dan 21st.dev.
FAQ
Apa itu Claude Code?+
Claude Code adalah AI coding tool dari Anthropic yang jalan lokal lewat terminal. Dia bisa baca seluruh project, edit banyak file sekaligus, jalanin command, dan iterasi, jadi beda dari sekadar copy-paste kode dari chat.
Apa syarat untuk install Claude Code?+
Lu butuh Node.js versi 18 ke atas. Install lewat npm dengan perintah npm install -g @anthropic-ai/claude-code, lalu jalankan claude dan login pakai akun Anthropic.
Kenapa animasi begitu penting untuk website?+
Website hasil AI default-nya kelihatan statis. Framer Motion menambah scroll reveals, staggered reveals, dan hover transitions yang bikin situs terasa hidup dan premium. Ini pembeda utama antara situs AI dan situs agency.
Apa itu design skill dan kenapa perlu?+
Design skill adalah file SKILL.md di folder .claude/skills/ yang berisi aturan desain seperti typography scale, spacing 8px, color token, dan pola komponen. Tanpa itu, Claude Code default ke pola Tailwind generik yang gampang ketahuan hasil AI.
Apa itu 21st.dev?+
21st.dev adalah library komponen UI production-ready yang sudah didesain profesional. Lu copy kode komponen seperti hero, pricing, atau navbar, lalu minta Claude Code menyesuaikannya ke brand dan design token lu.
