DUDesign is a hosted AI front-end design platform: describe a page in plain language — or bring an existing HTML page — and DUDesign generates multiple design variations in parallel, lets you preview, refine and annotate each one, then export or share the result.
The product is one pipeline: describe, generate, review, refine, ship.
Start a session with a plain-language prompt, or upload an existing HTML page as the source. Sessions and workspaces keep every project organized and resumable — refresh the browser and pick up where you left off.
"Build a landing page for a smart coffee machine"
→ session created → design job queued
One brief, N variations. Each variation runs on its own runtime lane in parallel, and job events stream live to the browser — you watch the designs take shape instead of waiting on a spinner.
Finished variations land on a result wall with desktop / tablet / phone previews. Compare before-and-after states of a refinement side by side, then open any variation in the editor.
Drive the next iteration with a prompt, or circle parts of the rendered page to annotate what to change. An artifact quality gate checks generated output and an automation loop repairs issues automatically — review modes range from fully manual to fully automatic.
Export the final standalone HTML, or publish a share link. Generated artifacts remain usable even if the runtime is unavailable — the product never holds your output hostage.
 Design direction system |
 Automation loop |
 Hosted workspace |
| Scene templates, visual aesthetics, color palettes, brand references and template packs shape every generation. | Built-in quality gates, repair loop and review modes (off / semi-auto / auto). | Sessions, workspaces and user memory — everything is resumable and per-user. |
 Stable contracts, clean boundary |
 Admin console |
 Monorepo with governance |
| Product code talks to the runtime only through versioned contracts and a runtime gateway. | Capability governance, template library, runtime health, usage and audit views. | Type-safe packages, contract tests, staging deployment tooling and ADR-tracked decisions. |
DUDesign treats BabeL-O as an external runtime kernel. Product logic never imports or exposes BabeL-O internals; the runtime gateway is the only layer that understands BabeL-O protocol details.
- User experience — web app (workspace, variation wall, editor) and admin console.
- Application service — sessions, jobs, variations, artifacts, shares, permissions and automation loops.
- Runtime compatibility — a gateway with stable DUDesign contracts and an adapter for lane scheduling, retries and event bridging.
- BabeL-O runtime kernel — external; agent loop, tool execution, session resume and memory retrieval.
apps/
web/ # User-facing web app (Next.js)
admin/ # Admin & developer console (Next.js)
api/ # Application service API
runtime-adapter/ # BabeL-O runtime adapter
packages/
contracts/ # Stable DUDesign API and event contracts
domain/ # Business models and statuses
runtime-gateway/ # BabeL-O compatibility boundary
artifact-store/ # Artifact storage abstraction
deploy/staging/ # Docker Compose staging stack, release scripts, nginx config
docs/ # Architecture plans, ADRs, module worklogs
Requirements: Node.js >= 22 and npm.
npm install # install all workspace dependencies
npm run typecheck # type-check all packages and apps
npm test # unit / integration gates (no external services needed)Run the stack locally:
npm run dev:api # API on http://127.0.0.1:4000
npm run dev:web # web app on http://localhost:3001
npm run dev:admin # admin console on http://localhost:3002Point the web app at a different API if needed:
NEXT_PUBLIC_DUDESIGN_API_URL=http://127.0.0.1:4000| Script | Description |
|---|---|
npm run typecheck |
Type-check all packages and apps. |
npm test |
Unit/integration gates (contracts, gateway, adapter, API). |
npm run test:ux |
UX HTTP smoke; requires API and Web servers running. |
npm run test:ux:e2e |
Browser E2E; requires API and Web servers running. |
npm run dev:api |
Type-check, then run the API in watch mode. |
npm run dev:web |
Start the Next.js user web app on port 3001. |
npm run start:api |
Type-check, then start the built API. |
npm run start:web |
Start the built web app on port 3001. |
- 🌐 Product landing page
- 🚀 Live preview
- Online Design Platform Plan
- Architecture Governance Plan
- Architecture Decision Records
- Module Planning Index
MIT. See LICENSE.