zhengte/zhengte.doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f94ffe0adc565cc464ef628f2131a2f2bf7f6b23
zhengte.doc/cursor.md
yinsx f94ffe0adc init
2026-01-05 10:16:36 +08:00

8.0 KiB
Raw Blame History

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: 
    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: 
    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)."