Claude Code design: prompts, markdown twins and design.md

Claude Code reads files and URLs, remembers a design.md per project, and can install skills. All three are ways to hand it a look instead of describing one every time.

Fastest: paste the prompt

Pick a snippet, set the tool menu to Claude Code, press Copy prompt, paste into the session. The prefix tells it to use plain CSS and keep the class names. Add one line about which file and which element.

Better: let it read the markdown

Claude Code can fetch a URL. Say:

Read https://designforai.dev/snippet/btn-041.md and apply that button style to the primary action in src/components/Checkout.tsx. Plain CSS in checkout.css.

It gets the CSS, the HTML and the prompt in one go, and you skip the clipboard. The full list of markdown twins is at /llms.txt.

Whole-site look: put a style in design.md

Open any page under Styles, copy the prompt, and paste it into your project's design.md under a heading like "Design direction". Every later request in that project inherits it. The CSS seed block on the same page gives you the custom properties to start the stylesheet with:

## Design direction
(paste the style prompt here)

## Tokens
:root { --bg:#0f172a; --fg:#f8fafc; --accent:#7c3aed; --radius:16px; }

Two notes from doing this on real projects. First, keep the direction section short; a 400-word manifesto gets summarised away in long sessions and the tool drifts back to defaults. Second, name what to avoid ("no purple-to-blue gradients, no glow behind the hero") because the defaults are the thing you are fighting.

New in CSS features

Claude Code knows most of the newer CSS but tends to reach for the safe 2019 version unless you ask by name. The prompts on those pages do exactly that: they name the feature, state the browser support, and say what the fallback is. Paste one and it will use anchor-position or @starting-style instead of a JavaScript workaround.

Anthropic's own frontend-design skill

Anthropic publishes a frontend-design skill for Claude Code that pushes it away from generic layouts. It works well with this site: the skill decides the overall composition, a style prompt from here fixes the palette and type, and snippets fill in the components. If you have it installed, run it first, then paste the style.