Jak sprawić, by Claude Code i Cursor budowały UI pasujące do strony

Dlaczego DESIGN.md jest lepszy niż zrzut ekranu#

Kroki#

1. 1

   Wybierz stronę, której interfejs przypomina to, co budujesz

   Ekrany produktu o podobnej gęstości sprawdzają się lepiej niż strona docelowa z dużym hero. Jeśli budujesz dashboard, wybierz produkt, który go ma. Najpierw zajrzyj do galerii DESIGN.md: plik może już tam być.

2. 2

   Wygeneruj jej DESIGN.md

   Skopiuj go ze strony galerii albo wklej URL na stronie głównej Design Extractor i uruchom ekstrakcję Pro. Tryb Pro bada kluczowe podstrony witryny, a ekstrakcja trwa co najmniej minutę.

3. 3

   Zapisz go jako DESIGN.md w katalogu głównym repozytorium

   Umieść go obok README.md i AGENTS.md i zacommituj, aby każda gałąź i agent każdego członka zespołu czytali ten sam plik.

4. 4

   Wskaż go agentowi

   Dodaj krótkie odwołanie w CLAUDE.md dla Claude Code albo regułę projektu dla Cursor. Bloki znajdziesz poniżej.

5. 5

   Proś o UI w języku pliku

   Nazywaj w prompcie tokeny i komponenty (primary, body-md, receptura przycisku) i poproś agenta, aby wypisał każdą wartość, której nie znalazł, zamiast ją wymyślać.

6. 6

   Porównaj wynik z plikiem

   Zanim zaakceptujesz zmianę, sprawdź kolory, fonty, zaokrąglenia i stany względem DESIGN.md.

Przykład w praktyce: Linear#

---
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
---

Wskaż plik agentowi#

## 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.

---
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.

Prompty, które używają tokenów#

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.

@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.

Przejrzyj to, co zbudował agent#

• Kolory. Przeszukaj diff pod kątem wartości hex. Każda powinna być w DESIGN.md. Nowa zwykle oznacza, że agent zgadywał.
• Fonty. Wiele marek używa komercyjnych fontów, których nie możesz wdrożyć. Sekcja Typography pliku zwykle podaje otwartoźródłowy zamiennik; upewnij się, że agent wczytał właśnie go, a nie przypadkowy font zastępczy.
• Zaokrąglenia i odstępy. Przyciski i karty powinny używać tokenów zaokrągleń z pliku, a nie domyślnej wartości, takiej jak wszędzie 8px.
• Stany. Style hover i focus są częścią każdej receptury komponentu. Przejdź przez stronę klawiszem Tab i sprawdź obwódkę fokusu.
• Oznaczone receptury. Jeśli plik oznacza recepturę jako flagged, jej geometria jest przybliżeniem. Porównaj ten komponent z prawdziwą stroną.

Jeśli edytujesz DESIGN.md ręcznie, sprawdź go darmowym Walidatorem DESIGN.md, zanim agent znowu go przeczyta.

Pliki użyte w tym poradniku#

Każda z tych stron galerii zawiera pełny DESIGN.md do skopiowania do repozytorium, z paletą i próbkami typografii.

• 
  Oprogramowanie i SaaS · Productivity & Notes

  Linear

  System projektowania Linear to interfejs produktu nastawiony przede wszystkim na ciemny motyw, o wysokiej gęstości informacji, stworzony z myślą o zespołach inżynierskich. Paleta powierzchni opiera się na niemal czarnych tłach (#08090a, #0f1011) oraz warstwowych ciemnych szarościach, które odróżniają pasek boczny, karty i panele. Typografia opiera się wyłącznie na Inter Variable, z precyzyjnym ujemnym odstępem między literami przy dużych rozmiarach nagłówków, a do kodu w tekście używany jest Berkeley Mono. Język zaokrągleń jest celowo niewielki (dominuje 2–6 px), a kształty pigułki zarezerwowano dla odznak i znaczników statusu. Elewację wyrażają subtelne, 1-pikselowe obramowania wewnętrzne oraz cienie o niskiej przezroczystości, a nie dramatyczne warstwowanie. Główny kolor przycisków wezwania do działania to charakterystyczny dla Linear indygo (#5e6ad2), używany na przycisku Sign Up i kluczowych linkach.

• 
  Finanse i fintech

  Stripe

  Strona główna marketingowa Stripe opiera się na ściśle kontrolowanym systemie projektowym (HDS — Stripe Design System). Podstawą jest zmienna czcionka „sohne-var” w lekkich wagach (300–400), paleta od głębokiej granatowej do indygo z kolorem marki #533afd (Stripe Indigo) jako punktem odniesienia oraz charakterystyczne, rozciągnięte na całą szerokość spektralne tło sekcji hero. Komponenty mają niewielkie zaokrąglenia (4–6 px), płaskie do minimalnych cienie i układ oparty na siatce odstępów o podstawie 8 px. Ogólny ton jest autorytatywny, a zarazem przystępny: infrastruktura finansowa komunikowana pewną typografią i powściągliwym użyciem koloru.

• 
  Narzędzia deweloperskie i infrastruktura · Developer Tools & IDEs

  Supabase

  Supabase opiera się na systemie projektowym nastawionym przede wszystkim na ciemny motyw, z głęboko czarnym, prawie czarnym tłem (oklch ~0.19) i intensywnym zielonym akcentem marki (#3ecf8e / #3fcf8e). Układ tworzy responsywna siatka kart z funkcjami. Do nagłówków używany jest Manrope, a do tekstu podstawowego i elementów interfejsu Inter. Wszystkie konteksty monospace i kod obsługuje Source Code Pro. System kolorów oparty jest na niestandardowych właściwościach oklch z semantycznym nazewnictwem. Karty mają zaokrąglenie 12px i subtelne obramowanie, a przyciski 6–8px. Ogólna gęstość jest umiarkowana, a podstawą odstępów jest siatka 8px.

Przeglądaj wszystkie przykłady DESIGN.md