GPTDesign

The design layer for Codex.

You type what you want. An AI agent designs it live on a canvas, in front of you. But unlike normal AI generation, the design is locked to a design system: the exact colors, fonts, and spacing you chose. A linter checks every line and rejects anything outside the system. Then the design is verified: the model looks at a screenshot of its own work and fixes what it sees, and for interactive pages, a real browser clicks every button to prove they work. When it's done, GPTDesign hands the finished design to Codex to implement in your real codebase.

In short: agents are fast, but they can't ship taste. GPTDesign gives any agent taste it cannot lose.

How Codex built this project

This entire project was built with the Codex CLI, working against a written spec, phase by phase. You can see it in the repo history: the codex/* branches and the "Merge pull request" commits are the actual build record.

• Phase 1 (Codex): the core engine. Design-system extraction from a repo, token-locked HTML generation, the drift linter, the canvas server, and the MCP server.
• Phase 2 (Codex): editing depth. Direct text editing, adjustment controls, interactive prototypes with behavior verification, critique, and the reverse round-trip (import your existing pages).
• Phase 3 (Codex): design systems at full width. GitHub import, image and document context, vision-based extraction from PDFs and slides, and design-system remix with versioning.

GPT-5.6 and Codex don't just build the tool. They run inside it: the bridge mode spawns your local codex exec as the design brain, the sight loop sends Codex a screenshot of its own render to fix by sight, and the API-key mode calls GPT-5.6 directly with token streaming.

Important decisions made while building with Codex

1. The linter is deterministic, not a model. A model checking its own work can be lazy. A linter cannot. That one decision is the whole product: the design system is law.
2. One core, no transport. All product logic lives in packages/core with zero HTTP or MCP code. The REST server and the MCP server are thin shells over the same functions, so every feature works for humans (canvas) and agents (MCP) automatically.
3. Verify behavior in a real browser. Generated prototypes are not trusted. A headless browser walks every tab, dialog, and button with budgets, and failures get repaired or honestly failed.
4. Any agent can be the brain. All inference sits behind one interface, so Codex CLI, an external agent over MCP, and direct GPT-5.6 are interchangeable. No lock-in, no required API key.
5. Show the work live. Drafts stream onto the canvas while the agent composes, with narration. Trust comes from watching it happen.

Setup (about 3 minutes)

You need: Node.js 20.18+, pnpm 9, and (optional but recommended) the Codex CLI on PATH.

git clone https://github.com/Danishlynx/GPT_Design.git
cd GPT_Design
pnpm install
pnpm -r build

Terminal 1: start the server (the flags turn on the full demo feature set):

cd packages/server
GPTDESIGN_LIVE_PROGRESS=1 GPTDESIGN_SIGHT_LOOP=1 GPTDESIGN_RUNTIME_ENGINE=1 \
GPTDESIGN_SUPPLIED_PROFILES=1 GPTDESIGN_PROTOTYPES=1 GPTDESIGN_BEAUTY_PACK=1 \
GPTDESIGN_DIRECT_EDITING=1 GPTDESIGN_ADJUSTMENTS=1 GPTDESIGN_CRITIQUE=1 \
node --enable-source-maps dist/index.js

(PowerShell: set each variable with $env:NAME = "1" first, then run node --enable-source-maps dist/index.js.)

Terminal 2: start the canvas:

cd apps/canvas
pnpm dev

Open http://127.0.0.1:5173/?next=1

The three ways to use it (the "Brain" picker, top right)

1. GPTDesign (Codex): just type. GPTDesign runs your installed Codex CLI for you and streams the design onto the canvas. No key, no copy-paste.
2. Agent: bring your own agent. Type a prompt, click "Copy Codex prompt", paste it into Codex (or any agent). It reads the brief, streams drafts while composing, and submits. Fully keyless. You can also register packages/mcp/dist/index.js as an MCP server and drive everything with the design_* tools (config block below).
3. API key: paste an OpenAI key in the Brain popover. Runs GPT-5.6 directly with token streaming and parallel design directions. Add GPTDESIGN_IMAGES=1 plus OPENAI_API_KEY in the server environment for generated imagery.

MCP registration for Codex (~/.codex/config.toml):

[mcp_servers.gptdesign]
command = "node"
args = ['<repo-path>/packages/mcp/dist/index.js']

[mcp_servers.gptdesign.env]
GPTDESIGN_LIVE_PROGRESS = "1"
GPTDESIGN_PROTOTYPES = "1"
GPTDESIGN_BEAUTY_PACK = "1"
GPTDESIGN_SUPPLIED_PROFILES = "1"
GPTDESIGN_BRIDGE = "0"

For judges: fastest test, no API key

1. Do the setup above.
2. In the canvas, open the Design systems tab, pick a starter (for example Modernist), and continue.
3. Paste any product brief, approve the design-system review.
4. Select the Agent brain, click Copy Codex prompt, paste it into Codex, and watch: narration appears in the chat rail, the page assembles live on the canvas, and the run finishes through the drift gate.
5. Click any element on the finished page. The inspector offers only tokens from the design system. That is the lock, working end to end.

Run the test suite with pnpm -r test.

How it's organized

• packages/core: all product logic (profiles, generation, linter, gates, stores). No HTTP, no MCP.
• packages/server: REST + live streaming + the gate runner.
• packages/mcp: the same features as MCP tools for agents.
• packages/extractor: turns a repo into a design-system.json.
• apps/canvas: the app you see. Home, project shell, live draft stage, token-locked inspector.

What's next (planned for future versions)

Today GPTDesign ships pages and interactive prototypes (desktop and mobile, in a real device frame). The same token-locked pipeline is designed to carry many more output types, and that is the roadmap:

More things to design, all under the same design-system lock:

• Slides and pitch decks
• Documents and one-pagers
• Wireframes and UI mockups
• Diagrams and flowcharts
• HTML email
• Résumés and fliers
• Color + type pairing explorations
• Research summaries as designed artifacts
• Animation and 3D object experiments

Platform (Phase 4): a hosted version with accounts, shareable project links, and a hosted MCP endpoint so any agent anywhere can use it without local setup.

Export suite (Phase 5): one-click export to a deployable site, PDF, PPTX, and direct deploy targets, so a finished design leaves the canvas as a real artifact.

Quality harness (Phase 7): a golden suite of design tasks scored by a vision judge, run continuously, so every change to the prompts or gates has to prove it made the output more beautiful, not just different.

The rule for all of it stays the same: whatever the output type, the design system is law, the gates verify the result, and any agent can be the brain.

License

MIT. See LICENSE.