- name
- cosdesign
- description
- |
- keywords
- requirements
- node
- >=18
- binaries
- required
- true
- description
- Node.js runtime >= 18
- metadata
- openclaw
- homepage
- https://github.com/Cosmofang/cosdesign
- author
- Cosmofang
- runtime
- node
- >=18
- env
- required
- false
- description
- Jina Reader API key for enhanced crawling. Free tier works without key.
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, #80868bDesign 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*