CosDesign — 设计风格精准复刻

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

Purpose & Capability

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

核心能力：

能力边界（不做的事）：

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

Instruction Scope

在 scope 内：

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

不在 scope 内：

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

Credentials

不做的事：

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

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

Persistence & Privilege

不写入的路径：

• 不修改系统配置或 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=\x3Cyour-jina-api-key>

使用方法

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

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

# 多站对比
node scripts/compare.js \x3Curl1> \x3Curl2> [url3]

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

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

输出示例

色彩体系

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