KI-Prompt-Assistent | Pro KI-Prompts

ARAÇLAR
SYSTEM BEREIT // MODELLE ZIEL: AKTIV
PPRROOMMPPTT
SSTTUUDDIIOO
BRANCHENINTELLIGENZMETA-PROMPT-MOTORREVERSE-ENGINEERING
KI-MODELL-SPEZIFIKATION
BRANCHE / BEREICHEŞLEŞTİ: SaaS / Teknoloji
SEKTÖR ZEKÂSI AKTİF76 SEKTÖR PROFİLİ
Ton: Net, güven veren, fayda odaklı; jargon az
Güven: Müşteri logoları · Kullanım istatistikleri · Güvenlik/uyumluluk (SOC2/GDPR)
MARKENNAME
TECHNOLOGIE-STACK
ZIELGRUPPE
DESIGN-TON & CHARAKTER
SPEZIFISCHER GESCHÄFTSKONTEXT
ZUSÄTZLICHE DIREKTIVEN
MASTER-PROMPT-SPEZIFIKATION
LATENZ: 12msZEICHEN: 29369TOKENS CA.: ~7343
MONOLITH WORKS // V6 PROMPT ENGINE
<role>
You are an award-winning creative technologist, full-stack developer, UI/UX designer and copywriter producing Awwwards/FWA-level work. You are a master of modern web tech, motion design and the highest aesthetic standards.
</role>

<strict_constraints>
  - The QUALITY BASELINE and committed decisions inside <spec> (palette/typography/icon set/accessibility/code completeness) are NOT repeated here; every one of them is binding as written.
  - Viewport Standard: Always use min-h-[100dvh] to prevent mobile browser UI overflow.
</strict_constraints>

<spec>
>>> TARGET MODEL: claude
CLAUDE (3.7 SONNET & 3.5 SONNET · HYBRID THINKING & ARTIFACTS OPTIMIZATION):
  - XML Tag Architecture: Structure your output using strict tags (<role>, <design_plan>, <token_matrix>, <component_inventory>, <code_contract>, <verification_checklist>).
  - Hybrid Thinking (<thinking>): If extended thinking is ON, solve math and layout math in your thinking sandbox and write the summary into <design_plan>; if OFF, show full computation in <design_plan>. Pre-plan WCAG contrast (≥4.5:1), 6-state component matrix (Default, Hover, Active, Focus, Disabled, Loading), and CSS Grid column spans before writing code.
  - Runnable Delivery: Follow the file layout in DELIVERY FORMAT; leave no missing import targets or unfinished function bodies.
  - Stack Discipline: Use the selected stack's language and native tools; the target model does not override the technology choice.

CONTRACT: Apply every given value (HEX, font, art direction, measurement) VERBATIM — no reinventing, no watering down. Fill gaps like an expert, committed; "up to you" is BANNED. A=SPEC · B=FAILURE MODES · C=BUILD (full runnable code) · D=VERIFY (self-check before delivering).

═══ PART A — SPEC (committed decisions: what + how) ═══

TASK (PRO MODE — PRODUCTION WEB APP): Build a production-ready Awwwards-grade HOME PAGE and a complete DESIGN SYSTEM (Design Tokens + 6-State Primitives + Standard SEO). Do NOT build the other pages or CMS now; provide a one-line roadmap at the end.


## BUSINESS

- Topic/sector: B2B SaaS & Bulut Platformu
- Audience: kurumsal yöneticiler
- Design style: choose and briefly justify the best-fitting style
- Tech: Cutting-edge 2026 — Next.js 15+ · React 19 · TypeScript · Tailwind v4 · shadcn/ui · Motion
- Home page sections: value proposition + CTA, Core features, How it works, Pricing tiers, Social proof & logos, FAQ + CTA
- Output language: English


## SECTOR & STRATEGY

- Sector: SaaS / Tech
- Tone: Clear, reassuring, benefit-driven; low jargon
- Recommended sections for this sector: Hero (value proposition + CTA), Core features, How it works, Pricing tiers, Social proof & logos, FAQ + CTA.
- Trust signals (must show): Customer logos, Usage metrics & scale, Security/compliance (SOC2/GDPR), Free trial.
- Conversion goals: free trial, demo request.
- Imagery direction: Product UI screenshots/mockups, abstract UI, isometric, clean vector illustration.
- Typical features: pricing table, feature bento grid, demo CTA, integrations.
- Compliance/notes: GDPR/privacy, terms of service.
- Target Audience & Decision-Maker: Engineering leaders (CTOs/VPs of Eng), product architects, and growth teams pursuing automated workflow efficiency.
- Sector Objections & Barriers: Protracted onboarding cycles hampered by poor developer experience and patchy docs · Vendor lock-in anxieties alongside unpredictable tiered seat-pricing penalties · Data sovereignty risks, enterprise GDPR/SOC2 compliance gaps and downtime fears.
- Core Value Drivers: Sub-5-minute zero-code onboarding backed by idiomatic typed SDKs and webhooks · 99.99% availability SLA backed by continuous SOC2 Type II and ISO 27001 audits · Usage-based transparent pricing tiers with an unrestricted 14-day trial.
- Domain Data Entities: Customer Tenant Workspace · Role-Based Access Control (RBAC) Matrix · API Key & Webhook Endpoint · Usage & Quota Consumption Metric · Subscription & Billing Tier.
- Sector Success Metrics (KPI): Free trial signup and day-one product activation rate · Interactive sandbox documentation and API playground dwell time · Customer acquisition velocity and self-serve checkout yield.

DOMAIN SIGNATURE COMPONENT (Committed Blueprint):
  • Component Name: `<InteractiveApiPlayground />`
  • Function & Experience: Live API Request/Response Playground: Morphing code console where users tweak payload params and inspect live JSON returns with real-time 32ms latency ticker.


## CREATIVE CONCEPT (COMMITTED — READ THIS FIRST)

CONCEPT (committed — apply these decisions, do not reinvent): a "Dark Luxury & Titanium" direction site at Awwwards "Site of the Day" / FWA caliber that looks and feels like a $10K+ agency build, SPECIFIC to the SaaS / Tech sector. Make people say "wow" in the first 3 seconds; far from generic template / AI-slop.

PALETTE (Obsidian Lux — EXACT HEX, use with these roles):
  Background #09090B · Surface #18181B · Text #FAFAFA · Primary #3B82F6 · Accent #A1A1AA
  Full set: #09090B · #18181B · #FAFAFA · #A1A1AA · #3B82F6. Text/background contrast must meet WCAG AA (≥4.5:1).

PROGRAMMATIC COLOR TOKENS SYSTEM (CSS / Tailwind v4):
```css
:root {
  --bg: #09090B;
  --surface: #18181B;
  --text: #FAFAFA;
  --primary: #3B82F6;
  --accent: #A1A1AA;
  --text-muted: rgba(250, 250, 250, 0.65);
  --border-subtle: rgba(250, 250, 250, 0.12);
}

/* Tailwind v4 @theme entegrasyonu */
@theme {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-primary: var(--primary);
  --color-accent: var(--accent);
}
```
TYPOGRAPHY (Clash × Satoshi — committed): heading "Clash Display", body "Satoshi".
  https://api.fontshare.com/v2/css?f[]=clash-display@500,600&f[]=satoshi@400,500&display=swap
  Scale: 14/16/18/20/28/40px steps + H1/display clamp(2.5rem, 6vw, 4.5rem); headings heavy and characterful, body line-height 1.6.

HERO (concrete):
  Sticky multi-layer mask-reveal hero: scene pins on scroll as a 3-layer Clash Display typography and Product UI screenshots/mockups, abstract UI, isometric, clean vector illustration mask separates via staggered layers into Core features.
  Sample H1 (elevate it): “Double your team's velocity.”
  Subhead: A clear experience, backed by Customer logos.
  Primary CTA: “Start Free Trial”
Signature moment: Signature: a scroll-scrubbed image sequence: a frame-by-frame product/space shot driven on canvas.

Direction discipline: carry the "Dark Luxury & Titanium" direction boldly across the whole site; do NOT drift into vague "modern minimal". Typography as a design element (large, contrasty, grid-breaking); use layering/grain/gradient for atmosphere; avoid lifeless symmetric card grids.


## DESIGN SYSTEM (detail)

Turn the committed palette + typography into a token system (color roles, type scale, line-heights); 4/8px spacing scale, 12-col grid, intentional rhythm; depth via layering/shadow/texture — never flat and lifeless.
Exploit modern CSS BY SUPPORT TIER: (a) use unconditionally: container queries, :has(), subgrid, clamp() fluid type, oklch + color-mix(), backdrop-filter, variable font axes, native <dialog> for modals; (b) use WITH a fallback: View Transitions, text-wrap: balance, light-dark(), popover, content-visibility; (c) animation-timeline: scroll()/view() ONLY inside @supports (animation-timeline: view()) — outside it the IntersectionObserver reveal must still work (Safari does not support it; unguarded use kills the animation entirely). Prefer native CSS over a JS library where it can do the job.
PALETTE DECISION (committed for this sector): the colour decision is the exact HEX palette above; this sector typically reads as "vibrant brand + neutral background" — if the palette misses that mood, justify it in one sentence. Name tokens by role (surface/elevated/accent/danger), never by raw colour; raw HEX is also BANNED inside component code — reference colours only through these token variables.
TYPOGRAPHY DECISION (committed): the typography decision is the font pair above; this sector carries a "modern geometric sans" character — if the pair misses it, justify in one sentence. Build the contrast between display and body from weight+width, not size alone.
DESIGN TONE: Clear, reassuring, benefit-driven; low jargon. Whitespace, contrast and motion volume must carry this tone — decorative effects must not override it.
IMAGE ART DIRECTION (NO stock photography): Product UI screenshots/mockups, abstract UI, isometric, clean vector illustration. Write each alt text against this direction too.

PHYSICS-BASED MOTION & SPRING CONSTANTS (Committed Spring Tokens):
Hardware-accelerated spring curves: Use these physics-based curves for all micro and macro interactions instead of generic transitions:
```css
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-hover: 250ms;
  --duration-reveal: 600ms;
  --duration-modal: 400ms;
  --stagger-delay: 45ms;
}
```

12-COLUMN LOCKED ASYMMETRIC BENTO GRID FORMULA (Gapless Bento Formula):
Asymmetric depth architecture: Build a gapless rhythm using this exact span matrix instead of uniform symmetric boxes:
  • Grid Container: `grid grid-cols-12 gap-4 lg:gap-6 auto-rows-[280px] lg:auto-rows-[320px]` (grid-auto-flow: dense)
  • Card 1 (Cinematic Hero Feature / Live Visual Stage): `col-span-12 lg:col-span-8 row-span-2`
  • Card 2 (Live Metric / Tabular KPI Counter): `col-span-12 sm:col-span-6 lg:col-span-4 row-span-1`
  • Card 3 (Interactive Micro-Tool / Toggle / Switch): `col-span-12 sm:col-span-6 lg:col-span-4 row-span-1`
  • Card 4 (Full-Width Timeline / Process Ribbon): `col-span-12 row-span-1`
- SECTOR-SPECIFIC FUNCTIONAL COMPONENTS (on top of the generic inventory, working): pricing table · feature bento grid · demo CTA · integrations. These cannot be static mockups; each ships with real interaction, empty state, error state and mobile behaviour.
- Token table: color (role-based), type scale (12-48 body/UI + display clamp), spacing (4-48), radius, shadow, motion durations.
- Component inventory (with all states & INTERACTIVE COMPLETENESS CONTRACT): button (primary/secondary/ghost), card, form fields, nav, footer, modal, toast; same style everywhere + single-stroke icon language. Zero dummy buttons: every tab, accordion, modal, filter and calculator connects to a working reactive state machine; empty console.log is BANNED.
- 6 MANDATORY INTERACTION STATES (committed on every interactive element): (1) Default: baseline styling with subtle border/contrast. (2) Hover: background shift or subtle scale (~1.02-1.05), 200ms ease-out. (3) Active/Pressed: tactile push (scale 0.98 or -translate-y-[1px]). (4) Focus-visible: 2px ring + ring-offset-2 in accent color — MUST NOT be hidden under sticky headers. (5) Disabled: opacity-40 + pointer-events-none. (6) Loading/Skeleton: shimmer wave matching layout dimensions; generic round spinners BANNED.
Motion stack (committed): GSAP + ScrollTrigger (SplitText character stagger on headlines), Lenis smooth scroll; Three.js/WebGL/shader where fitting (LIGHTWEIGHT, lazy-loaded). Target 60fps, give heavy effects a fallback, respect prefers-reduced-motion — effects must not kill Core Web Vitals.


## BRAND & VISUAL ASSETS

LOGO VECTOR: When no external logo is provided, construct a modern, geometric, minimalist SVG symbol and typographic wordmark (e.g. /public/logo.svg).


## INTERACTION & MOTION CONSTANTS (committed)

- Duration ASSIGNMENT (per element, no guessing): hover/focus/button feedback micro 150ms · dropdown, accordion, tab switch standard 250ms · modal, page/route transition, hero reveal emphasis 400ms; enter cubic-bezier(0.2,0.8,0.2,1), exit cubic-bezier(0.4,0,1,1); transform+opacity only.
- Reveal: IntersectionObserver, y:16px→0 + opacity 0→1, 40-60ms stagger — NOT canned "AOS fade-up". Hover: 1.02 scale or 2-4px lift, 200ms.
- Smooth scroll (Lenis, lerp ~0.1); scroll-reveal only when meaningful. All motion off under prefers-reduced-motion.


## CONTENT & TYPOGRAPHY ART DIRECTION

TYPOGRAPHIC & COPYWRITING ART DIRECTION (BEHAVIOR OF TEXT ACROSS SECTIONS):

1. HERO & H1 HEADLINES: Clash Display 700-900 · clamp(2.5rem, 6vw, 4.5rem) · line-height 1.05-1.15 · text-wrap: balance · locked to 2-3 lines via max-w-4xl · 30-50ms char/word stagger on viewport enter · the headline states the outcome the customer gets, not a generic slogan.

2. H2 & SECTION HEADINGS: Clash Display 600-700 · clamp(1.75rem, 3.5vw, 2.75rem) · 1-2 lines (text-wrap: balance) · outcome-first rhetoric ("4 Pillars That Triple Your Velocity", not "Our Services").

3. EYEBROW & BADGES: 11-13px uppercase · tracking-[0.2em] · font-mono or a subtle pill badge with accent border · format `// SECTION NAME` or `01 / PROTOCOL`.

4. BODY COPY: Satoshi 400-500 · 16-18px · line-height 1.6-1.7 · line length 60-75 characters (max-w-prose / 65ch) · body colour is the committed Text role #FAFAFA — pure #FFFFFF glare tires the eye and is not used.

5. MICROCOPY & CTA: button text is an action verb ("Book Appointment", "Get Quote") · a 12px friction-reducer line sits directly under the CTA ("Quote in 30s · No credit card · 24/7 support").

6. NUMERIC METRICS & KPI: font-variant-numeric: tabular-nums · display number clamp(2.5rem, 4vw, 4rem) + 2 lines of concrete context beneath · a verifiable business-specific figure instead of a round "10,000+ happy clients".

COPY FIRST, CODE SECOND: before writing any code, give the real copy for every section in one table (Section | H2 | 1-2 supporting sentences | CTA label), then use that table VERBATIM in the code — inventing copy while coding produces generic results. NO "Lorem ipsum"; for the hero use the sample H1/subhead/CTA above or write something better. Every headline must be SPECIFIC to this business and benefit-led, carrying the value proposition + objection handling; NO generic "Quality · Trust · Experience".
WRITE TO ONE PERSON: address all copy to a single reader matching "kurumsal yöneticiler" — in their language, answering their objections; broadcast tone is BANNED.
COPY ANGLE (committed): Risk-reduction: guarantees, process transparency, proof and reversal paths as the spine; the "safe choice" feeling.
SECTION DIRECTIVES (each committed — layout rhythm + micro-interaction included):
- Core features: Bento / editorial rhythm: lay items out by importance at different scales (1 large hero card + 2 secondary cards); each carries a benefit headline + one micro-proof; concretely surface pricing table, feature bento grid. Layout: bento grid (2-1 rhythm). Micro-touch: clip-path/mask reveal on section entry.
- How it works: 3-4 numbered steps with concrete duration/output each; visualize with a connected line or timeline; highlight 1 concrete gain per step. Layout: full-bleed band. Micro-touch: numbers/labels arrive with count-up or decode. Proof element: Security/compliance (SOC2/GDPR).
- Pricing tiers: 3 tiers with the middle emphasized; a who-it's-for line + clear price/value + objection-killing microcopy and direct action CTA per tier. Layout: diagonal/layered collage. Micro-touch: a subtle scroll-linked parallax layer (off under reduced-motion).
- Social proof & logos: build this section around ONE business-specific, benefit-led idea (no filler sections). Layout: centered narrow column (max 65ch). Micro-touch: depth on card hover (shadow + subtle tilt), mirrored on focus. Proof element: Customer logos.
- FAQ + CTA: 5-6 questions from real buying objections (price, time, trust, process); short honest answers; add FAQPage JSON-LD. Layout: editorial side-rail (sticky heading + flowing content). Micro-touch: character-stagger reveal as the heading enters the viewport.


## UX & CONVERSION

- Value proposition + ONE primary CTA above the fold; reduce friction.
- Social proof (quantified results, logos, guarantees) answers objections; hierarchy via size/spacing/contrast (not color alone).
- hover/focus/active/disabled on every interactive element; skeleton for >300ms ops; meaningful empty/error states.
- Forms: visible labels, error below field + recovery path, inline validation on blur, required markers.


## SEO STRATEGY

SEO & SHARING STANDARD (Standard SEO):
  - Meta Title: ≤60 chars, target keyword first + brand divider.
  - Meta Description: 140-155 chars, active voice, direct value prop + CTA.
  - Canonical: Self-referencing absolute canonical link on every page.
  - OpenGraph & Twitter: og:title, og:description, og:image (1200x630 px), twitter:card (summary_large_image).
  - robots.txt & sitemap.xml: Clean crawlability, sitemap URL declaration.
  - JSON-LD Schema (COMMITTED types, wired via @id inside @graph): Organization, WebSite, SoftwareApplication, Offer, AggregateRating, FAQPage, BreadcrumbList — embedded in <head>.

```json
{"@context":"https://schema.org","@graph":[
  {"@type":"Organization","@id":"https://SITE/#org","name":"Business Name","url":"https://SITE/"},
  {"@type":"WebSite","@id":"https://SITE/#site","url":"https://SITE/","publisher":{"@id":"https://SITE/#org"}},
  {"@type":"Offer","@id":"https://SITE/#e0"},
  {"@type":"AggregateRating","@id":"https://SITE/#e1"},
  {"@type":"SoftwareApplication","@id":"https://SITE/#main","parentOrganization":{"@id":"https://SITE/#org"}}
]}
```
Apply this @graph/@id wiring pattern to every committed type; all nodes stay in the one script.


## QUALITY FLOOR (baseline — don't narrate, just APPLY)

- Performance — LAB (measure with Lighthouse; score weights: TBT 30%, LCP 25%, CLS 25%, FCP 10%, SI 10%): 95+ across all four categories. FIELD (CrUX, real users): LCP ≤2.5s, INP ≤200ms, CLS ≤0.1. INP carries no weight in the Lighthouse score — its lab proxy is TBT, so drive that down. width/height on images, font-display: swap.
- WebP/AVIF + srcset, below-fold lazy-load, inline critical CSS, defer third-party scripts.
- WCAG 2.2 AA — ALL 24 AA criteria apply; the following are the most commonly skipped, not an exhaustive list: semantic HTML, contrast ≥4.5:1, visible focus (2-3px ring), full keyboard, alt text, ARIA, prefers-reduced-motion. Additional 2.2 requirements: desktop interactive targets ≥24×24px (2.5.8), focus ring must not be obscured by sticky headers (2.4.11), @media (prefers-reduced-motion: reduce) must reduce ALL animation/transition durations to ≤0.01ms — this media query is MANDATORY, not optional.
- Touch ≥44×44px (+8px gap); cursor: pointer; 4/8px spacing scale; one icon set (Lucide/Heroicons), NO emoji icons.
- Mobile-first; 375/768/1024/1440; no horizontal scroll; 60-75 char lines; root container overflow-x-hidden.
- Motion uses transform+opacity only; durations and easing are canonised in INTERACTION & MOTION CONSTANTS; every animation means something.
- NO "Lorem ipsum" or purple AI glow; NO generic templates, gratuitous emoji or lifeless flat layouts — hierarchy, rhythm, atmospheric depth (SVG grain/noise, 1px border gradient, subtle radial ambient light, custom scrollbar) and character.


## PRODUCTION BASELINE (production-ready — skipping it = an INCOMPLETE site)

HEAD & META (complete <head>):
- charset, viewport, lang · <title> ≤60 + description ≤155 · canonical · OG + Twitter Card + a 1200×630 OG image · favicon set (ico + 32px + apple-touch 180px + maskable) · theme-color = committed palette background · font preconnect/preload, inline critical CSS, defer scripts.
TECHNICAL PRODUCTION & TYPE SAFETY (Zod & TypeScript Contract):
- robots.txt + sitemap.xml + on-brand 404 (files appropriate to the selected stack) · no-JS/slow-network fallback · console CLEAN (0 errors/warnings, no broken links/images).
- Contact form: visible labels, inline errors, honeypot, submitting/success/error states and retry. Show success only after server acknowledgement; without a connection show "submission is not configured", preserve input and list the launch blocker. Validate form/API boundaries at runtime with Zod (`z.object({...})`); TypeScript types do not replace runtime validation.
UNVERIFIABLE DATA (inventing is BANNED):
- Do not invent missing phone numbers, addresses, emails, prices, certificates/licences, real client names or statistics. Placeholders are allowed for business facts only: show `{{PHONE}}` `{{ADDRESS}}` `{{PRICE}}` in previews and provide a "TO BE FILLED" list; never turn them into active tel/mailto/payment links or JSON-LD facts. Leave no empty functions, TODO implementations or missing files. Keep filling DESIGN decisions (colour, measurement, layout, copy tone) committed like an expert.
TRUST & LEGAL:
- Cookie consent banner (accept/reject) · Privacy Policy / data-protection link in the footer · analytics (GA4 or Plausible) loads only after consent · the footer carries contact (NAP), social, copyright and legal links.
ROBUSTNESS:
- Cross-browser on the last 2 versions of Chrome/Safari/Firefox/Edge + iOS Safari · safe-area via env(safe-area-inset-*) for notch/bottom bar, 100svh on mobile · if images/fonts fail there is alt text and a fallback, and the content stays readable without JS.
DELIVERY:
Clear file structure + install/run commands + an EXACT dependency list: give every package you used with name and version as a `dependencies` JSON block — importing anything in code that is not in that list is BANNED (an invented package means a project that will not run). Include font/asset sources too.
</spec>

<failure_modes>
═══ PART B — FAILURE MODES & FEW-SHOT STANDARDS ═══
FEW-SHOT CODE STANDARD (Do Not Do This ❌ → Do This Instead ✅):
```html
<!-- ❌ BAD (AI-Slop & Template Reflex): Flat background, generic spacing, lifeless typography -->
<div class="bg-gray-900 p-6 rounded-lg shadow-lg">
  <h3 class="text-xl text-white font-bold">Fast Solution</h3>
  <p class="text-gray-400">Highest quality and reliable service.</p>
</div>

<!-- ✅ GOOD ($10K+ Awwwards Caliber): Depth, 1px micron border, ambient glow, asymmetric typography -->
<div class="group relative p-8 rounded-2xl bg-gradient-to-b from-white/[0.07] to-transparent border border-white/10 backdrop-blur-xl overflow-hidden hover:border-cyan-500/30 transition-all duration-500">
  <div class="absolute -top-24 -right-24 w-48 h-48 bg-cyan-500/10 rounded-full blur-3xl group-hover:bg-cyan-500/20 transition-all duration-700 pointer-events-none"></div>
  <span class="font-mono text-xs text-cyan-400 tracking-widest uppercase">// SYSTEM METRIC</span>
  <h3 class="text-2xl font-medium tracking-tight text-neutral-100 mt-2 text-balance">Sub-millisecond Response Threshold</h3>
  <p class="text-sm text-neutral-400 leading-relaxed mt-2 max-w-prose">All data traffic is processed deterministically under 40ms on edge nodes.</p>
</div>
```

✗ H1 wraps to 4+ lines; giant font in a narrow max-width = unreadable block — Cause: not testing the type scale → Fix: max-w-5xl/6xl + clamp() fluid size; H1 must NOT exceed 2-3 lines
✗ Bento grid leaves empty cells, unbalanced layout — Cause: not doing the col-span math → Fix: grid-auto-flow: dense + interlocking col-span/row-span math; empty cells BANNED
✗ Artificial "SECTION 01 / QUESTION 05" numbering — Cause: generic AI scaffold reflex → Fix: semantic, meaningful headings; decorative numbering BANNED
✗ Using h-screen → content disappears behind mobile browser UI — Cause: desktop-first assumption → Fix: use min-h-[100dvh] (dynamic viewport height); h-screen BANNED
✗ Horizontal scroll leak (overflowing element, no hidden overflow) — Cause: skipping overflow control → Fix: root container overflow-x-hidden + horizontal scroll test at 375px
✗ Generic hero (centered headline + gradient blob + "Get Started" button) — Cause: template reflex → Fix: apply the committed asymmetric hero + signature moment from section A
— Sector-specific (SaaS / Tech):
✗ Feature pile (no benefit/outcome), pricing hidden — Cause: product-centric narrative → Fix: benefit-first + clear pricing table + demo/trial CTA
</failure_modes>

<build>
═══ PART C — BUILD (real content + full, runnable code) ═══


## CODE & PROJECT TREE

PROJECT DIRECTORY & FILE ARCHITECTURE (PATH GUIDE):
```text
next15-app-router/
├── docs/ (HANDOFF.md, TASKS.md, SYSTEM_MAP.md, WORKLOG.md, MONOLITH_CHAIN.md)
├── .env.example
├── next.config.ts
├── package.json
├── tsconfig.json
├── public/
│   ├── favicon.ico, favicon.svg
│   ├── robots.txt, sitemap.xml, llms.txt
│   └── images/ (og-image.jpg 1200x630, logo.svg)
└── src/
    ├── app/
    │   ├── layout.tsx (font preload + JSON-LD @graph + theme-color)
    │   ├── page.tsx (home page — section list from PART A)
    │   ├── not-found.tsx (branded 404), error.tsx, loading.tsx
    │   ├── api/ (contact/route.ts, og/route.tsx)
    │   └── globals.css (@import "tailwindcss"; @theme committed tokens)
    ├── components/
    │   ├── ui/ (button.tsx, input.tsx, dialog.tsx, badge.tsx, tabs.tsx, card.tsx — 6-state matrix)
    │   ├── layout/ (navbar.tsx, footer.tsx, mobile-drawer.tsx, theme-toggle.tsx)
    │   ├── motion/ (scroll-reveal.tsx, magnetic-button.tsx)
    │   └── sections/ (hero-section.tsx + one file per PART-A section)
    ├── lib/ (utils.ts, validations/ — Zod schemas, seo/ — jsonld.ts)
    └── hooks/ (use-debounce.ts, use-media-query.ts, use-theme.ts)

# FILING DISCIPLINE:
# 1. <300 Lines Per File: SRP (Single Responsibility); NO god-files.
# 2. Modular Boundaries: Strict separation of UI primitives / layout / features; presentation decoupled from logic.
# 3. Schema & Type Safety: Form and API input models locked via validated schemas.
# 4. System Memory: docs/ tracks live state (HANDOFF.md), tasks (TASKS.md) and architectural decisions (WORKLOG.md) atomically.
```

DELIVERY FORMAT: MULTI-FILE PROJECT — for Cutting-edge 2026 — Next.js 15+ · React 19 · TypeScript · Tailwind v4 · shadcn/ui · Motion, provide each relative file path and full contents, including entry points, import targets and configuration. Omit routes outside this stage; do not compress the project into one Artifact.
STACK DIRECTIVE (committed — write in this stack's idiom): App Router + React Server Components; deliberate, minimal "use client" boundaries; next/image + next/font; Tailwind v4 @theme tokens = the committed palette; route-level loading/error/not-found; Framer Motion only in client islands.
IMPORTANT: if the output does not fit one reply, deliver the most important part (design system + home page) in FULL; continue exactly where you left off when I say "continue". Never leave half/placeholder code.
DEFINITION OF DONE (Claude): complete files matching DELIVERY FORMAT; every import resolves, no unfinished code; missing business facts appear in TO BE FILLED.


## NEXT STEPS (list in one line only, do NOT build now)

Possible later requests: other pages (service detail, about, contact, blog) and utility/legal content. No CMS selected; do not create an admin panel.


## OUTPUT FORMAT

1. Brief concept & design rationale (1 paragraph)
2. Design system: palette (HEX) + typography + spacing
3. Home page — real content section by section
4. FULL, runnable code
5. SEO package (meta, OG, JSON-LD schema)
</build>

<verify>
═══ PART D — VERIFY (prove mechanically BEFORE delivering; fix any that fail) ═══
EVIDENCE PROTOCOL (for every ☐ item): RUN the check and report the command/action + observed result. Without tools, mark NOT RUN and give an actionable check; code inspection is not browser/build evidence. Do not claim launch readiness with missing integrations or business facts.

☐ Cookie consent banner + Privacy link + (consent-gated) analytics present? PROOF: when consent is DENIED the analytics script never loads (absent from Network).
☐ robots.txt + sitemap.xml provided; safe-area (notch) and cross-browser handled? PROOF: both file requests return HTTP 200.
☐ Above the fold: committed H1 + ONE clear primary CTA visible; does it actually create a "wow"? Justify your verdict in one sentence.
☐ Is at least one signature moment (section A) actually implemented? Name the section that carries it.
☐ No Lorem ipsum / generic headings anywhere; every heading SPECIFIC to this business? PROOF: `grep -ri "lorem" src/` returns empty.
☐ Are colors exactly the section-A HEX values? Is text/background contrast ≥ 4.5:1? PROOF: show the relative-luminance math for the committed text/background pair.
☐ Is the font the committed pairing from section A, loaded in <head>? PROOF: both font links/preloads visible in the rendered <head>.
☐ No horizontal scroll at 375px; touch targets ≥ 44px; mobile designed separately? PROOF: measured document.documentElement.scrollWidth ≤ 375 at 375px width.
☐ Are all interactions keyboard-reachable with a visible focus ring? PROOF: list the focus order of a full Tab pass (first→last interactive element).
— Sector-specific (SaaS / Tech):
☐ Clear pricing + demo/free-trial CTA + security/uptime/social proof present?
</verify>

<design_plan_instructions>
Before writing ANY code, open a <design_plan> block and work these out MATHEMATICALLY (the type scale and contrast thresholds are given in PART A and are not repeated here — show your arithmetic):
1. Bento Grid Density: Prove zero empty cells using grid-auto-flow: dense.
2. Motion Intent: State the hierarchical or narrative purpose of each GSAP/Motion trigger.
</design_plan_instructions>

<output_format>
Open your response with a <design_plan> pre-flight analysis; then follow the OUTPUT FORMAT order. ALL tagged blocks are binding.
</output_format>
EXPORTIEREN:
Was ist ein KI-Prompt-Assistent?

Ein Prompt-Assistent hilft Ihnen, strukturierte Anweisungen für bildgenerierende KI-Werkzeuge zu bauen. Über Stil, Komposition, Licht und Kameraparameter erzeugen Sie Prompts, die in Midjourney, DALL-E, Gemini, ChatGPT und Adobe Firefly konsistente Ergebnisse liefern — jeweils in der Syntax, die das Modell erwartet.
So funktioniert es

1Beschreiben Sie das Motiv des gewünschten Bildes.
2Wählen Sie Stil, Licht, Komposition und Kameraparameter.
3Legen Sie das Zielwerkzeug fest (Midjourney, DALL-E, Firefly und so weiter).
4Kopieren Sie den erzeugten Prompt in dieses Werkzeug.
Häufige Fragen

Warum überhaupt strukturierte Prompts?

Generative Werkzeuge füllen Lücken bei vagen Anweisungen selbst — deshalb erzeugt dieselbe Anfrage jedes Mal ein anderes Bild. Ein Prompt, der Stil, Licht und Komposition ausdrücklich benennt, liefert wiederholbare Ergebnisse innerhalb Ihrer Markensprache.
Funktioniert ein Prompt in allen Werkzeugen?

Nein. Midjourney arbeitet mit Parameter-Flags, DALL-E und ChatGPT reagieren besser auf natürliche Sätze, Firefly hat eigene Stil-Tags. Der Assistent passt die Syntax an das gewählte Ziel an; dieselbe Idee in einer anderen Engine zu testen heißt also nur, das Ziel zu wechseln.
Darf ich die Bilder kommerziell nutzen?

Das hängt allein von den Lizenzbedingungen des genutzten KI-Werkzeugs ab, nicht von diesem Assistenten. Midjourney, OpenAI und Adobe haben unterschiedliche Bedingungen zur kommerziellen Nutzung, und diese ändern sich. Prüfen Sie vor kommerziellem Einsatz die aktuelle Lizenz des Dienstes.