Claude Code Design: Prompts, Markdown-Zwillinge und design.md

Claude Code liest Dateien und URLs, merkt sich pro Projekt eine design.md und kann Skills installieren. Alle drei sind Wege, ihm einen Look in die Hand zu geben, statt ihn jedes Mal neu zu beschreiben.

Am schnellsten: den Prompt einfügen

Such dir ein Snippet, stell das Tool-Menü auf Claude Code, klick auf Prompt kopieren und füg ihn in die Session ein. Der Vorspann sagt ihm, dass es reines CSS sein soll und die Klassennamen bleiben. Ergänze eine Zeile dazu, welche Datei und welches Element gemeint ist.

Besser: das Markdown lesen lassen

Claude Code kann eine URL abrufen. Sag:

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.

Es bekommt CSS, HTML und Prompt in einem Rutsch, und du sparst dir die Zwischenablage. Die vollständige Liste der Markdown-Zwillinge steht unter /llms.txt.

Look für die ganze Seite: einen Stil in die design.md

Öffne eine beliebige Seite unter Stile, kopiere den Prompt und füg ihn in die design.md deines Projekts ein, unter einer Überschrift wie "Designrichtung". Jede spätere Anfrage in dem Projekt erbt ihn. Der CSS-Seed-Block auf derselben Seite liefert dir die Custom Properties, mit denen das Stylesheet anfängt:

## Design direction
(paste the style prompt here)

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

Zwei Beobachtungen aus echten Projekten. Erstens: Halte den Abschnitt zur Richtung kurz; ein Manifest mit 400 Wörtern wird in langen Sessions weggekürzt und das Tool rutscht zurück in seine Defaults. Zweitens: Nenne, was zu vermeiden ist ("keine Lila-zu-Blau-Verläufe, kein Glow hinter dem Hero"), denn genau gegen die Defaults kämpfst du.

Neu in CSS-CSS-Features

Claude Code kennt das meiste neuere CSS, greift aber gern zur sicheren 2019er-Variante, wenn du nicht beim Namen fragst. Die Prompts auf diesen Seiten tun genau das: Sie nennen das Feature, geben den Browser-Support an und sagen, was der Fallback ist. Füg einen ein, und es nutzt anchor-position oder @starting-style statt eines JavaScript-Workarounds.

Anthropics eigener Frontend-Design-Skill

Anthropic veröffentlicht einen Frontend-Design-Skill für Claude Code, der es von generischen Layouts wegschiebt. Er passt gut zu dieser Seite: Der Skill entscheidet über die Gesamtkomposition, ein Stil-Prompt von hier legt Palette und Schrift fest, und Snippets füllen die Komponenten. Wenn du ihn installiert hast, lass ihn zuerst laufen und füg dann den Stil ein.