Claude chat or Claude Code for design work

What the chat app is good for

Speed and looking. You describe a card, a hero or a small tool, ask for one self-contained HTML file, and see it rendered beside the conversation. Nothing is installed. It is the right place to find a look: try three type sizes, two accents, a different layout, each in a message.

Its limit is the single file. There is no project folder, no build, no real image files unless you describe or attach them, and a long conversation of revisions gets harder to keep consistent. See Claude artifact prompts for how to write for it.

What Claude Code is good for

Everything that has files. A site with routes, a component inside an existing app, a restyle across forty components, a dashboard on typed data. Claude Code can use your content and images because it reads the folder, and it can run the build and the tests to check its own work. Rules in CLAUDE.md carry from one session to the next.

It asks more of you: a terminal, a project folder, and the habit of reading a plan before approving it.

Pick by the result you need

• A sketch to react to, today: chat.
• One small tool or card to share as a page: chat.
• A site you will deploy: Claude Code.
• A change to code that already exists: Claude Code.
• Anything that uses your own images or data files: Claude Code.
• A template pulled from a library over MCP: Claude Code, as in the MCP guide.

Moving a chat draft into a project

A common route is to settle the look in chat and build for real in Claude Code. Save the HTML file from the chat into the project folder as a reference. Then ask Claude Code to read it, extract the values into tokens and rebuild it as components in your stack. Say that the draft is the source for the look only. Its structure, a single file with inline script, should not survive the move. The prompt below does this.

A prompt for moving a chat draft into Claude Code

There is a file at ./reference/draft.html. It is a one-file sketch I made in the Claude chat app. Treat it as the source of truth for the look, and for nothing else.

Step 1, read it and report. List every colour, font size, weight, spacing value, radius and duration it uses, and the sections it contains in order. Point out values that are nearly the same, such as 15px and 16px, and propose one. Write no code yet and wait for my OK.

Step 2, set up. Vite + React + TypeScript, plain CSS. Put the agreed values in src/styles/tokens.css as custom properties. Write CLAUDE.md with those tokens and these rules: components use tokens only; no UI library; no new dependency without asking.

Step 3, rebuild. One component per section of the draft, in src/components. Do not copy the draft's markup or its inline script; rewrite both for React. Replace its placeholder text with the copy in ./copy.md and its grey boxes with the images in ./images.

Keep the draft's motion exactly: same properties, same durations. With prefers-reduced-motion, none of it runs.

Phones: the draft was only designed at about 1200px wide. Below 720px use one column, 16px margins and a headline no larger than 44px, and tell me what else you had to decide.

Step 4, check. Run npm run build. Open the page at 390px and 1440px next to the draft and list every visible difference.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to prompt Claude for designThe working method for design work with Claude and Claude Code: brief, plan first, build, run and look, then correct with specifics.
• Design rules in CLAUDE.mdHow to keep design rules in a CLAUDE.md file so every Claude Code session follows them, with an example rules block to copy.
• Connecting uberdesigner to Claude Code over MCPHow to add the uberdesigner MCP server to Claude Code, sign in, and what to ask once the template library is connected.

• Artifacts
• Whole sites
• Landing pages