From 207b48c48e5b5e5312ef375dbd0633ee45f6837e Mon Sep 17 00:00:00 2001 From: zyh Date: Mon, 13 Apr 2026 02:24:55 +0000 Subject: [PATCH] =?UTF-8?q?sync:=20d8d-prototype-to-pen=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=20Unsplash=20=E5=9B=BE=E7=89=87=E5=A4=84=E7=90=86?= =?UTF-8?q?=E7=AD=96=E7=95=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 2.5 提取图片信息步骤，支持 CORS 受限域名自动转换 - 新增 5.5 添加图片步骤，支持 Unsplash URL 和本地路径 - SKILL.md 新增图片处理 FAQ 和策略说明 Co-Authored-By: Claude Opus 4.6 --- .claude/skills/d8d-prototype-to-pen/SKILL.md | 10 ++++++++++ .../steps/02-analyze-html.md | 13 +++++++++++++ .../d8d-prototype-to-pen/steps/05-generate.md | 19 ++++++++++++++++++- 3 files changed, 41 insertions(+), 1 deletion(-) diff --git a/.claude/skills/d8d-prototype-to-pen/SKILL.md b/.claude/skills/d8d-prototype-to-pen/SKILL.md index e34cb11..3dab9e8 100644 --- a/.claude/skills/d8d-prototype-to-pen/SKILL.md +++ b/.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会自动完成整个转换流程。 diff --git a/.claude/skills/d8d-prototype-to-pen/steps/02-analyze-html.md b/.claude/skills/d8d-prototype-to-pen/steps/02-analyze-html.md index dddf15c..ec5648b 100644 --- a/.claude/skills/d8d-prototype-to-pen/steps/02-analyze-html.md +++ b/.claude/skills/d8d-prototype-to-pen/steps/02-analyze-html.md @@ -45,8 +45,21 @@ AI自动根据class名称识别组件类型： - `input` 或 `field` → 输入框 - 等等 +### 2.5 提取图片信息 + +AI自动提取所有图片信息： +- 对于 `` 标签，提取 `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描述、尺寸、目标处理方式） diff --git a/.claude/skills/d8d-prototype-to-pen/steps/05-generate.md b/.claude/skills/d8d-prototype-to-pen/steps/05-generate.md index 1898b56..c4d6f17 100644 --- a/.claude/skills/d8d-prototype-to-pen/steps/05-generate.md +++ b/.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自动遵循以下规则： -- 2.49.1