UMKM Website Builder Indonesia
Build a Professional Website for Your Small Business — No Coding Required
This agent guides Indonesian UMKM owners through building a complete, production-ready website using only plain HTML + Tailwind CSS. No npm. No build tools. No developer needed.
Open Claude Code in the starter folder, answer a few questions about your business, and the agent generates everything — ready to drag and drop onto Netlify.
Who This Is For
- Warung, toko, and small shop owners who need an online presence
- Service businesses: salons, tutors, catering, photographers, repair shops
- Anyone who wants a real website (not just a link-in-bio) without hiring a developer
- Indonesian UMKM owners who prefer communicating in Bahasa Indonesia
What You Get
Every website includes:
- Mobile-responsive layout (Tailwind CDN — no build step)
- Dark mode toggle (saved to localStorage)
- WhatsApp CTA button in nav and hero
- Product/service grid with pricing
- 3 customer testimonial cards
- Expandable FAQ accordion
- Contact form via Formspree (zero backend)
- Google Maps embed
- JSON-LD LocalBusiness schema
- OpenGraph meta tags for social sharing
- Emoji favicon (no image file needed)
How It Works — 6 Steps
Step 1 — Brief scan
The agent reads your business brief files (brief/ folder). If anything is missing, it moves to Step 2.
Step 2 — Smart questions
The agent asks up to 5 questions at a time — in Bahasa Indonesia. You answer in plain language; the agent fills in the brief files automatically. No manual editing required.
Step 3 — Website generation
The agent builds all files in src/ based on your brief. Every text comes from your brief — nothing is fabricated.
Step 4 — Self-QA (15-point checklist)
Before reporting done, the agent checks: HTML validity, all WhatsApp links, meta tags, JSON-LD schema, mobile breakpoints, dark mode, FAQ accordion, and more.
Step 5 — Local preview
Runs python3 -m http.server 8000 so you can see your website at http://localhost:8000 before publishing.
Step 6 — Deploy
The agent offers 3 deploy options:
- Netlify Drop — drag the
src/folder, live in 30 seconds - Vercel CLI — runs
npx vercelstep by step - Cloudflare Pages — via GitHub connection
Starter Pack Structure
The skill ships with a complete starter folder:
Mode Plus — Notion MCP Integration
If you have Notion MCP active in Claude Code, the agent can pull product data directly from your Notion database and sync it into the website automatically. Configure once in notion-mcp/sync-config.md.
Tech Stack
| Layer | Choice | Why |
|---|---|---|
| HTML | Semantic HTML5 | SEO-friendly, no framework needed |
| CSS | Tailwind CDN | No build step, rapid styling |
| JS | Vanilla JS | Dark mode, accordion, smooth scroll — zero dependencies |
| Forms | Formspree | Free contact form, no backend |
| Deploy | Netlify / Vercel / Cloudflare | Free tier, drag-and-drop or CLI |
FAQ
Q: Do I need to know how to code?
No. You only need to answer questions in plain language. The agent writes all the code.
Q: Can I update the website later?
Yes. Open Claude Code in the same folder in a new session. The agent reads CLAUDE.md and knows your website context. Just type what you want to change.
Q: What if I want to add a new page (e.g., promo page)?
Say "Buat halaman promo Lebaran" and the agent creates src/promo.html with the same design.
Q: Is this only for Indonesian businesses?
The agent defaults to Bahasa Indonesia but switches to English if you write in English.
Q: Can I use my own photos?
Yes. Put your product photos in assets/foto-produk/ and the agent uses them. If the folder is empty, it generates CSS gradient placeholders using your brand colors.
Q: What does the website look like on mobile?
Fully responsive. The product grid switches from 3 columns on desktop to 1 column on mobile using Tailwind's sm: breakpoints.
