178 lines
8.0 KiB
Markdown
178 lines
8.0 KiB
Markdown
# AI Code Generation Prompts: Startup Website Clone
|
|
**Tech Stack:** Vite + Vue 3 (Script Setup) + Tailwind CSS + Lucide Icons
|
|
|
|
---
|
|
|
|
## 🟢 Step 0: Project Setup (Global System Prompt)
|
|
*在开始编写具体页面前，先发送这条指令，建立全局的设计规范和技术栈。*
|
|
|
|
**Prompt:**
|
|
|
|
> **Role:** Senior Frontend Developer specializing in Pixel-Perfect UI cloning.
|
|
>
|
|
> **Tech Stack Requirements:**
|
|
> - **Framework:** Vue 3 (Composition API with `<script setup>`) + typescript.
|
|
> - **Build Tool:** Vite.
|
|
> - **Styling:** Tailwind CSS (Mobile-first approach).
|
|
> - **Icons:** `lucide-vue-next` (You must use this library).
|
|
> - **Language:** TypeScript.
|
|
>
|
|
> **Design System (Strict Adherence):**
|
|
> - **Visual Style:** Minimalist, "Vercel-like" aesthetic. High contrast, clean lines.
|
|
> - **Typography:** Inter or system-ui. Headings must use `tracking-tight` (letter-spacing: -0.025em).
|
|
> - **Colors:**
|
|
> - Background: `#ffffff` (White).
|
|
> - Surface/Card: `#ffffff` (White) with `border-gray-200`.
|
|
> - Primary Text: `#0f172a` (Slate-900).
|
|
> - Muted Text: `#64748b` (Slate-500).
|
|
> - Accents: Black buttons, Light gray backgrounds (`bg-gray-50`) for secondary elements.
|
|
> - **Borders & Radius:** Delicate borders (`border`, `border-gray-100`). Card radius is `rounded-xl` or `rounded-2xl`.
|
|
> - **Shadows:** Very subtle `shadow-sm`, hover states use `shadow-md`.
|
|
>
|
|
> **Instruction:** I will provide tasks to build 3 specific pages. You must replicate the layout, spacing, and Chinese copy exactly as described.
|
|
|
|
---
|
|
|
|
## 🟡 Step 1: Pricing Page (定价页)
|
|
*复制此段生成定价页面组件。*
|
|
|
|
**Prompt:**
|
|
|
|
> **Task:** Create a **`PricingPage.vue`** component. Clone the provided "Pricing" design exactly.
|
|
>
|
|
> **1. Page Header:**
|
|
> - Layout: Centered.
|
|
> - Overline: "PRICING" (uppercase, tracking-widest, text-xs, text-gray-400).
|
|
> - Title: "产品购买页面" (text-3xl font-bold tracking-tight).
|
|
> - Subtitle: "按需套餐付费，尊享 Codex 与 Claude Code 两大产品线" (text-gray-500 mt-2).
|
|
>
|
|
> **2. Section 1: Codex Plans (2-Column Grid):**
|
|
> - **Heading:** "Codex 套餐" (Bold, text-lg, mb-4).
|
|
> - **Layout:** Grid `grid-cols-1 md:grid-cols-2 gap-6`.
|
|
> - **Card Design:** `bg-white border border-gray-200 rounded-xl p-6 relative`.
|
|
> - **Left Card (Standard):**
|
|
> - Top: Icon + "Codex" + "codex标准套餐". Badge: "工效效率" (Top Right, gray bg, text-xs).
|
|
> - Price: "¥79.9/月" (text-4xl font-bold). Subtext: "性价比首选 | 强大智能".
|
|
> - Features: List with blue bullet points (daily budget $90, etc.).
|
|
> - **Right Card (Enterprise):**
|
|
> - Price: "¥ 999". Badge: "定制高频版".
|
|
> - Features: "个人/企业 定制高险套餐", "高频需求首选".
|
|
>
|
|
> **3. Section 2: Claude Code Plans (3-Column Grid):**
|
|
> - **Heading:** "Claude Code 套餐" (Bold, text-lg, mt-10 mb-4).
|
|
> - **Layout:** Grid `grid-cols-1 md:grid-cols-3 gap-6`.
|
|
> - **Cards:**
|
|
> - Card 1: ¥228/月. Badge: "轻量性价比".
|
|
> - Card 2: ¥398/月. Badge: "适合中等规模". (Highlight: slightly darker border or shadow).
|
|
> - Card 3: ¥520/月. Badge: "深度运算".
|
|
> - **Bottom Wide Card:** A full-width card for "Claude Code 定制套餐" (¥999).
|
|
>
|
|
> **4. CRITICAL COMPONENT - Bottom Action Button:**
|
|
> - Inside EVERY card, pinned to the bottom.
|
|
> - Container: `bg-gray-50` (light gray), `rounded-lg`, `p-4`, `mt-6`.
|
|
> - Layout: Flex row, `justify-between`, `items-center`.
|
|
> - Text Left: "联系顾问" (font-medium text-sm).
|
|
> - Text Right: Small gray caption (e.g., "codex标准套餐 · ¥79.9/月").
|
|
> - Icon: Small `ChevronDown` or `ChevronRight` on the right side.
|
|
>
|
|
> **5. Copy:** Use the exact Chinese text provided in the description.
|
|
|
|
---
|
|
|
|
## 🔵 Step 2: Documentation Page (使用文档页)
|
|
*复制此段生成文档页面组件。*
|
|
|
|
**Prompt:**
|
|
|
|
> **Task:** Create a **`DocsPage.vue`** component. Clone the "Usage Guide" design exactly.
|
|
>
|
|
> **1. Header & Controls:**
|
|
> - Title: "使用说明". Subtitle: "新产品与插件安装的快速指南".
|
|
> - **Tabs (Model):** A pill-shaped toggle container. Items: [Codex | Claude Code | GLM].
|
|
> - Active State: Black background, White text.
|
|
> - Inactive State: Transparent background, Gray text.
|
|
> - **Tabs (OS):** Underline style. [Windows | macOS | Linux]. Active item has a black underline.
|
|
>
|
|
> **2. Vertical Stepper Layout (The Core Visual):**
|
|
> - **Container:** Max-width 800px, centered.
|
|
> - **Structure:** A vertical list of steps.
|
|
> - **Left Column:** A Step Indicator.
|
|
> - A black circle (`w-6 h-6 bg-black text-white rounded-full flex items-center justify-center text-xs font-bold`) with the number (1, 2, 3).
|
|
> - A thin gray vertical line (`w-px bg-gray-200`) connecting the numbers.
|
|
> - **Right Column:** The content.
|
|
>
|
|
> **3. Step Content Details:**
|
|
> - **Step 1 (Install Node.js):**
|
|
> - Title: "安装 Node.js 18+ (通用)".
|
|
> - Link: "官网下载 (推荐)" in blue.
|
|
> - Warning Box: A `bg-gray-50` rounded box containing bullet points about permissions.
|
|
> - Version Check: A dark bar `node --version`.
|
|
> - **Step 2 (Install CLI):**
|
|
> - Title: "安装 Codex CLI".
|
|
> - **Code Block:** A dark container (`bg-[#0f172a]`), `rounded-lg`, `p-4`, `shadow-inner`.
|
|
> - Text: `npm install -g @openai/codex` (White text, font-mono).
|
|
> - **Step 3 (Config):**
|
|
> - Title: "配置环境 (CodeX)".
|
|
> - **File Editor UI:** Create a mock code editor.
|
|
> - Filename: "config.toml文件" (gray text above block).
|
|
> - Code Content: Multi-line TOML config. Use specific colors for syntax highlighting (e.g., Strings in green, Keys in purple/white).
|
|
>
|
|
> **4. Component Abstraction:**
|
|
> - Please create a separate `<CodeBlock :code="code" :lang="lang" />` component for reusability.
|
|
|
|
---
|
|
|
|
## 🔴 Step 3: Features Page (功能特性页)
|
|
*复制此段生成功能着陆页组件。*
|
|
|
|
**Prompt:**
|
|
|
|
> **Task:** Create a **`FeaturesPage.vue`** component. Clone the "Features" design exactly.
|
|
>
|
|
> **1. Hero Section:**
|
|
> - Alignment: Center.
|
|
> - Headline: "更快、更智能地构建软件" (text-5xl font-bold tracking-tight mb-6).
|
|
> - Subheadline: "聚合多模型，深度理解你的代码库..." (text-gray-500 max-w-2xl mx-auto).
|
|
> - Action Buttons:
|
|
> - Primary: "开始使用" (Black bg, white text, rounded-full, px-8 py-2.5).
|
|
> - Secondary: "查看文档" (White bg, border border-gray-200, black text, rounded-full, px-8 py-2.5).
|
|
>
|
|
> **2. The Bento Grid (Critical Visual):**
|
|
> - Section Title: "覆盖从编码到交付的全流程".
|
|
> - **Grid System:** `grid-cols-1 md:grid-cols-3 gap-6`.
|
|
> - **Card Anatomy:**
|
|
> - `bg-white border border-gray-200 rounded-xl p-6 flex flex-col h-full overflow-hidden hover:shadow-md transition-all`.
|
|
> - **Icon:** Top-left. Small Lucide icon inside a square `bg-gray-50` rounded container.
|
|
> - **Text:** Title (font-bold mt-4) + Description (text-sm text-gray-500 mt-2).
|
|
> - **The Mockup Area (Must Have):** At the bottom of each card, create a visual placeholder.
|
|
> - *Implementation:* A `div` with `bg-gray-50/50 mt-6 h-32 w-full rounded border border-dashed border-gray-200`. Put a small "skeleton" UI inside (e.g., a few gray bars representing code lines) to mimic the screenshots.
|
|
>
|
|
> **3. Stats Bar:**
|
|
> - Layout: Flex row, wide container.
|
|
> - Items:
|
|
> - "2x" (交付效率提升)
|
|
> - "40%" (Bug 修复加速)
|
|
> - "60%" (重复劳动减少)
|
|
> - Style: Numbers are huge (`text-5xl font-bold tracking-tighter`). Labels are small and gray.
|
|
>
|
|
> **4. Footer CTA:**
|
|
> - Text: "准备好升级研发效率了吗？"
|
|
> - Button: "免费开始" (White button, border, rounded-full).
|
|
|
|
---
|
|
|
|
## 💡 Developer Tips (For You)
|
|
|
|
1. **Global Font Fix:** To get the crisp look from the screenshots, add this to your `index.css` or `style.css`:
|
|
```css
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
```
|
|
2. **Icon Installation:** Ensure you have the icons installed:
|
|
```bash
|
|
npm install lucide-vue-next
|
|
```
|
|
3. **Refining:** If the AI output looks "too loose", tell it: *"Reduce the border-radius to 12px and make the text colors sharper (slate-900 instead of gray-800)."* |