Using Wafel in Claude Design

Start every product design in Claude Design from the Wafel design system. Name real components in the brief, ask for every state before handing off, and check colour and contrast yourself.

Start from the Wafel design system

The Wafel design system in Claude Design carries the product's tokens, its React components and this site's usage guidance. The components are synced from appsignal-server, and the tokens are read from the same pinned commit as this site. A design started from it uses the product's real buttons, tables and messages rather than generic stand-ins.

Do not build a separate system from screenshots, a Figma file or a docs page. A system built from those sources is an approximation of the product, and Claude Design's output is only as good as the system it starts from.

Icons are Font Awesome Free in place of the product's Pro set. A design shows which icon goes where. It does not match the product's icons exactly.

Write the brief

• State the goal, the audience and the content. Say which mode the reader is in: triaging a problem, or researching a question.
• Name real components and real pages. "Use Button and a table in a card, laid out like the alert settings page" constrains the output. "A clean settings page" does not.
• Use real production values. Give a six-digit count, a three-line error title and an empty result. A layout that only works with tidy sample data fails in the product.
• Say the target width early. Responsive behaviour is not designed unless it is asked for.

Iterate

• Layout first, then interaction, then polish.
• Ask for two or three variations when the direction is unclear, then refine one.
• Use chat for structure, comments for targeted changes. Edit the canvas directly for position and size.
• Save the project before changing direction. Claude Design has no version history.

Check before handing off

• Ask for every state: loading, empty and error, and a list that pages. The product has components for each: LoadingState, EmptyState, ErrorState and LoadMoreButton.
• Check the colours are semantic tokens. A colour no semantic token covers is a missing semantic name. Raise it rather than accepting a palette step or a literal value.
• Measure contrast with a tool. Ask Claude for an accessibility review, but do not take a ratio it reports on trust.

Hand off to Claude Code

Use Export, then "Hand off to Claude Code". The bundle carries the design files and the chat, so record design decisions in the chat as you make them. The coding agent reads them there.

Limits

• No Figma export. Work goes from Claude Design to code, not back into the Figma library.
• No version history. See "Iterate".
• Component previews cannot be reached with the keyboard.