.claude/skills/d8d-prototype-to-pen/SKILL.md

@@ -15,6 +15,7 @@ updated: 2026-04-10
 - **双管齐下**：HTML结构解析 + AI视觉分析
 - **设计文档优先**：UX/UI设计文档作为最高优先级输入
 - **Pencil原生输出**：严格遵循Pencil MCP规范
+- **智能图片处理**：自动转换跨域图片为Unsplash格式，保证Pencil中可正常加载
 - **批量处理**：支持多页面项目一次性转换
 - **视觉对齐验证**：自动验证并调整输出质量
 - **分批次执行**：严格遵循Pencil MCP单批次操作限制
@@ -159,6 +160,15 @@ updated: 2026-04-10
 3. 启用视觉模式（--mode visual或both）
 4. 转换后可以使用Pencil编辑器进行人工微调
 
+### 问：图片为什么显示棋盘格？
+**答**：Pencil MCP受浏览器跨域限制，无法加载有CORS限制的域名（如googleusercontent.com）。`d8d-prototype-to-pen`会自动将这些图片转换为Unsplash URL格式（Unsplash允许跨域访问），所以转换完成后所有图片都能正常显示。
+
+### 问：图片处理策略是什么？
+**答**：
+- `images.unsplash.com` URL → 原样保留，保留作者metadata
+- `googleusercontent.com` 或其他CORS受限域名 → 基于`data-alt`描述自动匹配Unsplash图片，转换为Unsplash URL格式
+- 本地相对路径图片 → 原样保留
+
 ### 问：需要编写代码吗？
 **答**：不需要！这是AI直接执行的技能。只需调用技能并提供参数，AI会自动完成整个转换流程。
 

.claude/skills/d8d-prototype-to-pen/steps/02-analyze-html.md

@@ -45,8 +45,21 @@ AI自动根据class名称识别组件类型：
 - `input` 或 `field` → 输入框
 - 等等
 
+### 2.5 提取图片信息
+
+AI自动提取所有图片信息：
+- 对于 `<img>` 标签，提取 `src`（图片URL）和 `data-alt`（图片描述）
+- 对于背景图片，提取 `background-image` URL
+- **图片处理策略**：
+  - 如果URL已经是 `images.unsplash.com` → 保留原URL，提取metadata
+  - 如果URL是 `googleusercontent.com` 或其他有CORS限制的域名 → 基于 `data-alt` 描述匹配Unsplash图片，转换为Unsplash URL格式
+  - 如果是本地相对路径 → 保留原路径
+- 提取图片尺寸（width, height）
+- 记录图片位置和圆角信息
+
 ## 输出
 
 - DOM结构树（简化版）
 - 样式字典
 - 组件识别结果
+- 图片信息列表（包含URL、data-alt描述、尺寸、目标处理方式）

.claude/skills/d8d-prototype-to-pen/steps/05-generate.md

@@ -55,10 +55,27 @@ AI自动为每个页面创建完整的Frame层级结构，严格遵循分批次
 - 导航栏组件
 - 其他重复模式
 
-### 5.5 应用渐变和效果
+### 5.5 添加图片
+
+对于识别出的图片，按以下规则创建：
+- **Unsplash 图片**：使用 `fill: {type: "image", url: "https://images.unsplash.com/..."}` 格式
+- 添加 `metadata` 字段包含作者信息：`metadata: {author: "...", link: "...", type: "unsplash", username: "..."}`
+- **本地图片**：保留相对路径 URL
+- **圆角处理**：对 frame 设置 `cornerRadius`，图片本身占满容器
+- **尺寸匹配**：严格匹配 HTML 中提取的宽度和高度
+
+### 5.6 应用渐变和效果
 
 添加渐变色和视觉效果，严格遵循设计规范。
 
+## 图片处理规范
+
+| 图片来源 | 处理方式 | 格式 |
+|----------|----------|------|
+| Unsplash URL | 原样保留 | `fill: {type: "image", url} + metadata` |
+| 其他外部URL (CORS受限) | 转换为Unsplash | 基于`data-alt`描述匹配Unsplash图片，使用Unsplash URL |
+| 本地相对路径 | 原样保留 | `fill: {type: "image", url}` |
+
 ## 注意事项
 
 AI自动遵循以下规则：