Anleitung

Claude Code und Cursor UI bauen lassen, die zu einer Website passt

Bitte einen Coding-Agenten um „eine aufgeräumte Einstellungsseite“, und du bekommst eine generische. Gib ihm eine DESIGN.md von einer Website, die dir gefällt, und er baut mit den echten Farben, der Typo-Skala, den Radien und den Komponentenregeln dieser Website, statt zu raten.

Diese Anleitung zeigt den ganzen Ablauf in Claude Code und Cursor, mit der Datei von Linear aus der Galerie als Beispiel.

Geschrieben für Entwickler, die mit einem KI-Coding-Agenten bauen. Aktualisiert am .

Das bekommst du

  • Eine DESIGN.md einer Website, die dir gefällt, gespeichert in deinem Repo, wo dein Agent sie lesen kann.
  • Ein kurzer Verweis in CLAUDE.md für Claude Code und eine Projektregel für Cursor, damit jede UI-Aufgabe bei der Datei startet.
  • Prompts, die die Tokens beim Namen nennen, damit der Agent exakte Werte nutzt statt ungefährer Schätzungen.
  • Eine schnelle Prüfroutine, die die Stellen findet, an denen der Agent abgewichen ist.

Warum eine DESIGN.md besser ist als ein Screenshot

Ein Screenshot gibt deinem Agenten Pixel, aus denen er raten muss. Die Stimmung trifft er ungefähr, die Werte nicht: ein Blau, das nah dran ist, ein Radius, der ein paar Pixel daneben liegt, eine Schrift, die er gewählt hat, weil sie ähnlich aussah. Jeder neue Screen rät erneut, und die App driftet langsam auseinander.

Eine DESIGN.md gibt ihm die exakten Werte. Die Datei folgt der DESIGN.md-Spezifikation von Google: Das YAML-Frontmatter oben enthält die Tokens (Hex-Farben, Schriftfamilien und -größen, Radien, Komponenten), und das Markdown darunter erklärt, wohin jeder Wert gehört. Neu im Format? Lies, was eine DESIGN.md ist.

Schritte

  1. Wähl eine Website, deren Oberfläche sich wie das anfühlt, was du baust

    Produkt-Screens mit ähnlicher Dichte funktionieren besser als eine Landingpage mit großem Hero. Wenn du ein Dashboard baust, nimm ein Produkt, das eins hat. Schau zuerst in die DESIGN.md-Galerie: Vielleicht ist die Datei schon da.

  2. Hol dir ihre DESIGN.md

    Kopiere sie von der Galerieseite oder füge die URL auf der Startseite von Design Extractor ein und starte eine Pro-Extraktion. Pro wertet die wichtigsten Seiten der Website aus, und eine Extraktion dauert mindestens eine Minute.

  3. Speichere sie als DESIGN.md im Stammverzeichnis deines Repos

    Leg sie neben README.md und AGENTS.md und committe sie, damit jeder Branch und der Agent jedes Teammitglieds dieselbe Datei liest.

  4. Verweise deinen Agenten darauf

    Füge in CLAUDE.md einen kurzen Verweis für Claude Code hinzu oder lege eine Projektregel für Cursor an. Die Blöcke findest du unten.

  5. Formuliere UI-Wünsche in den Begriffen der Datei

    Nenne Tokens und Komponenten in deinem Prompt (primary, body-md, ein Button-Rezept) und bitte den Agenten, jeden Wert aufzulisten, den er nicht finden konnte, statt einen zu erfinden.

  6. Prüfe das Ergebnis gegen die Datei

    Prüfe Farben, Schriften, Radien und Zustände gegen die DESIGN.md, bevor du die Änderung übernimmst.

Praxisbeispiel: Linear

Die DESIGN.md von Linear in der Galerie stammt aus einer Pro-Extraktion von linear.app, die 5 Seiten erfasst hat. Sie enthält 17 Farb-Tokens, 16 Schriftstile und 12 Radien. Damit arbeitet dein Agent.

Farben

Typografie

hero-displayDesign is intelligence made visibleInter Variable72px / 510 / 1
display-lgDesign is intelligence made visibleInter Variable64px / 510 / 1
display-mdDesign is intelligence made visibleInter Variable48px / 510 / 1
heading-lgDesign is intelligence made visibleInter Variable32px / 590 / 1.15
title-mdDesign is intelligence made visibleInter Variable20px / 590 / 1.35
body-lgDesign is intelligence made visibleInter Variable17px / 400 / 1.6

Formen

xs · 2px
sm · 4px
sm-2 · 4.4625px
md · 5px
md-2 · 6px
lg · 8px
lg-2 · 9px
xl · 12px

Die ersten 12 Farben, 6 Schriftstile und 8 Radien von Linear, gerendert aus der DESIGN.md. Klick auf ein Farbfeld, um den Hex-Wert zu kopieren.

Der Anfang der Datei, gekürzt: 8 von 17 Farben, 2 von 16 Schriftstilen und 4 von 12 Radien. Das sind die exakten Werte, die der Agent übernimmt.
---
name: Linear
colors:
  primary: "#5E6AD2"
  canvas: "#08090A"
  surface: "#121414"
  surface-raised: "#1C1C1F"
  ink: "#F7F8F8"
  ink-secondary: "#D0D6E0"
  muted: "#8A8F98"
  subtle: "#62666D"
typography:
  hero-display:
    fontFamily: Inter Variable
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.584px
  body-lg:
    fontFamily: Inter Variable
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: normal
rounded:
  xs: 2px
  sm: 4px
  sm-2: 4.4625px
  md: 5px
---

Extrahiert aus der öffentlichen Website von Linear, keine offiziellen Markenrichtlinien. Die vollständige DESIGN.md von Linear lesen

Wie die Datei den Look beschreibt

Der Text unter den Tokens sagt dem Agenten, wohin jeder Wert gehört. Er beginnt so:

Linear's marketing surface reads like the product itself: a near-black Void canvas (canvas, #08090A) with charcoal panels stacked a half-step lighter, fenced by 1px hairlines rather than shadows. The mood is engineering-grade and restrained. Realistic product UI mockups, a customer logo strip and Berkeley Mono micro-labels ("FIG 0.1") stand in for illustration. Nothing shouts; the page earns attention through precision.

Regeln, die die Datei deinem Agenten gibt

Der Abschnitt Do's and Don'ts macht aus dem Look Regeln. Die ersten davon:

Empfohlen

  • Reserve Linear Indigo (primary, #5E6AD2) for focus and interactive accents. Every measured focus state is a 1px solid #5E69D1 outline with a 2px offset.
  • Shape every button as a pill with rounded.full. button-ghost, button-ghost-2 and button-ghost-3 all measure 9999px.
  • Keep control heights on the observed ladder: button-ghost and button-ghost-2 at 32px, button-ghost-4 at 29px, button-ghost-3 at 24px, and sidebar-nav-item and the icon buttons at 28px.

Vermeiden

  • Don't use weights other than 400, 510 and 590, and never substitute a static 600 or 700 for heading-lg or title-md.
  • Don't add a third typeface. Inter Variable carries everything, and Berkeley Mono is limited to micro figure labels.
  • Don't use accent-blue, danger or success for marketing chrome; they belong inside product mockups.

Komponenten

Die Datei enthält 30 Komponenten-Rezepte in HTML und CSS. 13 davon haben die Prüfung gegen die Live-Seite bestanden; für die anderen nennt die Datei, warum sie nicht bestanden haben oder nicht geprüft werden konnten. Die ganze Datei hat etwa 276.000 Zeichen, das meiste davon Rezepte. Deshalb verweist du deinen Agenten auf sie, statt sie in Prompts einzufügen.

Verweise deinen Agenten auf die Datei

Die meisten Agenten öffnen DESIGN.md nicht von selbst. Ein paar Zeilen in den Anweisungen, die sie ohnehin laden, lösen das. Füge in Claude Code Folgendes zur CLAUDE.md im Stammverzeichnis deines Repositorys hinzu:

## Design
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

Lege in Cursor eine Projektregel an. Speichere das hier als .cursor/rules/design.mdc; alwaysApply lädt sie bei jeder Anfrage im Projekt:

---
description: Follow DESIGN.md for every UI change
alwaysApply: true
---
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

Nutze einen Verweis, statt die Datei in die Anweisungen einzufügen. Eine Pro-DESIGN.md enthält ein Rezept für jede Komponente, die sie von der Website übernommen hat. Sie ist also lang, und dein Agent braucht sie nur für UI-Arbeit.

Prompts, die die Tokens nutzen

Nenne die Datei und ihre Tokens, und gib dem Agenten einen Ausweg statt eines Grundes zu raten. Diese Prompts wurden für diese Anleitung mit den echten Token-Namen von Linear geschrieben; setz deine eigene Aufgabe ein.

Claude Code

Build a pricing page with three plan cards. Follow DESIGN.md:
- use primary (#5E6AD2) only where the file says it belongs
- set headings in hero-display and body copy in body-lg
- reuse the button-ghost recipe for the plan buttons, with its hover and focus states
- start the plan cards from the card recipe
List any value you could not find in DESIGN.md instead of inventing one.

Cursor

@DESIGN.md Restyle the settings form in src/app/settings to match this file.
Take colors, type and radii from the tokens and inputs and buttons from the component recipes.
Keep the existing layout and logic, and list any value you could not find in the file.

In Cursor hängt @DESIGN.md die Datei an den Chat an. Das hilft zusätzlich zur Regel, wenn es bei der Aufgabe vor allem um die Optik geht.

Wie sollte das Ergebnis aussehen? Ungefähr wie diese Karte, die diese Seite direkt aus den Tokens zeichnet. Sie zeigt, was die Werte bewirken, nicht, was ein Agent erzeugt hat.

Plane das nächste Release

Jede Aufgabe, jedes Datum und jede Entscheidung an einem Ort, damit das Team pünktlich liefert.

LoslegenVertrieb kontaktieren
Illustration, von dieser Seite aus den Tokens von Linear gezeichnet: canvas #08090A, ink #F7F8F8, primary #5E6AD2 und button-ghost.rounded 9999px. Sie ist keine Ausgabe eines Coding-Agenten, und die Schrift wird nur angezeigt, wenn dein Gerät sie hat.

Prüfe, was der Agent gebaut hat

  • Farben. Durchsuche den Diff nach Hex-Werten. Jeder davon sollte in der DESIGN.md stehen. Ein neuer bedeutet meist, dass der Agent geraten hat.
  • Schriften. Viele Marken nutzen kommerzielle Fonts, die du nicht ausliefern darfst. Der Abschnitt Typography der Datei nennt meist einen Open-Source-Ersatz; achte darauf, dass der Agent genau diesen geladen hat und keinen beliebigen Fallback.
  • Radien und Abstände. Buttons und Karten sollten die Rundungs-Tokens der Datei nutzen, nicht überall einen Standardwert wie 8px.
  • Zustände. Hover- und Fokus-Stile sind Teil jedes Komponenten-Rezepts. Geh mit der Tab-Taste durch die Seite und prüfe den Fokusring.
  • Markierte Rezepte. Wenn die Datei ein Rezept als „flagged“ markiert, ist seine Geometrie eine Annäherung. Vergleiche diese Komponente mit der echten Website.

Wenn du die DESIGN.md von Hand bearbeitest, prüfe sie mit dem kostenlosen DESIGN.md-Validator, bevor dein Agent sie wieder liest.

FAQ

Website-Look in Claude Code und Cursor nachbauen: Fragen

Kurze Antworten auf das, was Leute fragen, bevor sie es ausprobieren.

Nein. Speichere sie einmal als DESIGN.md im Stammverzeichnis deines Repositorys und verweise darauf in CLAUDE.md für Claude Code oder in einer Projektregel für Cursor. Der Agent liest sie, wenn eine Aufgabe die Oberfläche betrifft. Eine Pro-DESIGN.md mit Komponenten-Rezepten ist lang, deshalb hält ein Verweis deine Prompts kurz.

Nein, und das ist auch nicht das Ziel. Der Agent bekommt die Tokens der Website (Farben, Schrift, Radien), ihre Komponenten-Rezepte und ihre Regeln. Dein Layout, deine Inhalte und deine Features bleiben deine eigenen. Rezepte, die die Prüfung gegen die Live-Website nicht bestanden haben, sind in der Datei als „flagged“ markiert. Behandle sie als nahe Annäherungen.

Ja. Jeder Agent, der Dateien in deinem Repository lesen kann, kann eine DESIGN.md nutzen. Verweise darauf in den Anweisungen, die dieser Agent ohnehin liest, etwa AGENTS.md oder .github/copilot-instructions.md, oder nenne die Datei in deinem Prompt.

Ja. Jede Galerieseite enthält die vollständige DESIGN.md zum Kopieren. Die Dateien in der Galerie sind aus der öffentlichen Website der jeweiligen Marke extrahiert, keine offiziellen Markenrichtlinien. Für eine Website, die nicht in der Galerie ist, füge ihre URL auf der Startseite ein und starte eine Extraktion.

Hol dir eine DESIGN.md der Website, die dir gefällt

Füge eine beliebige öffentliche URL ein. Eine Pro-Extraktion wertet die wichtigsten Seiten der Website aus und liefert eine DESIGN.md, die dein Agent lesen kann.

DESIGN.md aus jeder Website erstellen

Verwandte Anleitungen

Alle DESIGN.md-Anleitungen ansehen