Case 00035

CosDesign — 设计风格精准复刻

给我一个 URL，还你一套完整的设计规范

---

Purpose & Capability

CosDesign 是一个设计风格逆向工程工具，能从任意网页 URL 中提取完整的视觉设计体系。

核心能力：

能力	说明
色彩提取	从网页中提取主色、辅色、背景色、文字色、渐变色，输出 HEX/RGB/HSL
字体分析	识别 font-family、font-size 层级、font-weight、line-height、letter-spacing
间距系统	提取 padding/margin/gap 规律，归纳为 4px/8px 栅格体系
布局结构	分析页面 grid/flex 布局、断点、容器宽度、响应式策略
组件风格	按钮、卡片、导航栏、表单等常见组件的视觉参数
风格定义输出	生成 CSS Variables / Design Tokens JSON / Tailwind Config
多站对比	同时分析 2-3 个 URL，输出风格差异对比表
设计报告	生成完整的 HTML 设计规范文档（含色卡、字体样本、间距示意）

能力边界（不做的事）：

• 不做 UI 设计或出图（只分析，不创作）
• 不抓取需要登录的页面内容
• 不提取图片资源或下载字体文件
• 不修改目标网站的任何内容

---

Instruction Scope

在 scope 内：

• "分析这个网页的设计风格" / "提取这个 URL 的配色方案"
• "帮我复刻这个网站的设计规范"
• "对比这两个网站的设计风格"
• "提取这个页面的字体排版系统"
• "生成 Tailwind 配置来匹配这个设计"
• "输出 CSS 变量 / Design Token"

不在 scope 内：

• "帮我设计一个网页"（CosDesign 分析设计，不创作设计）
• "下载这个网站的图片"（不做资源抓取）
• "修改这个网站的样式"（只读分析，不修改）
• "分析这个 APP 的设计"（仅支持 Web URL，不支持移动端截图分析）

---

Credentials

操作	凭证	说明
网页抓取（Jina Reader）	JINA_API_KEY（可选）	免费层无需 key；有 key 可提升速率限制
网页抓取（WebFetch）	无	Claude 内置工具，无需凭证
网页搜索（WebSearch）	无	Claude 内置工具，无需凭证

不做的事：

• 不存储、传输或记录任何 API 凭证
• 不访问需要登录的页面
• 所有分析均为只读操作，不对目标网站产生任何影响

最小配置： 完全无需凭证即可使用。JINA_API_KEY 仅在需要高频抓取时可选配置。

---

Persistence & Privilege

路径	内容	触发条件
data/analysis-history.json	历次分析记录（URL + 时间戳 + 摘要）	每次分析完成后追加
stdout	设计规范文本 / JSON / HTML	脚本运行时输出

不写入的路径：

• 不修改系统配置或 shell 环境
• 不创建 cron 任务
• 不写入用户项目目录（除非用户明确指定输出路径）

权限级别：

• 以当前用户身份运行，不需要 sudo
• 仅读取网页公开内容，不做任何写入或修改

卸载： 删除 skill 目录即可，无残留配置。

---

Install Mechanism

标准安装

clawhub install cosdesign

手动安装

cp -r /path/to/cosdesign ~/.openclaw/workspace/skills/cosdesign/

验证安装

node ~/.openclaw/workspace/skills/cosdesign/scripts/analyze.js https://example.com
# 应输出：该 URL 的设计分析 prompt

可选配置

# 如需 Jina 高频抓取（可选）
export JINA_API_KEY=<your-jina-api-key>

---

使用方法

# 单页分析 — 提取完整设计规范
node scripts/analyze.js <url>

# 指定分析维度
node scripts/analyze.js <url> --focus color        # 仅色彩
node scripts/analyze.js <url> --focus typography    # 仅字体
node scripts/analyze.js <url> --focus layout        # 仅布局
node scripts/analyze.js <url> --focus components    # 仅组件

# 多站对比
node scripts/compare.js <url1> <url2> [url3]

# 输出格式
node scripts/export.js <url> --format css-vars     # CSS 变量
node scripts/export.js <url> --format tokens        # Design Tokens JSON
node scripts/export.js <url> --format tailwind      # Tailwind Config
node scripts/export.js <url> --format html-report   # 完整 HTML 报告

# 风格定义
node scripts/define-style.js <url>                  # 输出风格定义文档

---

输出示例

色彩体系

Primary:    #1a73e8 (Google Blue)
Secondary:  #34a853 (Green)
Background: #ffffff / #f8f9fa
Text:       #202124 / #5f6368
Accent:     #ea4335 (Red)
Border:     #dadce0

字体排版

H1: Google Sans, 36px/44px, 400, #202124
H2: Google Sans, 24px/32px, 400, #202124
Body: Roboto, 14px/22px, 400, #5f6368
Caption: Roboto, 12px/16px, 400, #80868b

Design Tokens (JSON)

{
  "color": {
    "primary": { "value": "#1a73e8" },
    "secondary": { "value": "#34a853" },
    "bg-default": { "value": "#ffffff" },
    "text-primary": { "value": "#202124" }
  },
  "font": {
    "heading": { "value": "'Google Sans', sans-serif" },
    "body": { "value": "'Roboto', sans-serif" }
  },
  "spacing": {
    "xs": { "value": "4px" },
    "sm": { "value": "8px" },
    "md": { "value": "16px" },
    "lg": { "value": "24px" },
    "xl": { "value": "32px" }
  }
}

---

📁 文件结构

cosdesign/
├── SKILL.md
├── package.json
├── _meta.json
├── .clawhub/origin.json
├── data/
│   └── analysis-history.json
├── references/
│   └── extraction-guide.md
└── scripts/
    ├── analyze.js          # 单页设计分析
    ├── compare.js          # 多站风格对比
    ├── export.js           # 设计规范导出（CSS/Token/Tailwind/HTML）
    └── define-style.js     # 风格定义文档生成

---

Version: 1.0.0 · Created: 2026-04-10 · Author: Cosmofang