极简复盘网页的提示词

Act as a World-Class Senior Frontend Engineer and UI/UX Designer.

I need you to build a complete, deployable React application called **"DBT Retro - AI Reflection Mentor"**.

### 1. Project Overview & Tech Stack
- **Framework**: React 18 + Vite + TypeScript.
- **Styling**: Tailwind CSS (Use a clean, modern, card-based aesthetic with Slate/Brand colors).
- **AI Integration**: Google GenAI SDK (`@google/genai`) using `gemini-2.5-flash`.
- **Icons**: `lucide-react`.
- **Utils**: `html-to-image` for exporting screenshots.
- **Deployment**: Ready for Vercel (include `vercel.json`).

### 2. Product Philosophy: The DBT Framework
The app is based on the "Did / Bad / Thinking" reflection method:
1.  **Did (Context)**: A simple list of tasks completed (Max 5 items). AI uses this only for context.
2.  **Bad (Behavioral)**: Negative behaviors or habits. Requires **Title** + **Description**. (Max 3 items).
3.  **Thinking (Cognitive)**: Mental blocks or cognitive struggles. Requires **Title** + **Description**. (Max 3 items).

### 3. Key Features & Requirements

#### A. User Input Form (`ReflectionForm.tsx`)
- **Did Section**: Simple input list with "+" add button. Green theme.
- **Bad/Thinking Sections**: Complex inputs. Each item has a Title input and a Description textarea. Red theme (Bad) and Blue theme (Thinking).
- **Constraints**: 
  - "Did" max 5 items. 
  - "Bad" & "Thinking" max 3 items (Quality over quantity).
- **Template Button**: A "Fill Example (一键填入示例)" button that populates the form with specific Chinese placeholder data (detailed below).
- **Tutorial Link**: Add a link next to the template button: `https://www.believed-breadfruit.top/2025/11/22/2025-11-22-%E4%B8%80%E4%B8%AAai%E6%9E%81%E7%AE%80%E5%A4%8D%E7%9B%98%E6%80%9D%E8%B7%AF/`

#### B. AI Analysis Logic (`geminiService.ts`)
- **API**: Use `process.env.API_KEY`.
- **Persona**: "Personal Mentor". Tone: Direct, Honest, Profound, Friendly (NOT academic/scientific).
- **Logic**: 
  - Analyze each "Bad" and "Thinking" item individually.
  - **Input**: Context from "Did", items from "Bad" & "Thinking".
  - **Output JSON Schema**:
    - `related_item_id`: To match analysis to the specific user input.
    - `essence`: "The Essence" (问题的本质) - One profound sentence explaining *why* this happened.
    - `true_goal`: "True Goal" (真实目标) - What the user was subconsciously trying to achieve.
    - `suggestions`: Exactly 3 core, actionable suggestions.
    - `encouragement`: A global closing encouragement.
- **Language**: Detect language automatically, but app defaults to Chinese.

#### C. Analysis Result View (`AnalysisView.tsx`)
- **Layout**: 
  - Display current date prominently.
  - Render cards for each analyzed item. 
  - Cards should show the User's Title/Description at the top, followed by the AI's Essence, True Goal, and 3 Suggestions.
- **Export Feature**: A "Save as Images" button. When clicked, it must download **3 separate PNG files**:
  1. Full Report (AI + User Content).
  2. AI Analysis Only.
  3. User Reflection Content Only.

#### D. Global & Footer
- Default Language: Chinese ('zh'). Remove language switcher UI, but keep structure clean.
- Footer: "Powered by Gemini 2.5 | My Xiaohongshu". 
- **Xiaohongshu Link**: `https://www.xiaohongshu.com/user/profile/5d17984f0000000012021c90`

### 4. Specific Data & Copy

**Template Data (for the "Fill Example" button):**
- **Did**: "口语练习", "学AI agent", "健身"
- **Bad**: Title: "短视频刷太多了", Desc: "短视频刷太多了，似乎大脑累的时候，总是有些间隙想消费一些轻松的无脑的内容...\n大脑需要一些有营养的东西..."
- **Thinking**: Title: "目标还是不够清晰", Desc: "我的学习目标还是不够清晰...比如学Ai agent，两个礼拜后，要达成什么..."

**i18n Copy (Chinese):**
- Subtitle: "你的 AI 复盘导师。复盘你 做了什么 (Did)，哪里 做得不好 (Bad)，以及当下的 思考 (Thinking)。"
- Labels: "问题的本质", "你的真实目标", "给你的3条建议".

### 5. Implementation Details

Please generate the following files:
1.  `package.json` (Include dependencies: react, vite, lucide-react, html-to-image, @google/genai).
2.  `vite.config.ts`
3.  `vercel.json` (Rewrites for SPA).
4.  `metadata.json` (Name: DBT Retro).
5.  `types.ts` (Interfaces for ReflectionItem, AIAnalysis, etc.).
6.  `services/geminiService.ts` (The critical prompt engineering logic).
7.  `i18n.tsx` (Chinese translations).
8.  `components/Header.tsx`
9.  `components/ReflectionForm.tsx`
10. `components/AnalysisView.tsx` (With the 3-image export logic).
11. `App.tsx` (State management).
12. `index.html` (Tailwind CDN setup for simplicity or PostCSS config if preferred, ensure standard Vite structure).
13. `README.md` (Documentation).

Ensure the code is clean, modern, and ready to run.

我怎么复盘？我写三类内容：Did / Bad / Thinking
• Did：我今天做了什么
• Bad：我觉得做得不够好的地方（需要改变）
• Thinking：我脑子里出现的任何念头（即使是没成形的）
Bad 是我想修正的问题。Thinking 是我想挖根源的地方。
为了让 AI 能更快读懂我，我还专门做了一个 GPT 叫 「反思助手」。
它的提示词非常简单直接：
我会给出一段反思内容，请你扮演我的人生导师，先分析问题本质，然后针对我的实际情况给出建议。
我把复盘内容丢进去，AI可以立即把我卡住的点掰开、拆解、重建，让我看见前因后果，也给我清晰可落地的解决方向。
—-
我想把这个变成可以给客户用的工作流，做成一个产品，一起来开发一个创意的网页