Obyčejný obrázek a dobře napsaný text. Claude 3.5/3.7 Sonnet, který Claude Code pohání, má naprosto špičkové vidění (vision capabilities). kombinace screenshotů, strukturovaného Markdownu a designu tokenů.
Screenshoty wireframes, čisté obrázky, (PNG/JPG) jako vstup
Vytvoř si v projektu složku (např. docs/wireframes) a nahraj tam screenshoty.
Příkaz: Podívej se na obrázek docs/wireframes/dashboard.png a nakóduj mi vizuální strukturu této stránky v HTML a Tailwind CSS.
(Claude obrazovku analyzuje, pochopí rozložení (kde je sidebar, kde grid produktů) a napíše rovnou moderní responzivní kód.)
e:\_code\diversity-promotion\dp-sales-cockpit\
#Design Tokenů
- AI má tendenci si vymýšlet barvy a mezery, pokud mu nedáš jasné mantinely. Vytvoř hned na začátku jednoduchý soubor styleguide.md nebo design-tokens.css.
- Nadefinuj tam primární barvy (HEX kódy), fonty, zaoblení tlačítek (border-radius) a logiku mezer.
- Příkaz: Při kódování jakékoliv komponenty se striktně drž pravidel v souboru docs/styleguide.md.
#Popis chování a logiky (UX)
Obrázek AI neřekne, co se stane po kliknutí. Zde přichází na řadu strukturovaný textový popis. Místo složitých diagramů funguje nejlépe obyčejný odrážkový seznam v Markdownu (např. ux-flows.md).
Definuj stavy: Co se stane při hoveru? Jak vypadá prázdný stav (empty state), když v košíku nic není? Jak vypadá chybová hláška?
Definuj akce: [Kliknutí na ‚Přidat do košíku‘] -> Otevře se postranní off-canvas menu -> Ikona košíku v hlavičce se animuje a zvýší se číslo.
Když pak Claude Code požádáš o naprogramování logiky, prostě ho odkážeš na tento soubor.
#Pravidlo „Mobile-first“ struktury
vždy Clauda instruuj k mobile-first přístupu. Popiš mu slovy (nebo ukaž na dalším screenshotu), jak se má složitý desktopový widget chovat na mobilu.
Příklad do promptu: Prohlédni si desktopový wireframe. Při kódování začni mobilní verzí. Ten velký datový stůl se na mobilu zlomí do podoby karet (cards).
/tvuj-projekt
├── /docs
│ ├── /wireframes
│ │ ├── 01_homepage_desktop.png
│ │ └── 02_cart_mobile.png
│ ├── styleguide.md # Barvy, fonty, paddingy
│ └── ux-flows.md # Co se stane když uživatel klikne na X
└── /src # Sem bude Claude generovat kód
