网站: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 —
Tabsstep-by-step walkthrough with illustrations. - Testimonials — 3 quotes (
Cardgrid). - 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-imageorai-chat: tiers Starter / Growth / Business. - Use insights from
research.mdto set quota & price placeholders.
SEO
- Dynamic
<title>&<meta name="description">viagenerateMetadata(). - JSON-LD:
BreadcrumbList&Product. - OG tags (
og:title,og:description,og:image,twitter:card). - Sitemap &
robots.txtvia Next.js route handlers.
UX / UI
- Tailwind palette
slate+ accentindigo. - Light & dark modes (
classstrategy, respect system). - Motion:
framer-motionfade-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 →toaston 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
6 · 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无错误。
Leave a Reply Cancel reply