Claude code 30 分钟做了一个 Kimi k2 免费套壳站

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

网站: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. Scaffold
pnpm create next-app@latest kimik2.ai --ts --tailwind --eslint --app
cd kimik2.ai

# 2. Install deps
pnpm add @shadcn/ui clsx lucide-react framer-motion
pnpm add -D prisma @prisma/client tailwind-merge tailwindcss-animate

# 3. Init shadcn/ui
pnpm dlx shadcn-ui@latest init -y

# 4. Generate shadcn components as needed
pnpm dlx shadcn-ui@latest add button card tabs accordion dialog toaster

# 5. Prisma setup (optional)
pnpm dlx prisma init --datasource-provider sqlite

5 · 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.ts