drobek.app — Marketing & Auth Design Brief — HISTORICAL (SUPERSEDED)

⚠️ STATUS: SUPERSEDED 2026-05-21. Design je teď FINÁL ve formě reálných HTML/JSX prototypů v docs/design/final/. Coding agent NEčte tenhle prompt — implementuje přímo z docs/design/final/ per pravidla v docs/design/CODING-AGENTS.md.

>

Tenhle dokument je historický artefakt: prompt který se použil pro generaci finálního designu (share https://api.anthropic.com/v1/design/h/dSzUQzB6-IwvT5D593sJWA). Drží se v repu pro:

>

- Audit (jak vznikl design + jaké constraints jsme definovali) - Full rebrand workflow: pokud někdy chceme totálně přepsat brand, editujeme tenhle prompt, regenerujeme přes Claude Design, swapneme docs/design/final/

>

Pro denní práci: ignoruj. Coding agent: docs/design/CODING-AGENTS.md + docs/design/final/. Per-component / per-page deviation: STOP a zeptej se uživatele.

Original prompt content (historical)

Účel dokumentu: kompletní, copy-paste-ready prompt pro AI design generátor (Claude Design / Stitch / frontend-design skill). Vstupem je tento soubor; výstupem jsou hotové .tsx komponenty + Tailwind config patch v apps/web/app/.

>

Jak používat: viz sekce „How to run this brief" na konci. Pokud chceš rebrand, edituj sekci Brand DNA a regeneruj — všechno ostatní zůstává.

0. Role & context

Jsi senior product designer + senior frontend engineer. Specializuješ se na minimalistický developer-tooling marketing site (Linear, Vercel, Stripe, Resend, Anthropic, Railway jsou benchmarky). Píšeš production React + Tailwind kód — ne mockupy, ne Figmu, ne placeholdery typu „TODO image".

Stavíš public web pro drobek.app — agent-native planner a knowledge graph pro AI agenty (Claude Code, Cursor, custom agents).

Klíčový product narrative (musí prostupovat copy a vizuálem):

• Jediné write rozhraní je MCP server. Lidi nepíšou tasky ručně, agenti je

navrhují přes MCP volání.

• Lidi mají read-only graph view a approval gates — schvalují plány,

ne psaní jednotlivých tasků.

• GitHub / GitLab = ground truth pro „done". Žádné „mark as done" tlačítko;

task se uzavře, když PR mergeuje a CI prošla.

• Cílová persona: senior dev / tech lead používající ≥ 1 AI coding agenta

v denodenní práci. Není to no-code nástroj.

Hlasový tón (uplatni v každém H1, sub a CTA):

• Direct, confident, technical. „Agents plan. Humans approve." > „We help you…"
• Krátké věty. Aktivum nad pasivem.
• Žádné emoji v UI, žádné „Powered by AI" badge, žádné stock photo lidí.
• Code snippets v copy = vítané, působí kompetentně.

1. Brand DNA

Typografie, hlas, layout a visual motif jsou závazné. Color paletu si navrhuješ sám podle požadavků níže — využij barevnou psychologii pro developer-tooling segment.

1.1 Color palette — TY NAVRHUJEŠ

Nepoužívám předpřipravené hex hodnoty. Tvůj úkol: navrhnout kompletní dark + light paletu, která respektuje níže uvedené principy, a vrátit ji jako tabulku tokenů + zdůvodnění proč.

1.1.1 Brand personality (ze které vycházíš)

• Technical & competent — uživatel je senior dev. Paleta nesmí vypadat

jako consumer SaaS pro non-tech publikum.

• Calm & focused — uživatel kouká na graf práce 30+ minut v kuse. Žádné

křiklavé saturace, žádný „dashboard rainbow".

• Trustworthy & precise — produkt audituje agenty. Paleta musí evokovat

spolehlivost, ne hravost.

• Modern but not trendy — nesmí být „bro-startup" neon glow ani retro.

Cíl: čistá, ale ne sterilní (jako Linear, Vercel, Railway, ne jako Notion AI).

• Quietly premium — nízká vizuální agrese, vysoká kvalita detailů.

„Lehkost" v tom smyslu, že paleta nezavalí pozornost — UI ustupuje obsahu.

1.1.2 Color psychology — co má každý token komunikovat

Navrhni hue / saturation / lightness tak, aby ladily s psychologickou funkcí každého tokenu. Krátké guideposty (ne příkaz, ale rámec):

1.1.3 Tvrdé constraints (musí splnit)

• Dark mode = default, light mode = kompletní mirror se stejnými token jmény.

Tokeny definuj jednou; varianty řeší CSS custom properties + .dark class.

• Background v dark mode: NE pure black (#000) a NE pure white v light.

Pure černá vyvolává oční únavu při dlouhém čtení; off-shade je standardem (Linear, Vercel, Anthropic).

• WCAG AA contrast:

- text-primary na bg-base ≥ 7:1 (AAA) v obou módech - text-secondary na bg-base ≥ 4.5:1 - text-tertiary na bg-base ≥ 3:1 (jen meta/disabled) - CTA button label na CTA background ≥ 4.5:1

• Stavy musí být colorblind-distinct — primary, secondary a error tokeny

rozlišitelné při deuteranopii (most common). Otestuj v simulátoru; pokud blízko, dopni lightness rozdíl nebo ikonografií.

• Saturation ceiling: žádný token nemá chroma > 70 v OKLCH. Cíl je

„premium", ne „arcade".

• Paleta je závodní 5 + 3 — max 5 background/text grade tokenů, max 3

semantic accent tokeny (primary / secondary / error). Plus volitelný decorative companion pro gradient. Žádné „brand-purple, brand-pink, brand-coral".

1.1.4 Co máš vrátit (deliverable pro §1.1)

Když exekuuješ tento brief, začni odpovědí strukturou:

## Návrh palety

**Rationale (3–5 vět):** [proč ses takhle rozhodl — jaký hue family, proč
to ladí s product narrative]

### Dark mode

| Token     | OKLCH      | Hex  | Použití         |
| --------- | ---------- | ---- | --------------- |
| `bg-base` | oklch(...) | #... | page background |

| ... (zbytek tokenů, viz seznam níže)

### Light mode

[stejná tabulka]

### Contrast check

| Combo                          | Ratio | Pass?    |
| ------------------------------ | ----- | -------- |
| text-primary on bg-base (dark) | x.x:1 | AAA / AA |

| ... všechny kritické kombinace

Token seznam (oba módy musí mít všechny):

• bg-base — page background
• bg-elevated — cards, surfaces, modal
• bg-elevated-2 — hover / nested elevated
• bg-code — code snippet panel (drží dark surface i v light mode kvůli čitelnosti syntaxe)
• border-subtle — dividers (1px)
• border-strong — active input, focused outline
• text-primary — headings, primary body
• text-secondary — sub-headings, captions
• text-tertiary — disabled, placeholder
• accent-primary — primary CTA, „ready" state, primary link hover
• accent-primary-2 — hover/active state primary
• accent-secondary — „claimed/in-progress", warning
• accent-error — „needs review", failed, error toast
• accent-companion — gradient partner pro illustrations (volitelný; pokud

nepoužiješ, vysvětli proč)

Po schválení návrhu palety pokračuj generováním tailwind.config.ts a tokens.css s těmito hodnotami a teprve potom komponentami. Žádné hard-coded hex v komponentách — všechno přes Tailwind tokens.

1.2 Typography

• Headings: Inter (variable) — weight 500 default, 600 pro H1/H2, 700 jen

pro display hero.

• Body: Inter (variable) — weight 400 (paragraphs), 500 (UI labels, buttons).
• Mono: JetBrains Mono — všude code snippets, IDs, env vars, file paths.

Žádné jiné fonty. Načítej přes @fontsource (self-hosted, ne Google CDN — privacy).

Scale (Tailwind extend, ne default):

Tracking: -0.02em na všech headings ≥ text-3xl. Body default tracking.

1.3 Spacing & layout

• Container max-width: 1200px pro marketing, 1440px jen pro homepage hero band.
• Section vertical rhythm: py-24 desktop, py-16 tablet, py-12 mobile.
• Grid gutters: gap-8 mezi karty, gap-6 mezi sub-elementy.
• Border radius: rounded-lg (8px) na karty, rounded-md (6px) na buttony,

rounded-full na badges a avatary. Žádný rounded-2xl futuristic look.

• Shadows: minimal. Karty nemají shadow (border-subtle + bg-elevated stačí).

CTA button dostane shadow-[0_0_0_1px_rgba(61,220,191,0.3)] při hover na primary.

1.4 Visual motif

• DAG / graph illustration — nodes + edges stylized, monoline,

accent-primary → accent-companion gradient stroke (přesné hue dle palety z §1.1). Použij SVG, ne PNG. Subtle pulse animation (CSS, prefers-reduced-motion respected).

• Code-style annotations jako decoration — npř. malé monospace badge

claim_task(task_id) nebo mcp/next_actionable v rohu hero ilustrace.

• Subtle gradient (accent-primary → accent-companion) na klíčových

akcentech: heading underline na hero, CTA glow on hover, illustration stroke. Gradient používej šetrně — max 2× per stránka. Cíl: poukázat na to důležité, ne vyzdobit.

• NEpoužívej: stock fotografie lidí u laptopu, neon glow, glassmorphism,

3D blob shapes, „abstract AI brain" ilustrace, kruhové foto týmu na About.

1.5 Voice samples (copy library)

Použij přesně tyto formulace tam, kde se hodí; jinak držte tone:

• Hero H1: „Agents plan. Humans approve."
• Hero sub: „Drobek je agent-native planner a knowledge graph. Jediné zapisovací

rozhraní je MCP. Vy schvalujete plány — agenti pracují."

• Sub-claim: „GitHub je pravda. Drobek ji jen sleduje."
• Pricing tagline: „Free do 250 tasks/měsíc. Žádný kreditkový gate."
• Empty-state default: „Nic tu zatím není. Pošli agentovi MCP call a koukni se sem."
• 404: „Tahle route neexistuje. Asi ji nikdo neclaimoval."

2. Information architecture — všechny stránky

Layouty (z task 34):

• _marketing.tsx — header (logo, nav, CTA) + footer (4-col link grid + newsletter)
• _auth.tsx — centered card (max-w-md), bez nav/footer, „Back to drobek.app" odkaz
• _app.tsx — sidebar + topbar (mimo scope brief, ale generuj Sidebar/Topbar

komponenty samostatně, viz §3)

Public marketing routes:

Auth routes (`_auth.tsx`):

Generuj všech 13 route-level souborů + sdílené komponenty z §3.

2.1 Homepage /

Sekce v pořadí:

1. Top nav — logo levo (svg wordmark „drobek" + bullet dot accent), middle

links (Features, Pricing, Docs, Blog, Changelog), right (Sign in ghost + „Start free →" primary). Sticky, blur backdrop on scroll.

1. Hero band (py-32, max-w-1440)

- 2-col grid (60/40 desktop, stack mobile) - Left: eyebrow text mono mcp://drobek.app/v1 → H1 (text-5xl) „Agents plan. Humans approve." → sub (text-lg text-secondary) → CTAs (Start free → primary, How it works ghost) - Right: animated DAG illustration (5–7 nodes, teal→violet edges, 1 node pulses „in_progress")

1. How it works — 3-step strip, číslované (01 / 02 / 03)

- „Agent navrhne plán" → „Vy schválíte" → „Agenti exekuují, GitHub verifikuje" - Každý step: small icon (line, 24px) + label + 1-sentence body

1. Feature cards — 3-col grid, equal height

- Card 1: Single write path — „MCP only. Žádné CSV importy, žádný UI bypass." - Card 2: Shared knowledge graph — „pgvector + temporal facts. Agenti čerpají z týmové paměti." - Card 3: GitHub ground truth — „Done = merged + CI green. Žádné fake-done." - Každá karta: 32px icon nahoře, H3, 2-3 sentence body, „Learn more →" link

1. Code snippet panel — širokoúhlý card. V dark mode používá

bg-elevated. V light mode drží dark surface kvůli čitelnosti kódu (použij dedikovaný token bg-code = stejný hue jako dark mode bg-base). - Heading: „Agents talk MCP. You read English." - Code block (JetBrains Mono, syntax highlighted in JS-ish style): ``ts await mcp.call('get_next_actionable', { agent_id: 'claude-3.5-sonnet' }); // → { task_id: "T-104", repo: "vercel/next.js", lease_ttl: 600 } `` - Pod codem: 2-3 sentence vysvětlení flow

1. Stack row — „Open-source friendly stack"

- Logo strip (mono, desaturated): Postgres, Redis, MCP, Drizzle, OpenAI, GitHub - Tagline: „Self-host friendly. No vendor lock-in on your knowledge."

1. Pricing teaser — 2 cards (Free / Pro „Coming soon" badge)

- Free: „250 tasks/month", „Unlimited agents", „1 org" → CTA „Start free" - Pro: opacity-60, badge „Coming soon", waitlist CTA

1. Testimonial slot — single quote, large mono quote mark, attribution

placeholder „— Replace post-launch"

1. Final CTA band — full-width subtle gradient bg, H2 „Stop tracking agents manually." + button
2. Footer — viz §3.2

2.2 Pricing /pricing

1. Hero compact (py-20) — H1 „Pricing", sub „Free během public beta. Pro

až přijde Stripe." (uplatni i CS verzi)

1. 2-card compare, side-by-side desktop, stack mobile

- Free card: price 0 Kč/měsíc (display), bullet list features (✓ icons, teal), CTA „Start free →" primary - Pro card: price — Coming soon, opacity-80, ghost CTA „Join waitlist", badge „Coming soon" v header - Compare row pod kartami: tabulka 3 sloupce (Feature, Free, Pro) - Důležité: pricing data čteš z packages/core/src/quota/plans.ts — v generovaném kódu udělej import { PLANS } from "~/lib/plans" placeholder

1. FAQ accordion (Billing / Plans / Fair use kategorie, 4-6 otázek total)
2. CTA bar — „Questions? hello@drobek.app" + mailto link

2.3 Features /features

1. Hero — H1 „Features", sub jednou větou
2. 5 deep-dive sections, alternující layout (text vlevo/vpravo)

- Section 1: MCP-first API — kód snippet, link do docs - Section 2: Knowledge graph s vector search — DAG ilustrace, příklad query - Section 3: GitHub & GitLab verification — screenshot mock PR thread - Section 4: Approval gates — UI mock approval modalu - Section 5: Templates & marketplace (Pro) — grid mock template karet

1. CTA bar stejně jako pricing

2.4 FAQ /faq

1. Hero compact + search box (client-side filter, fuzzy match na otázky)
2. Kategorie jako jumplinks na vrcholu (sticky nav): Pricing, Security,

Integrations, Migrating

1. Accordion (1 otevřená naráz, URL hash sync #kategorie-otazka)
2. CTA: „Otázka chybí? Napiš na hello@drobek.app"

2.5 About /about

1. Hero — H1 „Why drobek"
2. Story — 3 paragraphs, max 2 sentences each. Bez foto týmu. Bez „founded in".
3. Values — 3 cards

- „MCP > UI" — psaní agenty, ne lidé - „GitHub je pravda" — ne self-reported done - „Open by default" — self-host friendly

1. Contact — řádek „Built in Prague. hello@drobek.app." (no full address)
2. Footer

2.6 Blog /blog

1. Hero compact — H1 „Writing", sub „Notes on agents, planning, and the

things that broke."

1. Tag filter row (chip-style, scrollable horizontal mobile)
2. Post list — <article> cards, 1-col mobile, 2-col tablet+

- Each: date (mono, text-xs text-tertiary), title (text-2xl), 1-line excerpt (text-secondary), tag chips, „Read →"

1. Pagination placeholder (Fáze 0 = 1 page only)

2.7 Blog post /blog/$slug

1. Top nav (jako homepage, ne sticky)
2. Article header — eyebrow (date + read time), H1 (text-4xl),

author single-line („Tomáš Grasl"), share row (Twitter, Copy link)

1. Body (max-w-prose, ~70ch)

- MDX-rendered, používá @tailwindcss/typography prose prose-invert - Code blocks v JetBrains Mono, syntax theme matching brand - Pull-quotes border-l-4 accent-primary

1. TOC sidebar (desktop only, position: sticky)
2. Bottom: „Other posts" 2-card row, „Subscribe to changelog" CTA card

2.8 Changelog /changelog

1. Hero compact — H1 „Changelog"
2. Release entries reverse-chrono

- Each: version tag mono (v0.4.0), date, H3 title, body with sub-sections (Added / Changed / Fixed), prose

1. RSS link v header right

2.9 Auth pages (_auth.tsx layout)

Sdílený rám:

• Full-height centered, max-w-md card (bg-elevated, border-subtle, p-8 rounded-lg)
• Top: logo (small, link na /)
• Bottom: „← Back to drobek.app" muted link

Login — H2 „Sign in", email + password inputs, „Forgot?" link, primary button „Sign in", divider „or", secondary buttons „Email magic link" + „GitHub", bottom „New here? Create account →"

Register — H2 „Create account", email + password (s strength indicator), ToS checkbox (links na /legal/terms a /legal/privacy), primary „Create account", bottom „Have an account? Sign in →"

Magic link — 2 stavy

• Default: email input + „Send magic link" button
• Success: ikona ✓ accent-primary 48px + H3 „Check your inbox" + muted text

„Sent to <email>. Link expires in 15 minutes."

Accept invite — H2 „You're invited", body „<inviter> invited you to org <orgName>.", 2 buttons („Accept & sign up" primary, „Decline" ghost)

2.10 Legal pages /legal/$slug (Terms, Privacy, Cookies, DPA)

Doc layout (sdílený, použij na všech 4):

1. Top nav (marketing nav)
2. Doc header band (py-12, border-bottom border-subtle)

- Breadcrumb: „Legal / Terms of Service" - H1 (text-4xl) - Meta row: „Last updated: 2026-05-21" mono + language switcher (CS | EN, current bold)

1. Two-column body

- Left: sticky TOC (position: sticky top-24) — H2 anchors, current section highlighted - Right: prose content (max-w-prose), @tailwindcss/typography prose prose-invert

1. Footer note: „Tento dokument je v souladu s GDPR. Otázky: legal@drobek.app"
2. Marketing footer

Cookie banner (globální, mimo route):

• Fixed bottom bar (ne modal), full-width, bg-elevated border-t border-subtle
• Text: „Používáme jen funkční cookies. Pro analytics potřebujeme tvůj souhlas."
• 3 buttony inline: „Accept all" primary, „Reject non-essential" ghost,

„Customize" text link (otevírá small modal s checkboxy per kategorie: Strictly necessary [disabled, ✓], Functional [✓], Analytics [toggle])

• Choices persist localStorage + cookie 12 měsíců
• Banner zmizí po volbě; reappear přes link „Cookie preferences" v footeru

3. Komponenty (apps/web/app/ui/marketing/*.tsx)

Vygeneruj všechny jako samostatné soubory. Žádný runtime CSS-in-JS — jen Tailwind.

3.1 Atomy

3.2 Marketing-specific

3.3 Auth-specific (apps/web/app/ui/auth/*.tsx)

3.4 Sdílené (apps/web/app/ui/*.tsx) — i pro app shell

Vygeneruj minimální verzi (sidebar / topbar) pro _app.tsx shell, aby existoval konzistentní system, ale plný app UI je mimo scope:

4. Technical constraints — MUST FOLLOW

• Framework: React Router v7 (Remix). Generuj route soubory s export default

komponentou + export const meta (SEO tags) + export const loader kde dává smysl (např. blog list).

• Styling: Tailwind CSS výhradně. Žádné styled-components, žádné CSS modules,

žádné inline <style>. Tokens definuj v tailwind.config.ts (vygeneruj patch).

• Komponenty: každá v samostatném souboru s named export + default export

(default = ten samý komponent). TypeScript strict.

• No client fetch above the fold — vše SSR. Loaders v route souborech.
• Accessibility: WCAG AA. Contrast ≥ 4.5:1 ověřuj. Focus rings viditelné

(focus-visible:ring-2 ring-accent-primary ring-offset-2 ring-offset-bg-base). Keyboard nav na všech interactive elementech. ARIA labels kde ikony bez textu.

• Responsive breakpoints (mobile-first):

- default = mobile (≥ 390px) - sm: 640 - md: 768 (tablet) - lg: 1024 (laptop) - xl: 1440 (desktop)

• Images: <picture> s WebP source + PNG fallback. loading="lazy" mimo

hero. Hero image fetchpriority="high". Width/height attrs povinné.

• OG images: route /og?title=…&page=… — předpokládej že existuje (task 44).

V meta tagy generuj <meta property="og:image" content="/og?title=…&page=…" />.

• Fonts: self-hosted přes @fontsource/inter a @fontsource/jetbrains-mono.

Preload v <head> jen variable font.

• Animations: respect prefers-reduced-motion. Default animations: subtle,

≤ 300ms, ease-out.

• Lighthouse target: mobile Performance ≥ 90, A11y ≥ 95, SEO 100, Best Practices ≥ 95.
• No emoji v UI. Ikony přes lucide-react (nebo inline SVG); v marketing

jen line variant, 1.5px stroke.

• Dark default, <html class="dark"> v root. Light přes class toggle (ne media query).

5. Output format — co máš vygenerovat

Když tento brief spustíš v generátoru, očekávám tento pořadový workflow:

1. Návrh palety (text-only odpověď v markdown) podle §1.1.4 — rationale +

dark/light tabulka + contrast check. Čekej na schválení uživatelem před krokem 1. Pokud uživatel řekne „upravit" (např. „víc neutrální", „studenější primary"), regeneruj jen §1.1.4 deliverable.

1. `tailwind.config.ts` patch — extend theme.colors (ze schválené palety),

theme.fontFamily, theme.fontSize, theme.borderRadius. Kompletní soubor.

1. `apps/web/app/styles/tokens.css` — CSS custom properties pro dark+light

variants (:root { --bg-base: … }, .dark { --bg-base: … }) — hodnoty ze schválené palety.

1. Route soubory všech 13 stránek z §2 — kompletní .tsx s meta, loader

(kde dává smysl), default komponentou. Naplň finální copy (use library z §1.5 a sekční texty z §2).

1. Komponenty ze sekcí §3.1, §3.2, §3.3, §3.4 — všechny soubory.
2. `apps/web/app/lib/seo.ts` — helper buildMeta({ title, description, image, route })

vracející React Router v7 meta array.

1. Sample MDX v apps/web/app/content/blog/2026-05-21-hello-drobek.mdx

(frontmatter + body). Slouží jako reference structure.

1. Sample legal MDX v apps/web/app/content/legal/terms.cs.mdx a .en.mdx

(placeholder outline z task 43, DISCLAIMER komentář nahoře, ne plný text).

1. DAG illustration source v apps/web/app/ui/marketing/DagIllustration.tsx

— inline SVG, parametrized props (nodes, animated).

Žádné stub `// TODO` v production komponentách. Default copy = ten v §1.5 a §2. Když potřebuješ obrázek, který user dodá, vlož <img> se src="/assets/PLACEHOLDER.svg"

• komentář nad ní: {/* USER: replace with brand asset */}.

6. Co dostaneš od uživatele při běhu

Při exekuci generátor dostane k tomuto briefu navíc:

• Logo / favicon assets (SVG, PNG fallback). Pokud ne, použij default

wordmark „drobek" s teal dot accent.

• Exact text snippets pokud chce change copy. Default = copy v tomto briefu.
• Screenshoty reference sites (Linear/Vercel/Stripe) pokud chce specifický look.
• Custom code snippet pro hero panel (default = mcp.call("get_next_actionable", …)

z §2.1.5).

• Blog post obsah — task brief generuje jen 1 sample.
• Legal text — task brief generuje jen outline + DISCLAIMER (lawyer review pending).

7. Acceptance criteria (musí splnit po generování)

• [ ] Všech 13 route souborů z §2 existuje a renderuje bez TS chyb
• [ ] Všech komponent z §3 existuje, každá s named + default export
• [ ] tailwind.config.ts obsahuje všechny tokens z §1.1, §1.2, §1.3
• [ ] Dark + light variant funguje (toggle class dark na <html>)
• [ ] Žádný console.log, žádný any, žádný TODO komentář v production kódu
• [ ] Homepage Lighthouse: Performance ≥ 90 mobile, A11y ≥ 95, SEO 100
• [ ] Všechny interactive elementy mají viditelný focus ring
• [ ] Cookie banner se zobrazí first visit a respektuje volbu
• [ ] Sitemap obsahuje všech 9 marketing routes
• [ ] OG meta tags na každé route (title, description, og:image, twitter:card)

8. How to run this brief — návod pro uživatele

Tento dokument je vstup pro AI design generátor. Tři způsoby jak ho použít:

A) Claude.ai (Projects) — PREFEROVANÁ CESTA

1. Vytvoř nový Project v claude.ai s názvem „drobek.app design".
2. Nahraj tento docs/DESIGN.md jako project knowledge.
3. Volitelně: přidej screenshoty referenčních stránek (Linear hero, Vercel pricing).
4. První prompt — návrh palety:

> _„Přečti brief v project knowledge. Začni krokem 0 z §5: navrhni dark + light > paletu podle §1.1 (psychologie, constraints, contrast check). Vrať jen > markdown deliverable z §1.1.4 — rationale, obě tabulky, contrast check. > Zatím negeneruj kód. Čekáš na moje schválení nebo iteraci."_

1. Iterace palety: dej feedback („chladnější primary", „víc neutrální

background", „secondary je moc křiklavý") a nech regenerovat dokud nejsi spokojen. Schválenou paletu uložím do repa jako poznámku v docs/DESIGN.md (řeknu Claude Code „commit schválenou paletu").

1. Druhý prompt — kód:

> _„Paletu schvaluji. Pokračuj krokem 1 ze §5: vygeneruj tailwind.config.ts > a tokens.css s těmito hodnotami. Pak postupně atomy z §3.1, marketing > komponenty z §3.2, layout _marketing.tsx, homepage. Jeden soubor za > druhým, čekej na ‚next' před pokračováním."_

1. Pro každý soubor: zkopíruj do repa na cestu z briefu (Claude Code ti s tím

pomůže — řekni mu „aplikuj soubory z konverzace").

B) Stitch (Google AI design tool) — přes lokální MCP

V této Claude Code session máš mcp__stitch__* tools. Postup:

# 1) Založit Stitch projekt
mcp__stitch__create_project { name: "drobek.app marketing" }

# 2) Vytvořit design system z briefu
mcp__stitch__create_design_system_from_design_md {
  project_id: <id>,
  path: "docs/DESIGN.md"
}

# 3) Pro každou stránku vygeneruj screen
mcp__stitch__generate_screen_from_text {
  project_id: <id>,
  prompt: "Generate homepage per §2.1 of the brief. Apply design system."
}

# 4) Stáhni výsledek a commit do apps/web/app/routes/

Jen řekni _„spusť Stitch generování"_ a já provedu kroky 1–4.

C) frontend-design skill (lokálně v této session)

Nejjednodušší pro rychlé iterace:

1. V chatu napiš: _„Použij /frontend-design skill na docs/DESIGN.md a vygeneruj

homepage + Nav + Footer + Hero + DagIllustration. Soubory ulož do apps/web/app/routes/_marketing._index.tsx a apps/web/app/ui/marketing/_.tsx."\*

1. Skill přečte tento brief, vygeneruje kód přímo do repo.
2. Po review řekni _„pokračuj s pricing"_ nebo _„regeneruj hero s méně textu"_.

Pořadí doporučené pro generování (závislosti): 0. Návrh palety (markdown deliverable z §1.1.4) — schválíš nebo iteruješ

1. tailwind.config.ts + tokens.css z palety
2. MarketingNav, MarketingFooter, Logo, Button, Card, Badge (atomy)
3. Hero, FeatureCard, CtaBar, DagIllustration (homepage building blocks)
4. _marketing.tsx layout + _marketing._index.tsx (homepage)
5. Pricing → Features → FAQ → About (každá samostatně po review)
6. DocLayout + Legal pages (4× MDX placeholder)
7. Blog list + blog post + sample MDX
8. Changelog
9. _auth.tsx layout + 4 auth routes
10. CookieBanner, LanguageSwitcher, SEO helper

Tip: Po každé stránce udělej pnpm build + Lighthouse audit (task 50 zavede automatický gate). Když něco vypadne pod target, řekni _„fix lighthouse issues na /pricing"_.

9. Když chceš rebrand

Edituj §1 Brand DNA (palette, typography, voice samples) a regeneruj přes:

"Pomocí aktualizovaného brief regeneruj jen tailwind.config.ts, tokens.css,
DagIllustration.tsx, a Hero.tsx. Ostatní soubory ponech."

Komponenty jinak používají Tailwind tokens, takže změna palety propaguje sama.

EOF — happy generating.