# 方案1：ImageMagick 批量?jī)?yōu)化（命令行）
# 放大 2x + 增強(qiáng)銳度 + 提高對(duì)比度
convert input.png -resize 200% -sharpen 0x1.0 -brightness-contrast 0x10 output.png
# 方案2：使用專(zhuān)用工具
# - Squoosh (Web): https://squoosh.app/ - 可視化壓縮/放大
# - Upscayl (Desktop): 開(kāi)源 AI 圖片放大工具
# - CleanShot X (Mac): 專(zhuān)業(yè)截圖工具，帶標(biāo)注和放大功能

【圖片說(shuō)明】
- 頁(yè)面名稱(chēng)：用戶(hù)個(gè)人中心頁(yè)
- 設(shè)計(jì)尺寸：375px（移動(dòng)端）
- 設(shè)計(jì)規(guī)范：使用 Ant Design Mobile 組件庫(kù)

【圖片內(nèi)容描述】
頂部區(qū)域：
- 頭像：80x80px 圓形，位于頁(yè)面水平居中
- 用戶(hù)名：頭像下方 16px，18px 粗體，顏色 #333333
- 用戶(hù)ID：用戶(hù)名下方 8px，14px 常規(guī)體，顏色 #999999

中部區(qū)域（功能菜單）：
- 列表項(xiàng)高度：56px
- 圖標(biāo)：24x24px，位于列表左側(cè)，顏色 #666666
- 文字：16px，顏色 #333333，右對(duì)齊箭頭圖標(biāo)
- 分割線：1px #EEEEEE，位于每項(xiàng)底部

底部區(qū)域：
- TabBar：高度 49px，背景白色，上邊框 1px #EEEEEE
- 選中態(tài)：圖標(biāo)顏色 #1890FF，文字顏色 #1890FF

【特別關(guān)注】
- 第 3 個(gè)列表項(xiàng)右側(cè)有一個(gè)紅點(diǎn) Badge，需要實(shí)現(xiàn)
- 整體背景色是 #F5F5F5

【圖片說(shuō)明】
- 文檔類(lèi)型：PRD 需求文檔截圖（飛書(shū)文檔）
- 所屬模塊：訂單管理 - 退款流程
- 當(dāng)前狀態(tài)：截圖中有 3 處產(chǎn)品同學(xué)的手寫(xiě)批注（紅色文字）

【圖片內(nèi)容轉(zhuǎn)錄】
文字內(nèi)容（原文）：
> 3.2 退款審核流程
> 
> 當(dāng)用戶(hù)提交退款申請(qǐng)后，系統(tǒng)需要：
> 1. 自動(dòng)校驗(yàn)訂單狀態(tài)是否為"已發(fā)貨"或"已完成"
> 2. 校驗(yàn)退款金額是否 <= 訂單實(shí)付金額
> 3. 校驗(yàn)申請(qǐng)時(shí)間是否在簽收后 7 天內(nèi)
> 4. 以上全部通過(guò)后，自動(dòng)通過(guò)退款申請(qǐng)；任一條件不滿(mǎn)足，轉(zhuǎn)人工審核

【手寫(xiě)批注轉(zhuǎn)錄】
- 第 2 條旁邊批注："注意要排除優(yōu)惠券抵扣部分"
- 第 3 條旁邊批注："生鮮類(lèi)商品改為 24 小時(shí)"
- 頁(yè)面底部批注："需要增加退款原因必填項(xiàng)"

【我的理解/疑問(wèn)】
- 優(yōu)惠券抵扣排除是指用實(shí)付金額 - 優(yōu)惠券金額？
- 生鮮類(lèi)的判斷邏輯是基于商品類(lèi)目編碼嗎？

【圖片說(shuō)明】
- 運(yùn)行環(huán)境：Node.js v20.11.0 / macOS 14
- 觸發(fā)操作：執(zhí)行 `npm run build`
- 項(xiàng)目框架：Vite 5.x + React 18 + TypeScript

【報(bào)錯(cuò)信息文本化】（已從圖中提取）

【補(bǔ)充上下文】
- 這個(gè)文件昨天還能正常構(gòu)建，今天merge了同事的PR后出現(xiàn)此錯(cuò)誤
- 同事PR主要改動(dòng)了 tsconfig.json 的 "jsx" 配置
- tsconfig.json 當(dāng)前相關(guān)配置："jsx": "react-jsx", "moduleResolution": "bundler"

Step 1 - 組件拆分：
"先不要寫(xiě)代碼。只看這張圖，幫我列出這個(gè)頁(yè)面包含哪些獨(dú)立的組件，
并說(shuō)明每個(gè)組件的職責(zé)和 Props 設(shè)計(jì)。"

Step 2 - 單個(gè)組件實(shí)現(xiàn)：
"基于上一步的分析，先實(shí)現(xiàn) [ComponentName] 組件。
這是該組件的放大截圖：[圖片]
這是精確的尺寸和樣式說(shuō)明：[文字描述]"

Step 3 - 樣式校準(zhǔn)：
"組件已實(shí)現(xiàn)，但與設(shè)計(jì)稿有差異。以下是需要調(diào)整的點(diǎn)：
1. 標(biāo)題字號(hào)應(yīng)該是 16px 而不是 14px
2. 卡片間距應(yīng)該是 24px 而不是 16px
3. 按鈕顏色應(yīng)該是 #1677FF 而不是 #1890FF
請(qǐng)只修改樣式部分。"

Step 4 - 整合聯(lián)調(diào)：
"所有組件已完成，現(xiàn)在需要：
1. 整合到 App.tsx 中
2. 處理組件間的數(shù)據(jù)傳遞
3. 添加響應(yīng)式布局（<768px 時(shí) sidebar 收起）"

Step 1: 設(shè)計(jì)稿導(dǎo)出
  ↓  從 Figma 導(dǎo)出為 PNG（2x 倍圖）
  ↓
Step 2: 圖片預(yù)處理
  ↓  使用 Squoosh 壓縮到合理大小（<1MB）
  ↓
Step 3: 信息結(jié)構(gòu)化
  ↓  手動(dòng)提取關(guān)鍵尺寸、顏色、字體信息，按模板整理
  ↓
Step 4: 分步實(shí)現(xiàn)
  ↓  先結(jié)構(gòu) → 再樣式 → 后交互
  ↓
Step 5: 像素級(jí)校準(zhǔn)
  ↓  使用瀏覽器 DevTools 對(duì)比，逐條反饋差異
  ↓
Step 6: 響應(yīng)式適配
  ↓  補(bǔ)充不同斷點(diǎn)的截圖，說(shuō)明布局變化規(guī)則

【設(shè)計(jì) Token】
顏色：
- 主色: #1677FF (brand-primary)
- 成功: #52C41A (success)
- 警告: #FAAD14 (warning)
- 錯(cuò)誤: #F5222D (error)
- 文字主色: #262626 (text-primary)
- 文字次色: #595959 (text-secondary)
- 邊框: #D9D9D9 (border)
- 背景: #F5F5F5 (bg)

字體：
- 標(biāo)題: 16px / 500 weight
- 正文: 14px / 400 weight
- 輔助文字: 12px / 400 weight
- 行高: 1.5

間距：
- XS: 4px, SM: 8px, MD: 16px, LG: 24px, XL: 32px

【技術(shù)約束】
- UI 組件庫(kù)：Ant Design 5.x
- 圖標(biāo)庫(kù)：@ant-design/icons
- 不允許自定義組件，除非 Ant Design 無(wú)法覆蓋
- 使用組件：Button, Table, Form, Input, Select, DatePicker, Modal

Step 1: 文檔結(jié)構(gòu)化
  ↓  手動(dòng)轉(zhuǎn)錄需求文字，標(biāo)注優(yōu)先級(jí)和依賴(lài)關(guān)系
  ↓
Step 2: 需求確認(rèn)
  ↓  "以下是我理解的需求，請(qǐng)確認(rèn)是否正確：[你的理解]"
  ↓
Step 3: 技術(shù)方案
  ↓  "基于以上需求，給出技術(shù)實(shí)現(xiàn)方案，包括：接口設(shè)計(jì)、狀態(tài)管理、組件拆分"
  ↓
Step 4: 分功能實(shí)現(xiàn)
  ↓  每個(gè)功能點(diǎn)獨(dú)立實(shí)現(xiàn)、獨(dú)立測(cè)試
  ↓
Step 5: 邊界條件補(bǔ)充
  ↓  針對(duì)截圖中的模糊地帶，提出假設(shè)讓 Claude Code 處理

Step 1: 文本化優(yōu)先
  ↓  盡可能復(fù)制錯(cuò)誤文本，截圖僅作為輔助
  ↓
Step 2: 環(huán)境信息補(bǔ)充
  ↓  提供完整的運(yùn)行環(huán)境信息
  ↓
Step 3: 上下文關(guān)聯(lián)
  ↓  提供相關(guān)代碼片段 + 最近變更
  ↓
Step 4: 分步診斷
  ↓  先定位 → 再分析 → 最后給修復(fù)方案

【錯(cuò)誤文本】

【運(yùn)行環(huán)境】
- OS: macOS 14.2 / Windows 11 / Ubuntu 22.04
- Node.js: v20.11.0
- Package Manager: pnpm 8.15
- 相關(guān)依賴(lài)版本：
  - react: ^18.2.0
  - typescript: ^5.3.0
  - vite: ^5.0.10

【觸發(fā)條件】
- 執(zhí)行命令：npm run build
- 觸發(fā)文件：src/components/UserCard.tsx
- 最近變更：merge 了 feature/user-profile 分支，該分支修改了 tsconfig.json

【相關(guān)代碼】
```tsx
// src/components/UserCard.tsx（精簡(jiǎn)后的關(guān)鍵代碼）
const UserCard = ({ user }: Props) => {
  // ... 關(guān)鍵邏輯
}

---

### 3.4 場(chǎng)景四：流程圖/架構(gòu)圖 → 代碼實(shí)現(xiàn)

#### 特殊挑戰(zhàn)

流程圖的核心是**關(guān)系**，而圖片中的關(guān)系最難被 AI 準(zhǔn)確識(shí)別。

#### 推薦方案：圖片 + Mermaid 文本雙軌制

**Step 1**：自己先用 Mermaid 將流程圖轉(zhuǎn)為文本描述（即使不熟練， Claude Code 也可以幫你完成這一步）：

```markdown
【流程圖說(shuō)明】
這是用戶(hù)下單的流程圖，我已經(jīng)用 Mermaid 將其結(jié)構(gòu)化：

```mermaid
graph TD
    A[用戶(hù)提交訂單] --> B{庫(kù)存校驗(yàn)}
    B -->|庫(kù)存充足| C[創(chuàng)建訂單]
    B -->|庫(kù)存不足| D[返回缺貨提示]
    C --> E{支付校驗(yàn)}
    E -->|支付成功| F[更新訂單狀態(tài)為已支付]
    E -->|支付失敗| G[取消訂單]
    F --> H[通知倉(cāng)庫(kù)發(fā)貨](méi)
    H --> I[更新訂單狀態(tài)為已發(fā)貨](méi)

**Step 2**：將 Mermaid 代碼 + 原始截圖一起發(fā)給 Claude Code：
> "我已經(jīng)把流程圖轉(zhuǎn)為了 Mermaid 代碼，請(qǐng)對(duì)照原始截圖確認(rèn)理解是否正確。如果一致，請(qǐng)基于此實(shí)現(xiàn)訂單服務(wù)的核心邏輯。"

#### 工具推薦

- **Mermaid Live Editor**：[https://mermaid.live](https://mermaid.live) - 在線編輯和預(yù)覽
- **Excalidraw**：[https://excalidraw.com](https://excalidraw.com) - 手繪風(fēng)格圖表，支持導(dǎo)出為圖片+結(jié)構(gòu)化數(shù)據(jù)
- **Draw.io**：[https://app.diagrams.net](https://app.diagrams.net) - 支持導(dǎo)出為 XML，可用文本描述

---

## 四、工具鏈推薦：讓圖片識(shí)別更準(zhǔn)確的輔助工具

### 4.1 截圖/標(biāo)注工具

| 工具 | 平臺(tái) | 用途 | 推薦理由 |
|------|------|------|---------|
| **CleanShot X** | macOS | 截圖+標(biāo)注 | 支持區(qū)域截圖、放大鏡、尺寸標(biāo)注，輸出的圖片質(zhì)量高 |
| **Snipaste** | Win/Mac | 截圖+貼圖 | 可以截圖后直接貼到屏幕上對(duì)比，F(xiàn)3 貼圖功能極其方便 |
| **Xnip** | macOS | 滾動(dòng)截圖 | 長(zhǎng)頁(yè)面無(wú)縫滾動(dòng)截圖，自動(dòng)拼接 |
| **ShareX** | Windows | 全能截圖 | 開(kāi)源免費(fèi)，支持 OCR、標(biāo)注、上傳圖床 |
| **Shottr** | macOS | 像素級(jí)截圖 | 支持測(cè)量像素距離、取色、標(biāo)注，前端開(kāi)發(fā)神器 |

### 4.2 圖片優(yōu)化工具

| 工具 | 類(lèi)型 | 用途 |
|------|------|------|
| **Squoosh** | Web | Google 出品，可視化壓縮/放大/格式轉(zhuǎn)換 |
| **Upscayl** | Desktop | 開(kāi)源 AI 放大工具，適合將低分辨率截圖放大 2-4x |
| **ImageMagick** | CLI | 命令行批量處理，適合自動(dòng)化腳本 |
| **TinyPNG** | Web | 智能壓縮 PNG/JPG，減少文件大小同時(shí)保持清晰度 |

### 4.3 OCR/文字提取工具

| 工具 | 特點(diǎn) | 適用場(chǎng)景 |
|------|------|---------|
| **Mac 自帶預(yù)覽** | 選中文字直接復(fù)制 | 簡(jiǎn)單文檔截圖 |
| **QQ 截圖 (Ctrl+Alt+O)** | 截圖后按 O 直接 OCR | 快速提取圖中文字 |
| **微信截圖 (Alt+A)** | 截圖后按"提取文字" | 中文識(shí)別效果好 |
| **PearOCR** | Web 端免費(fèi) OCR | 無(wú)需安裝，隱私安全 |
| **PaddleOCR** | 開(kāi)源本地 OCR | 技術(shù)向用戶(hù)，可本地部署 |

### 4.4 設(shè)計(jì)稿轉(zhuǎn)代碼工具（配合 Claude Code 使用）

| 工具 | 功能 | 與 Claude Code 的配合方式 |
|------|------|------------------------|
| **Figma Dev Mode** | 導(dǎo)出 CSS / 測(cè)量尺寸 | 導(dǎo)出 CSS + 截圖 → 一起發(fā)給 Claude Code 作為參考 |
| **Codia AI** | Figma 插件，生成 React/Vue 代碼 | 先用 Codia 生成初版代碼，再用 Claude Code 優(yōu)化調(diào)整 |
| **Locofy** | Figma/Adobe XD 轉(zhuǎn)代碼 | 導(dǎo)出代碼后，用 Claude Code 做代碼審查和重構(gòu) |
| **MarsX** | 設(shè)計(jì)稿轉(zhuǎn) React | 類(lèi)似思路，AI 生成初版 + Claude Code 精調(diào) |

### 4.5 Claude Code 的輔助 MCP/插件

> 以下工具可以作為 Claude Code 的"眼睛"，增強(qiáng)其對(duì)圖片和設(shè)計(jì)的理解能力：

| 工具類(lèi)型 | 推薦方案 | 說(shuō)明 |
|---------|---------|------|
| **瀏覽器自動(dòng)化** | Playwright MCP | 讓 Claude Code 直接操作瀏覽器查看設(shè)計(jì)稿，而非依賴(lài)截圖 |
| **設(shè)計(jì)文件讀取** | Figma API | 直接讀取 Figma 文件的結(jié)構(gòu)化數(shù)據(jù)，繞過(guò)圖片識(shí)別 |
| **本地文件預(yù)覽** | 本地 HTTP 服務(wù)器 | 啟動(dòng) `npx serve` 讓 Claude Code 通過(guò)瀏覽器訪問(wèn)本地預(yù)覽 |

---

## 五、高級(jí)技巧：構(gòu)建可復(fù)用的圖片識(shí)別工作流

### 5.1 創(chuàng)建項(xiàng)目級(jí)的 Prompt 模板

在你的項(xiàng)目根目錄創(chuàng)建 `.claude/templates/` 目錄，存放各類(lèi)場(chǎng)景的模板：

**`ui-component.md` 示例：**

```markdown
# UI 組件實(shí)現(xiàn)請(qǐng)求

## 組件定位
- 頁(yè)面：{page_name}
- 組件名：{component_name}
- 在頁(yè)面中的位置：{position_description}

## 設(shè)計(jì)稿
{screenshot}

## 設(shè)計(jì)說(shuō)明
- 寬度：{width}px / 百分比
- 高度：{height}px / auto
- 背景色：{bg_color}
- 邊框：{border_description}
- 內(nèi)邊距：{padding}
- 外邊距：{margin}

## 子元素列表
| 元素 | 類(lèi)型 | 尺寸 | 顏色 | 備注 |
|------|------|------|------|------|
| {element_name} | text/icon/button | {size} | {color} | {notes} |

## 交互說(shuō)明
- hover 態(tài)：{hover_description}
- click 行為：{click_behavior}
- 禁用態(tài)：{disabled_description}

## 技術(shù)約束
- 使用組件庫(kù)：{component_library}
- 樣式方案：{css_solution} (CSS Modules / Styled Components / Tailwind)
- 需要響應(yīng)式：是/否

# 復(fù)制模板并填充內(nèi)容
claude -p "請(qǐng)基于 .claude/templates/ui-component.md 的模板，實(shí)現(xiàn)以下組件："
# 然后粘貼填充好的模板內(nèi)容

#!/bin/bash
# scripts/prepare-screenshot.sh

INPUT="$1"
OUTPUT="${INPUT%.*}_optimized.png"

# 1. 放大 2x（提高 OCR 精度）
# 2. 銳化邊緣
# 3. 提高對(duì)比度
# 4. 壓縮到合理大小
convert "$INPUT" \
  -resize 200% \
  -sharpen 0x1.5 \
  -brightness-contrast 0x15 \
  -define png:compression-level=9 \
  "$OUTPUT"

echo "優(yōu)化完成: $OUTPUT"
echo "文件大小: $(du -h "$OUTPUT" | cut -f1)"

# design-system.md

## 顏色
（以色板截圖 + Token 對(duì)照表的形式）

## 字體
（字體棧、字號(hào)階梯截圖 + 實(shí)際 CSS 變量）

## 間距
（間距示意圖 + Token 值）

## 組件示例
（每個(gè)組件的截圖 + 正確的 Props + 常見(jiàn)錯(cuò)誤示例）

## 布局規(guī)則
（柵格系統(tǒng)截圖 + 斷點(diǎn)定義 + 響應(yīng)式行為說(shuō)明）

1. 截圖 + 結(jié)構(gòu)化文字描述（推薦，90% 場(chǎng)景適用）
2. 截圖 + OCR 文本 + 手動(dòng)校驗(yàn)（適合文字密集型圖片）
3. 截圖 + Mermaid/PlantUML 圖（適合流程圖、架構(gòu)圖）
4. 截圖 + Figma Dev Mode CSS（適合 UI 設(shè)計(jì)稿）
5. 純文字描述 + 代碼示例（截圖質(zhì)量極差時(shí)的保底方案）
6. 直接分享文件鏈接（Figma/Notion/飛書(shū)文檔鏈接，如果模型可訪問(wèn)）