Diseñá webs como en Canva. Publicá código como un senior.
Multi-Modal Generative Web Design (MMGD) — a new paradigm for AI-assisted web building. Conversation with AI + visual editing → clean Astro / Next + Tailwind code. Not templates. Not a chat-only black box. Real code you can ship.
Lume explores a thesis: existing web builders force a tradeoff between visual freedom (Canva, Figma → no real code) and code ownership (Webflow AST, v0 chat → no direct manipulation). MMGD proposes a third path — 5 simultaneous modalities (form, chat, canvas, sketch, references) editing the same real codebase, with no JSON intermediate representation.
Core differentiators:
- Diffusion loop with 3 parallel variants per generation
- Linter post-gen to enforce design-system invariants
- Design system embedded in the AI model via curated reference manifests
- Output is real Astro / Next + Tailwind — fork it, deploy it, own it
This repo is research + working prototype, not a product.
- The methodology, architecture and roadmap are documented in detail (see
docs/) - The prototype implements the bootstrap modality of MMGD (single prompt → site)
- Several MMGD modalities (chat refinement, canvas, sketch, moodboard, diffusion variants, sandboxed Astro runtime, auth/billing/publish) are intentionally not yet built — they live in the roadmap
- Not for production. No SLA, no API stability, no migrations.
If you want to follow along or fork the methodology, you are welcome.
lume/
├── docs/ # 7 design docs — PRD, methodology, system, roadmap
│ ├── 01-PRD.md
│ ├── 02-methodology.md ← MMGD: the core thesis
│ ├── 03-design-system.md
│ ├── 04-architecture.md
│ ├── 05-ai-pipeline.md
│ ├── 06-editor-ux.md
│ └── 07-mvp-roadmap.md
└── prototype/ # Next.js 15 + React 19 + Tailwind MVP
├── app/ # routes + API endpoints (generate, refine, diffuse, manipulate, brands)
├── components/ # editor UI (ChatPanel, PreviewCanvas, BrandPicker, …)
├── lib/ # prompt builder, file parser, Anthropic stream, store
└── scripts/ # CLI harness for fast prompt iteration
Read in order for the full reasoning, or jump:
| Question | File |
|---|---|
| What does Lume do? | docs/01-PRD.md |
| What is new about it? | docs/02-methodology.md |
| How is it built? | docs/04-architecture.md + docs/05-ai-pipeline.md |
| Editor UX | docs/06-editor-ux.md |
| What ships in the MVP? | docs/07-mvp-roadmap.md |
Requires Node.js 20+ and an Anthropic API key.
cd prototype
pnpm install # or npm install
cp .env.example .env
# add your ANTHROPIC_API_KEY to .env
pnpm dev
# → http://localhost:3000CLI smoke test (fast prompt iteration without the UI):
ANTHROPIC_API_KEY=sk-... pnpm cli editorial "portfolio for a BA photographer"
# → writes generated files to ./out-cli/<timestamp>/- 5 curated style modes (Editorial / Brutalist / Luxury / Tech / Bold)
- Bootstrap a site from a single prompt with streaming generation
- File parser for
<file path="…">outputs - Live preview (inline render — production target is a real sandbox)
- Code inspector
See docs/07-mvp-roadmap.md. Short list: chat refinement loop, direct canvas manipulation, sketch overlay, moodboard refs, real diffusion variants UI, E2B/Daytona Astro sandbox, auth, billing, publish, history.
- Framework: Next.js 15 (app router) + React 19
- Styling: Tailwind CSS 3
- AI: Anthropic Claude (via
@anthropic-ai/sdk) - State: Zustand
- Validation: Zod
- Language: TypeScript 5.7
MIT — see LICENSE.
Emanuel Cejas — emanuelcejas.vercel.app