AI Prompt Library — Claude Code Pack
# Full-stack marketing site — Claude Code build prompt # Krevo AI · Claude Code Pack · sample prompt 01 of 130 You are building a production marketing site from scratch. Work in the current directory. Do not scaffold with a CLI generator — write the files yourself so every line is reviewable. ## Stack - Next.js (App Router) + TypeScript, strict mode on - Tailwind CSS with a token layer (see Design tokens below) — no arbitrary values - No component library. Build the primitives. - Deploy target: Vercel. No server runtime beyond route handlers. ## Design tokens Define these once in `app/globals.css` under `@layer base` as CSS custom properties, then map them in `tailwind.config.ts`. Never hardcode a hex value anywhere else in the codebase. --bg-page, --surface-card, --surface-raised --text-primary, --text-muted, --text-subtle, --text-on-accent --border-default, --border-soft, --interactive-accent --font-display, --font-body --radius-sm|md|lg|xl, --space-1..--space-20 ## Pages 1. `/` hero, logo marquee, three feature cards, pricing, FAQ, footer 2. `/pricing` three tiers, monthly/annual toggle, comparison table 3. `/blog` index reading MDX from `content/posts` 4. `/blog/[slug]` article layout, 68ch measure, prev/next 5. `/contact` form posting to a route handler, honeypot + rate limit ## Rules - Server Components by default. Add `'use client'` only where state or an event handler genuinely requires it, and say why in a one-line comment. - Every interactive element is reachable by keyboard and has a visible focus ring. - Respect `prefers-reduced-motion` on every animation. - Images through `next/image` with explicit width/height. No layout shift. - Metadata per route via the `metadata` export, including OpenGraph. - No `any`. No `@ts-ignore`. No unused exports. ## Deliverable order Print the file tree first and stop for my approval. Then write the token layer, then the primitives, then the pages. Run `tsc --noEmit` and the linter before you tell me it is done, and paste the output.
130+ battle-tested prompts for full-stack builds with Claude Code. Copy the prompt, paste it into your AI coder, and the whole thing builds itself with the structure already wired in.
Instructions on how to use
Five steps from prompt to live site
Hit Copy prompt above to grab the full text — it carries the layout, motion, fonts and stack notes your AI needs.
Claude Code, Cursor, v0 — anything that writes files. Paste it as-is; don't summarize or trim it.
The prompt scaffolds the whole thing in one pass. Review the file tree before you run it.
Replace the placeholder copy, images and links. Every token is named, so the palette changes in one file.
Push to Vercel, Netlify or your own host. Commercial licence is included, so client work is fine.
A complete prompt library for shipping production websites and apps with Claude Code — architecture, components, debugging, and deploy workflows. Copy, paste, build.