✳ claude mods designer

Design a Claude Code mod

A Claude Code mod is a plugin with a function-hooks module. Its hooks run inside Claude Code and change what it does. A hook can rewrite a prompt, block or rewrite a tool call, or redraw a part of the interface. Anthropic introduces mods at Customize Claude Code with mods.

The claude mods designer is a free page for planning a mod before you build it. You draw what the mod shows on a simulated Claude Code terminal, pick the events it hooks, and copy a Markdown spec. Then you give the spec to Claude Code, and it builds the mod.

The terminal

A port of the layout code in Claude Code 2.1.310 lays out the terminal on the page: flexbox, text wrapping, borders and wide characters. A drawing takes the same cells that Claude Code gives it. Each place where a mod can draw sits where Claude Code puts it, at the width it gets. Some of these places are the tool call row, the spinner, the band above the prompt and a pane.

Draw on a site

  1. Drag a component from the palette onto a place on the terminal. This creates a ui.render hook for that place.
  2. Select an element and change its props in the inspector. The props come from the type declarations of Claude Code.
  3. Turn on preview to see hover and focus as the terminal draws them.
  4. Turn on frames to try more than one drawing side by side. You can also copy a drawing from one of the cs mods and start from it.

Keep the drawing of Claude Code

A hook does not have to draw its own tree. It can keep the drawing of Claude Code and change the props it draws from. Pick a prop of the site, for example the word of the spinner, and write its new value.

Hooks that draw nothing

Open the Events tab to hook other events, for example tool calls or prompts. Write what the hook does, how it calls next, and what a person can see when it works. The terminal shows a note for each hook on the row where its effect appears.

The spec

Copy spec or Download .md gives you a Markdown prompt. It names the files to create, each hook with its matcher and how it calls next, and the tree to return for each place you drew. It also says how to check the mod with claude plugin validate and claude plugin test. Here is one hook from a spec for a mod that changes the spinner word:

### Hook 1: `ui.render`

- Matcher: `{ component: 'Spinner' }`
- Behaviour: Swap the spinner word.
- Continuation: Rewrite the input: call `next({ ...e, /* changes */ })` once and return its result.
- On failure: no `.catch`; the engine skips the hook and the chain continues.
- Expected outcome: The spinner reads Brewing while a turn runs.
- Draw site: `Spinner`. `e.props`: `word: string`, `message: string | null`, `suffix: string`, `mode: "requesting" | "responding" | "thinking" | "tool-input" | "tool-use"`
- Rewrite props: `next({ ...e, props: { ...e.props, word: 'Brewing' } })`

Where your design lives

Your draft stays in the local storage of your browser. You need no account, and the draft goes nowhere else. The designer needs a desktop browser.

Open the designer