V2EX 14小时前
[分享创造] Claude code 30 分钟做了一个 Kimi k2 免费套壳站
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文档详细介绍了为kimik2.ai构建一个针对“kimi k2”的AI聊天应用登陆页面的全栈工程实践。它涵盖了从市场和SERP研究、登陆页面设计、CTA邮件捕获API,到项目启动的完整流程。技术栈包括Next.js 14、Tailwind CSS、shadcn/ui等,并提供了SEO优化、UX/UI设计以及部署的详细指导。最终目标是创建一个高性能、用户友好的登陆页面,并实现快速部署。

💡 市场调研是基础:首先,通过爬取“kimi k2”的SERP结果,分析竞争对手的价值主张、CTA模式和内容差距,并提取关键词,为页面优化提供数据支持。

💻 页面结构设计:登陆页面将包含Hero、Features、How It Works、Testimonials、Pricing、FAQ和Footer等多个部分,每个部分都进行精心设计,采用Tailwind配色方案,并支持亮暗模式切换。

📧 CTA邮件捕获API实现:实现一个API,用于接收用户邮件订阅请求,并将数据存储在数据库中。前端通过弹窗、表单和Toast提示用户订阅结果。

⚙️ 项目技术栈:采用Next.js 14、TypeScript、Tailwind CSS、shadcn/ui等技术栈,并提供了可选的Prisma + SQLite数据库用于邮件捕获。

🚀 部署与优化:包含SEO优化,如动态title和meta description,以及JSON-LD、OG标签等。提供快速启动教程,指导用户在本地运行和Vercel部署。

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

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 WorksTabs 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

SEO

UX / UI

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 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

6 · Delivery Format


7 · Grading Checklist (自检)

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

kimik2.ai Kimi K2 AI聊天 Next.js Landing Page
相关文章