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

V2EX = way to explore

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

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 140 天前的主题，其中的信息可能已经有所发展或是发生改变。

网站: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