Interactive website builder for Claude Code
Ask questions → generate CLAUDE.md → let Claude Code build your site.
Not yet published to npm — build from source (see Development).
Siteforge is an interactive CLI that asks you detailed questions about the website you want to build — framework, design language, payment, auth, deployment — then generates a rich CLAUDE.md file that Claude Code reads to build your entire site, section by section.
Siteforge itself doesn't write your site code. It writes the brief that guides Claude Code.
npx siteforge initWhen you start a project with Claude Code, you spend the first 20 minutes typing out what you want: "Next.js 15 with App Router, Tailwind, shadcn/ui, dark mode, three sections, use this color..." Siteforge turns those 20 minutes into a 2-minute interactive setup and produces a CLAUDE.md that is more thorough than what you'd type by hand.
Yes. Here's a real end-to-end test run in April 2026.
Type : portfolio
Framework : Next.js 15 (App Router)
Languages : az, tr, en (Azerbaijani default)
Style : neo-brutalist
Mood : professional, technical, energetic
Typography : classic-serif (Playfair Display + Inter)
Animation : showcase (Awwwards-level: WebGL + scroll-driven)
Hero : 3D canvas with React Three Fiber
Sections : navigation, hero, features, pricing, faq, footer
SEO : full (meta + sitemap + OG image + JSON-LD)
Legal : privacy, terms, cookies + cookie banner
Deployment : Vercel + GitHub Actions
Siteforge's coherence resolver auto-corrected two conflicts (the user picked soft shadow and animated background, which contradict neo-brutalism — overridden to hard shadow and solid background) and produced a 383-line CLAUDE.md with concrete Tailwind tokens for every design decision.
Feeding the generated CLAUDE.md to Claude Code with the single prompt "Read CLAUDE.md and build this site" produced a complete, TypeScript-clean, production-ready project:
| Layer | Files |
|---|---|
| Config | package.json, next.config.ts, tsconfig.json, postcss.config.mjs, .env.example |
| i18n | i18n.ts, middleware.ts, messages/az.json, messages/tr.json, messages/en.json |
| App | app/globals.css (Tailwind 4 @theme), app/[locale]/layout.tsx, app/[locale]/page.tsx |
| Providers | ThemeProvider (next-themes), LenisProvider (smooth scroll) |
| Sections | Navigation (sticky + mobile drawer + language switcher), Hero (R3F torus knot wireframe + floating icosahedra + particles), Features (6-card grid), Pricing (3 tiers + billing toggle), FAQ (accordion), Footer |
| Legal | Privacy, Terms, Cookies pages across all 3 locales + shared LegalPage component |
| SEO | sitemap.ts, robots.ts, opengraph-image.tsx (edge-rendered) |
| Cookie banner | GDPR/KVKK-compliant, localStorage persistence |
| CI/CD | .github/workflows/deploy.yml (lint + typecheck + build) |
Build status: ✓ Compiled successfully on the first try. All 5 locale-prefixed pages generated, TypeScript clean, zero hardcoded user-facing strings.
Key observations from the test:
- Claude Code respected every design token verbatim. The brutalist button used the exact
shadow-[4px_4px_0_0_rgba(0,0,0,1)]offset shadow from the brief, not a genericshadow-md. - The hero used React Three Fiber (not a random CSS animation) because the
showcaseanimation level explicitly demanded WebGL. - All three languages got realistic content — not lorem ipsum — because the brief's
DO NOTlist banned it. - Claude Code chose Tailwind 4's modern
@themeCSS-first config over the legacytailwind.config.tsapproach, because the brief specified "Tailwind CSS 4".
The whole pipeline — from clicking through setup to a running npm run dev — took under 15 minutes.
Note: Siteforge is currently pre-release.
npx siteforge initwill be the canonical command once v0.1.0 ships to npm. Until then, clone and build from source:
git clone https://github.com/scuton-technology/siteforge.git
cd siteforge
pnpm install
pnpm build
node dist/cli.js init my-siteOnce published to npm:
# Interactive mode
npx siteforge init
# Use a preset
npx siteforge init --preset saas-az
npx siteforge init --preset portfolio-minimal
npx siteforge init --preset blog-mdx
# Start from a brainstorm session
# (First run /siteforge-brainstorm in Claude Code to produce .siteforge/brainstorm.json)
npx siteforge init --brainstormSiteforge walks you through every decision a professional site needs:
| Phase | What it asks |
|---|---|
| 0 | Brainstorm — optional Claude Code slash command that talks through your idea and analyzes competitors |
| 1 | Project name & product type (SaaS, portfolio, blog, e-commerce, dashboard) |
| 2 | Framework (Next.js, Astro, Vite+React, static HTML) |
| 3 | Design Language — the most critical phase: style, mood, density, radius, shadows, background, typography, components, buttons, icons, hero layout |
| 4 | Sections (Hero, Features, Pricing, FAQ, Footer…) |
| 5 | Region, currency, languages, i18n library |
| 6 | Payment provider & model (Paddle, Stripe, Iyzico, Lemon Squeezy, PayTR…) |
| 7 | Auth & database |
| 8 | CMS (MDX, Sanity, Notion, Strapi…) |
| 9 | Email service & templates (Mailcow, Resend, React Email) |
| 10 | SEO package & legal pages (Privacy, Terms, Cookies, KVKK, GDPR) |
| 11 | Deployment target & CI/CD |
| 12 | Stack details (TypeScript, CSS, analytics, error tracking, testing) |
| 13 | Review & confirm |
Siteforge detects your region from system timezone and pre-fills sensible defaults:
| Region | Payment | Currency | Languages | Deploy | |
|---|---|---|---|---|---|
| 🇦🇿 Azerbaijan | Paddle | AZN | az, tr, en | Mailcow | Self-host VPS |
| 🇹🇷 Turkey | Iyzico | TRY | tr, en | Mailcow | Self-host VPS |
| 🇺🇸 United States | Stripe | USD | en | Resend | Vercel |
| 🇪🇺 European Union | Stripe | EUR | en | Resend | Vercel |
| 🌍 Global | Paddle | USD | en | Resend | Vercel |
You can override any default during setup.
For fuzzy ideas, use the Claude Code slash command first:
/siteforge-brainstorm
It interviews you about your idea, fetches competitor sites with web_fetch, analyzes their design and tone, suggests differentiation strategies, and writes .siteforge/brainstorm.json. When you then run npx siteforge init, every question comes pre-filled with brainstorm-driven defaults.
my-site/
├── CLAUDE.md # Rich brief with design tokens + build instructions
├── .siteforge.json # Your configuration, for future `siteforge upgrade`
├── .siteforge/
│ ├── brainstorm.md # (if brainstorm was used)
│ └── brainstorm.json
├── package.json # Dependencies for the chosen framework
├── tsconfig.json
├── tailwind.config.ts
├── next.config.ts
├── app/
│ ├── layout.tsx # Font + theme provider
│ ├── page.tsx # Section imports (stubs)
│ └── globals.css # CSS variables (your color tokens)
├── components/
│ ├── sections/ # Hero.tsx, Features.tsx... (empty, Claude Code fills)
│ └── ui/ # shadcn/ui primitives if chosen
└── messages/ # i18n files (if chosen)
├── en.json
└── ...
After setup, you run claude in the project directory and Claude Code reads CLAUDE.md to build each section.
git clone git@github.com:scuton-technology/siteforge.git
cd siteforge
pnpm install
pnpm dev # watch mode
pnpm build # production build
node dist/cli.js init # test locallyCurrent: v0.1.0-alpha — pre-release, build from source. The CLAUDE.md generator is production-tested (see Does it actually work?) and produces rich briefs that Claude Code can turn into complete Next.js 15 projects.
- 14-phase interactive setup flow
- Design Language phase with 17 sub-questions (style, mood, density, radius, shadow, background, typography, components, buttons, icons, hero layout, animation)
- Coherence resolver — auto-corrects conflicting design choices
- Smart regional defaults (timezone detection → Azerbaijan/Turkey/US/EU presets)
- CLAUDE.md generator with concrete Tailwind tokens
- JSON Schema for brainstorm.json
-
/siteforge-brainstormClaude Code slash command - End-to-end test: 35-file Next.js project generated from brief
- Expand 11 stub question modules to full interactive flow
- Minimal Next.js scaffold generator (optional — CLAUDE.md already sufficient)
- npm publish
- Astro generator
- Vite + React generator
- Static HTML generator
-
siteforge upgradecommand
- Theme marketplace
- Plugin system for custom question packs
- Community presets
This is early — issues, PRs, and discussion very welcome. Good first contributions:
- Expand one of the stub question modules in
src/questions/_stubs.ts - Add a new preset in
src/utils/presets.ts - Improve a design style's coherence rules in
src/generators/coherence.ts
MIT © Scuton Technology