KI-First Design-Handoff-Dokumentgenerator

INSTRUCTIONS FOR AI IMPLEMENTATION AGENT: 1. Read this document fully before writing any code. 2. Implement in the order specified in SECTION 1 (Implementation Map). 3. Reference CLAUDE.md for token values. If a token referenced here is not in CLAUDE.md, flag it and use the fallback value provided. 4. Every value in this document is intentional. Do not substitute with "close enough" values. `gap-6` means `gap-6`, not `gap-5`. 5. Every state must be implemented. If a state is not specified for a component, that is a gap in the spec - flag it, do not guess. 6. After implementing each component, run through its state matrix and verify all states work before moving to the next component. 7. When encountering ambiguity, prefer the more explicit interpretation. If still ambiguous, add a TODO comment: "// HANDOFF-AMBIGUITY: [description]" ### SECTION 1: IMPLEMENTATION MAP A priority-ordered table of everything to build. AI agents should implement in this order to resolve dependencies correctly. | Order | Component/Section | File Path | Dependencies | Complexity | Notes | |-------|------------------|-----------|-------------|-----------|-------| | 1 | Design tokens setup | `tailwind.config.ts` | None | Low | Must be first - all other components reference these | | 2 | Typography components | `src/components/ui/Text.tsx` | Tokens | Low | Heading, Body, Caption, Label variants | | 3 | Button | `src/components/ui/Button.tsx` | Tokens, Typography | Medium | 3 variants × 3 sizes × 6 states | | 4 | Container | `src/components/ui/Container.tsx` | Tokens | Low | Standard max-width wrapper | | 5 | Section | `src/components/ui/Section.tsx` | Tokens, Container | Low | Standard section with padding | | 6 | Card | `src/components/ui/Card.tsx` | Tokens, Typography | Medium | Base card + variants | | 7 | Input | `src/components/ui/Input.tsx` | Tokens, Typography | Medium | Text, email, password types | | 8 | Skeleton | `src/components/ui/Skeleton.tsx` | Tokens | Low | Loading placeholder | | 9 | Navbar | `src/components/layout/Navbar.tsx` | Tokens, Button, Container | High | Responsive nav with drawer | | 10 | Footer | `src/components/layout/Footer.tsx` | Tokens, Container | Low | Site footer | | 11 | Page - Home | `src/app/page.tsx` | All above | High | Hero, Features, Testimonials, CTA | | 12 | Page - Sign Up | `src/app/signup/page.tsx` | All above, Input, Button | High | Form with validation | | 13 | Page - Dashboard | `src/app/dashboard/page.tsx` | All above, Card | High | Data display with empty states | Rules: - Nothing can reference a component that comes later in the table - Complexity = how many variants × states the component has - Notes = anything non-obvious about implementation ### SECTION 2: GLOBAL SPECIFICATIONS These apply everywhere. AI agent should configure these BEFORE building any components. #### 2.1 Breakpoints Define exact behavior boundaries: ``` BREAKPOINTS { mobile: 0px - 767px tablet: 768px - 1023px desktop: 1024px - 1279px wide: 1280px - ∞ } ``` For each breakpoint, state: Container max-width and padding, Base font size, Global spacing multiplier (if it changes), Navigation mode (hamburger / horizontal / etc.) ``` BREAKPOINT: mobile (0px - 767px) container: max-w-full px-4 (16px) base-font-size: 16px spacing-multiplier: 1x navigation: hamburger icon, slide-in drawer BREAKPOINT: tablet (768px - 1023px) container: max-w-[720px] px-6 (24px) base-font-size: 16px spacing-multiplier: 1.25x navigation: hamburger icon, slide-in drawer BREAKPOINT: desktop (1024px - 1279px) container: max-w-[960px] px-8 (32px) base-font-size: 16px spacing-multiplier: 1.5x navigation: horizontal nav, all items visible BREAKPOINT: wide (1280px - ∞) container: max-w-[1280px] px-8 (32px) base-font-size: 16px spacing-multiplier: 1.5x navigation: horizontal nav, all items visible ``` #### 2.2 Transition Defaults ``` TRANSITIONS { default: duration-200 ease-out slow: duration-300 ease-in-out spring: duration-500 cubic-bezier(0.34, 1.56, 0.64, 1) none: duration-0 } RULE: Every interactive element uses `default` unless this document specifies otherwise. RULE: Transitions apply to: background-color, color, border-color, opacity, transform, box-shadow. Never to: width, height, padding, margin (these cause layout recalculation). ``` #### 2.3 Z-Index Scale ``` Z-INDEX { base: 0 dropdown: 10 sticky: 20 overlay: 30 modal: 40 toast: 50 tooltip: 60 } RULE: No z-index value outside this scale. Ever. ``` #### 2.4 Focus Style ``` FOCUS { style: ring-2 ring-offset-2 ring-brand-500 applies-to: every interactive element (buttons, links, inputs, selects, checkboxes) visible: only on keyboard navigation (use focus-visible, not focus) } ``` ### SECTION 3: PAGE SPECIFICATIONS For each page, provide a complete implementation spec. #### Page: Home **Route:** `/` **Layout:** `src/components/layout/RootLayout.tsx` (includes Navbar + Footer) **Data requirements:** Static content only, no data fetching required ##### Page Structure (top to bottom) ``` PAGE STRUCTURE: Home ├── Section: Hero │ ├── Component: Heading (h1) │ ├── Component: Subheading (p) │ ├── Component: CTA Button (primary, lg) │ └── Component: HeroImage ├── Section: Features │ ├── Component: SectionHeading (h2) │ └── Component: FeatureCard × 3 (grid) ├── Section: Testimonials │ └── Component: TestimonialSlider └── Section: CTA ├── Component: Heading (h2) └── Component: CTA Button (primary, lg) ``` ##### Section-by-Section Specs For each section: **Hero** ```