这个 Skill 用来把“看得见的设计”整理成“可执行的规范”。它适合处理图片、截图、设计稿和页面链接，把零散视觉信息转成结构化的设计规范，并进一步输出成设计规范文档、在线 HTML 文档或规范 PPTX。
它的核心目标不是简单夸设计好不好看，而是沉淀出可复用、可交付、可协作的设计语言。
从 v1.3.0 开始，这个 Skill 不再只是分析流程说明，而是自带一套本地自动化执行脚本：
scripts/generate_design_spec.py
analysis.json、design_spec.md、design_spec.html
design_spec.pptx
templates/design_spec_report.html.j2
也就是说，当用户明确要求“生成文件”“输出成 HTML 文档”“输出成 PPT”时，可以直接调用脚本生成交付物，而不是只在聊天里给出文字结果。
当用户有以下任一意图时，优先使用本 Skill：
以下情况不要触发本 Skill，避免误触发：
首次使用自动化脚本前，先在 Skill 目录执行：
python -m pip install -r requirements.txt
playwright install chromium
说明：
playwright install chromium 不是强制步骤。
先确认用户目标是“分析并沉淀规范”，而不是泛泛审美评价。只有当用户同时具备“设计对象”与“结构化输出诉求”中的至少一个明确特征时，才进入后续流程。
设计对象包括：图片、截图、网页链接、Figma 导出图、设计稿、多张页面。
结构化输出诉求包括：规范、文档、PPT、HTML、Web 在线文档、设计系统、设计语言、配色方案、字体规范、布局规则。
输入可能来自以下四类：
处理规则：
必须基于真实输入做分析，不能凭想象补齐规范。
证据来源优先级如下：
如果网页需要登录、内容动态加载失败、图片清晰度太低、局部裁剪过多导致无法判断，应明确说明限制，并要求用户补图或改用截图。
判断整体设计调性，例如：极简、扁平、Material、玻璃态、科技感、B 端专业、营销导向、编辑型、品牌展示型等。
输出时说明：
至少提取以下颜色层级：
输出时尽量给出：
至少分析：
如果无法高置信度识别具体字体名称，不要硬猜；要输出“候选字体 + 置信度 + 视觉特征说明”。
至少分析：
如果无法精确还原像素值，可以输出近似区间与相对比例，例如“标题区与正文区约为 2:1 的垂直节奏”。
识别常见组件模式，例如：
对于每个高频组件，尽量总结：
必须把“现象”上升为“原则”。至少总结：
最终结论必须能指导后续设计复用，而不是停留在描述层。
在生成最终文档之前，先将分析结果收束成一份结构化规范对象。脚本默认会输出 analysis.json，推荐至少包含以下结构：
{
"meta": {
"title": "页面或设计稿标题",
"source_type": "image | webpage",
"source_value": "原始输入",
"generated_at": "时间"
},
"style": {
"keywords": ["现代", "B端专业"],
"summary": "整体偏克制理性，以高对比标题和大留白建立层次",
"confidence": "high | medium | low"
},
"colors": {
"summary": "主色和强调色适合直接沉淀为 token",
"confidence": "high | medium | low",
"tokens": []
},
"typography": {},
"layout": {},
"components": {},
"principles": [],
"limitations": []
}
both。
python scripts/generate_design_spec.py --image C:/path/to/ui.png --format both
python scripts/generate_design_spec.py --url https://example.com --format html --prefer-browser
python scripts/generate_design_spec.py --url https://example.com --format both --title "品牌官网设计规范" --output-dir C:/temp/design-spec-output
脚本会默认生成以下文件：
analysis.json：结构化分析结果
design_spec.md：Markdown 版本的设计规范
design_spec.html：响应式在线规范文档
design_spec.pptx：演示文稿（当 --format pptx 或 --format both 时）
source_preview.*：原图或网页截图
默认输出目录为：
./design-spec-output/<timestamp_slug>/
生成结果前必须检查以下内容：
如果脚本执行遇到问题，按以下方式回退：
python-pptx 缺失：仅跳过 PPTX，保留 HTML / Markdown 结果
适合用户只想快速获取结论：
适合用户要正式交付：
这个 Skill 的价值不在“看图说话”，而在“把视觉判断沉淀为可复用规范”。所有输出都要围绕这件事：可验证、可复用、可交付。
共 3 个版本