网站:https://kimik2.ai快来体验，欢迎吐槽 🙏
Prompt 如下:You are an elite full-stack engineer & SEO copywriter. Build a production-ready landing page for kimik2.ai targeting “kimi k2” and featuring the product type ai-chat.
Tech Stack
- Next.js 14 (App Router, RSC) — TypeScript, Edge-ready.Tailwind CSS v3 — dark mode class strategy, custom config.shadcn/ui — reusable primitives, including
Button, Card, Tabs, Accordion, Dialog, Toaster.lucide-react — icon set.Optional: Prisma + SQLite for email capture.1 · Market & SERP Research
- Crawl top 10 SERP results for “kimi k2” (EN + ZH)。Summarise: value props, CTA patterns, content gaps, avg. title/meta length.Extract:
- 3 unique selling points for our page.5 long-tail keywords (≥ 4 words).Best-fit
<title> (≤ 60 chars) & meta description (≤ 155 chars).Return a research.md with these findings.
2 · Landing Page — src/app/page.tsx
Sections
- Hero — H1 (includes kimi k2) + sub-title + primary CTA.Features — 3-4 cards (
Card) each with icon + headline + copy.How It Works — Tabs step-by-step walkthrough with illustrations.Testimonials — 3 quotes (Card grid).Pricing — dynamic tiers (see rules ↓).FAQ — 5-6 questions (Accordion).Footer — links + copyright + social.Pricing Rule
- If
{{PRODUCT_TYPE}} == ai-video: tiers Basic / Pro / Studio.Else if ai-image or ai-chat: tiers Starter / Growth / Business.Use insights from research.md to set quota & price placeholders.SEO
- Dynamic
<title> & <meta name="description"> via generateMetadata().JSON-LD: BreadcrumbList & Product.OG tags (og:title, og:description, og:image, twitter:card).Sitemap & robots.txt via Next.js route handlers.UX / UI
- Tailwind palette
slate + accent indigo.Light & dark modes (class strategy, respect system).Motion: framer-motion fade-in on section viewport.Accessibility: all interactive components with ARIA labels.3 · CTA Email Capture API — src/app/api/subscribe/route.ts
- Accept
{ email } POST (JSON).Server action validates & writes to prisma.subscriber (SQLite).Return { success: true }.Front-end: Dialog → email form → toast on success/fail.Prisma schema:
model Subscriber { id Int @id @default(autoincrement()) email String @unique createdAt DateTime @default(now())}若不想引入数据库，可改存入 SendGrid / Resend / Supabase — 请在 README 备注替代方案。
4 · Project Bootstrap （可选—已完成可跳过）
提示：你已完成此步骤，可直接跳过。如果需要重新初始化项目，请参考下方命令或附录 B 。
# 1. Scaffoldpnpm create next-app@latest kimik2.ai --ts --tailwind --eslint --appcd kimik2.ai# 2. Install depspnpm add @shadcn/ui clsx lucide-react framer-motionpnpm add -D prisma @prisma/client tailwind-merge tailwindcss-animate# 3. Init shadcn/uipnpm dlx shadcn-ui@latest init -y# 4. Generate shadcn components as neededpnpm dlx shadcn-ui@latest add button card tabs accordion dialog toaster# 5. Prisma setup (optional)pnpm dlx prisma init --datasource-provider sqlite5 · Recommended File Tree
/ (repo root)├─ src/│ ├─ app/│ │ ├─ page.tsx # landing page (RSC)│ │ ├─ layout.tsx # base <html>│ │ ├─ api/│ │ │ └─ subscribe/│ │ │ └─ route.ts # POST handler│ │ └─ sitemap.xml/route.ts # dynamic sitemap│ ├─ components/│ │ ├─ hero.tsx│ │ ├─ feature-card.tsx│ │ ├─ pricing-table.tsx│ │ └─ ...│ └─ lib/│ └─ prisma.ts├─ prisma/│ └─ schema.prisma├─ public/│ └─ og-default.png├─ README.md└─ tailwind.config.ts6 · Delivery Format
- Output file path → code in one Markdown block (use
tsx`, ts`, etc.).Boilerplate 可用 // ... 占位；关键逻辑需完整。最后附 "🚀 Quick Start" 教程：5 分钟本地运行 + Vercel 部署。7 · Grading Checklist （自检）
- Lighthouse > 95 (Performance / Best Practices / SEO). CLS & LCP 分别 < 0.1 和 2 s 。 页面所有文本包含 kimi k2 的频率控制在 1.5–2.5%。
npm run lint & npm run type-check 无错误。