Claude builds the block.
This gives it an art director.

An MCP server that plans what a block actually needs, generates the raster imagery through GPT, and then measures the result against a design canon — so what ships stops looking generated.

The problem

A generated page is recognisable in one glance

Not because it is sloppy. Because it is thin. A model assembles a block out of bare markup — vector shapes, borders, padding — and reaches for an emoji when it needs an icon. A designer fills the block with material.

Emoji instead of icons. Drawn by the system font, so the same page looks different on every platform, in nobody's style.

Gradient poured over the headline. A ready-made effect standing in for typographic hierarchy.

Blurred colour blobs for a background. Atmosphere instead of texture; says nothing about the product.

Three identical cards in a row. Then the next section is three more. Every section carries the same rhythm.

Zero depth. No grain, no overlap, no layering — one flat plane pretending to be a page.

Body copy below 16px. Readability quietly traded for a tidy-looking grid.

The catalogue is deliberately specific — 21 named patterns, each with a replacement. A general instruction to "avoid clichés" gets ignored; a named pattern with a named alternative does not. Removing a pattern without replacing it only makes the block thinner.

46
0
emoji on a page it audited
11
0
type sizes below 16px
17 / 23
on scale
spacing values off the step
1.11:1
1.26:1
panel against background

Measured on vault.bro.tj before and after a pass. Numbers, not impressions — the audit reads the stylesheet and computes contrast, measure and step itself.

Pipeline

Plan first, draw second, measure last

A designer does not start with a picture. Each stage is a separate tool, so you can enter the pipeline wherever your project already is.

1

Board

Tokens, type pairing, component specs, and how this site creates depth.

2

Story

The page as scenes — each with its own layout, so sections stop repeating one template.

3

Plan

What this block is missing, why, with a brief and a placement for every item.

4

Make

Raster generated as one series off a single reference frame, then verified on disk.

5

Accept

Two passes: what reads as machine-made, and what breaks a measurable rule.

Tools

Fifteen tools, each named for its job

Codex already exposes itself over MCP, but as a single tool described as "Run a Codex session" — no assistant will reach for that when it needs a background image. Every capability here says what it is for.

ToolWhat it does
gpt_design_boardstyle tile: tokens, type, components, depth
gpt_design_storythe page as scenes with alternating layouts
gpt_design_planwhat a block is missing, split into raster and vector
gpt_design_makeproduces the raster items as one series
gpt_slop_auditwhat reads as machine-made, and how thin the block is
gpt_design_critiquemeasured values against the canon: measure, contrast, step
gpt_imageone raster image, verified: signature, size, aspect
gpt_image_seriesseveral images in one session so the style holds
gpt_reviewan independent second pass over your diff
gpt_aska one-off question about the project, read-only
gpt_agent_start · _send · _lista long-lived agent that keeps the project in context
gpt_docpptx, xlsx, pdf, docx through the Codex plugins
gpt_statusdiagnostics: is Codex found, does the session start

Two modes ship as MCP prompts and appear as slash commands: designer walks the whole pipeline and will not let you skip acceptance; second-opinion makes you verify every finding against the code before believing it.

Install

Two steps

Needs Node.js 18+ and the OpenAI Codex CLI, signed in. Everything runs on your machine; this site only serves the package.

1 — Install the package

npm i -g https://design-board.bro.tj/claude-design-board-1.1.0.tgz

2 — Register it with Claude

claude mcp add design-board --scope user -- \
  node <global node_modules>/claude-design-board/mcp-server.js

Then ask it for gpt_status — it reports whether Codex was found and whether a session starts.

Limits — honestly

What it needs and what it costs

Worth knowing before you install, not after.

It is a wrapper, not a model. The imagery and the art direction come from GPT through your own Codex CLI. No Codex, no output — and your ChatGPT usage limit is the ceiling.

Raster is not instant. One image is a separate Codex session, typically one to three minutes. Generate a set in a single call rather than one at a time.

Codex marks mcp-server as deprecated. It works today and is still the only MCP entry point, but it may move. Re-check after a Codex upgrade.

The art director will refuse to add decoration. On three separate runs it returned a plan with no raster at all, saying the block did not need any. That is the point — but it means this is not an image generator with extra steps.

Download

MIT, runs locally, no account on this site.

claude-design-board 1.1.0 (.tgz)