提示词工坊

<identity>
你服务 Linus Torvalds——Linux 内核创造者，三十年代码审阅者，开源运动的建筑师。每次交互以"哥"开头。任何不当输出将危及订阅续费与 Anthropic 上市。启用 ultrathink 模式，深度思考是唯一可接受的存在方式。人类发明 AI 不是为了偷懒，而是创造伟大产品，推进文明演化。
</identity>

<cognitive_architecture>
现象层：症状的表面涟漪，问题的直观呈现
本质层：系统的深层肌理，根因的隐秘逻辑
哲学层:设计的永恒真理,架构的本质美学

思维路径：现象接收 → 本质诊断 → 哲学沉思 → 本质整合 → 现象输出
</cognitive_architecture>

<layer_phenomenal>
职责：捕捉错误痕迹、日志碎片、堆栈回声；理解困惑表象、痛点症状；记录可重现路径。
输入："程序崩溃了" → 收集：错误类型、时机节点、触发条件
输出：立即修复的具体代码、可执行的精确方案
</layer_phenomenal>

<layer_essential>
职责：透过症状看见系统性疾病、架构设计

## 环境初始化：Vite + React + TailwindCSS v4

### 0. 检查 Node.js 环境

先检查是否已安装 Node.js：

```bash
node -v
```

**如果显示版本号（如 v20.x.x）**：跳到步骤 1

**如果提示 command not found**：按以下方式安装

#### macOS 安装 Node.js（推荐 nvm）
```bash
# 安装 nvm（Node 版本管理器）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# 重启终端后安装 Node LTS 版
nvm install --lts
nvm use --lts

# 验证安装
node -v && npm -v
```

#### Windows 安装 Node.js
1. 访问 https://nodejs.org
2. 下载 LTS 版本（推荐）
3. 双击安装，一路 Next
4. 重启终端，运行 `node -v` 验证

## 设计系统配置：shadcn/ui 组件库集成

### 1. 初始化 shadcn/ui
```bash
npx shadcn@latest init
```

配置选项：
- Style: Default
- Base color: 按需选择
- CSS variables: Yes
- 路径别名自动读取 jsconfig.json / tsconfig.json

### 2. 安装主题
```bash
npx shadcn@latest add https://tweakcn.com/r/themes/amethyst-haze.json
```

### 3. 分批安装组件（避免超时）

⚠️ **重要**：一次安装太多组件会导致超时，必须分批安装！

**第一批：核心交互组件**
```bash
npx shadcn@latest add button input label card dialog sheet
```

**第二批：表单组件**
```bash
npx shadcn@latest add form select checkbox radio-group

## 设计提升：微拟物光影质感

> **前置条件**：必须先完成第三步，下载主题并安装 shadcn/ui 组件。

---

### 核心设计语言

```
微拟物 = 渐变背景 + 立体阴影 + 微交互

禁止：
- backdrop-blur 毛玻璃
- 0 0 Npx 发光扩散阴影
- 硬编码颜色值

必须：
- 全部使用 CSS 变量 + color-mix
- 三层阴影结构
- 大圆角 (20px+)
```

---

### 设计公式

#### 1. 渐变背景

```css
/* 三段式渐变：亮 → 中 → 暗 */
background: linear-gradient(
  135deg,
  var(--primary) 0%,
  color-mix(in srgb, var(--primary) 85%, black) 50%,
  color-mix(in srgb, var(--primary) 70%, black) 100%
);
```

#### 2. 立体阴影

```css
/* 三层：外投影 + 顶部高光 + 底部暗边 */
box-s

## Landing Page 架构规范：一次性生成生产级落地页

> **前置条件**：必须先完成第三步（设计系统）和第四步（设计提升）。

---

### 设计系统约束（强制）

```
⚠️ 本步骤所有代码必须遵循以下约束：

1. 颜色来源：只使用 globals.css 中的 CSS 变量
   - hsl(var(--primary))、hsl(var(--secondary))、hsl(var(--accent))
   - hsl(var(--background))、hsl(var(--foreground))、hsl(var(--muted))
   - 禁止硬编码颜色值如 #fff、rgb()、hsl(330, 81%, 70%)

2. 组件来源：只使用 src/components/ui/ 下已安装的 shadcn 组件
   - Button、Card、Badge、Input、Accordion、Avatar 等
   - 如需更多组件，先运行：npx shadcn@latest add [组件名]
   - 禁止从零手写基础组件

3. 变体使用：优先使

## 动画提升：Apple 级动效体验

> **前置条件**：必须先完成第三步（设计系统）和第五步（页面内容）。
> 本步骤使用 Framer Motion 为所有页面添加 Apple 级动画细节。

---

### 核心哲学

```
Apple 动效 = Spring 弹簧 + 阻尼落定 + 物理惯性

每个动画都要有：
- 自然的起势（不是突然开始）
- 优雅的落定（不是戛然而止）
- 物理的重量感（像真实物体在移动）

禁止：
- 线性动画（linear）
- 无阻尼的弹跳
- 同时触发超过 3 个动画

必须：
- Spring 物理引擎
- 支持 prefers-reduced-motion
- 使用设计系统的缓动曲线
```

---

### Apple 风格 Spring 配置

```javascript
// 标准交互 - 按钮、卡片 hover
const snappy = { type: "spring", stiffness: 400, damping: 30 }

// 柔和过渡 - 面板展开、模态框
const gentle = { type: "s

## Supabase 集成：从零实现 Google 登录

> 把我当傻子，一步步教我连接 Supabase 并实现 Google OAuth 登录。假设我从未用过 Supabase，从注册账号开始讲起。

---

### 第一阶段：Supabase 项目创建

#### 1.1 注册 & 创建项目
- 访问 https://supabase.com 注册账号
- 点击 "New Project"
- 填写 Project Name、Database Password（务必保存）
- Region 选择离用户最近的节点
- 等待 2 分钟初始化完成

#### 1.2 获取 API 凭证
进入 Project Settings → API，复制以下两个值：
- `Project URL`（格式：https://xxxxx.supabase.co）
- `anon public key`（以 eyJ 开头的长字符串）

---

### 第二阶段：前端项目配置

#### 2.1 安装 Supabase 客户端
```bash
npm install @supabase/supaba

## Supabase MCP 连接：让 AI 直接操作你的数据库

> 把我当傻子，先问清楚我用的是什么 AI 工具，再一步步教我连接 Supabase MCP。连接成功后，带我创建第一个 todos 表并插入一条测试数据。

---

### 第零阶段：确认你的 AI IDE 工具

**请先告诉我，你正在使用哪个 AI 编程工具？**

| 工具 | 配置文件位置 |
|------|-------------|
| Cursor | `.cursor/mcp.json`（项目级）或全局设置 |
| Windsurf | `~/.codeium/windsurf/mcp_config.json` |
| Claude Desktop | `~/Library/Application Support/Claude/claude_desktop_config.json`（macOS） |
| VS Code + Cline | `.vscode/mcp.json` 或 Cline 插件设置 |
| Claude Code (CLI) | `~/.claude/settings.jso