catch-web

从参考设计（截图、URL）提取结构化 Design DNA，再用 DNA + 你的内容生成自包含 HTML。

把"我喜欢这个网站的风格"变成可量化、可复用的设计规范。

---

✨ 特性

• 两阶段工作流 — Extract（提取 DNA）→ Generate（生成 HTML）
• 分层 DNA — 核心层（color/typography/spacing/layout/shape/elevation/motion/mood）必填，效果层（particles/3D/scroll/text/cursor/glassmorphism）按需
• 多输入支持 — 截图/图片 + URL（HTML 层 + vision 模型分析）
• 零运行时依赖 — 纯文档型 skill，AI 读 SKILL.md 工作，无需安装脚本
• 自包含输出 — 单文件 HTML，inline CSS/JS，CDN 仅用于可选大型库

---

📦 安装

作为 OpenClaw / Claude Code skill

把整个 catch-web 文件夹放到 skill 目录即可：

~/.openclaw/workspace/skills/catch-web/

或放到项目级：

your-project/.claude/skills/catch-web/

依赖

• 无 Python 依赖
• 无 npm 依赖
• 只需要能调用 web_fetch 工具（处理 URL 输入时）和 image 工具（处理截图输入时）

---

🚀 快速上手

Phase 1: Extract

输入一张图或一个 URL：

"照着 https://stripe.com 这个站做一版"

或

"分析我刚发的那张设计图"

输出一份 dna.json：

{
  "meta": {...},
  "core": { "color": {...}, "typography": {...}, ... },
  "effects": { "background": {...}, ... },
  "notes": [...]
}

Phase 2: Generate

输入：dna.json + 你的内容

"用刚生成的 DNA，把我的产品介绍 [内容] 做成落地页"

输出：单文件 landing.html，双击在浏览器打开。

完整示例见 examples/。

---

📐 DNA 结构

核心层（8 个区块，必填）

区块	描述
color	主色/辅色/强调色/灰阶/语义色/背景
typography	字体族 + 7 级字号 (display/h1/h2/h3/body/small/caption)
spacing	base unit + 4-8 级 scale + density
layout	max-width + 栅格 + 断点
shape	圆角 4 级 + 边框 + 分隔线
elevation	阴影 3 级 + 策略
motion	缓动 + 时长 3 档 + 哲学
mood	3-5 个形容词 + genre + tone + avoid

效果层（7 个区块，按需）

区块	描述
background	渐变动画 / 噪点 / 视频背景 / 网格渐变
particles	漂浮点 / 烟花 / 雪花 / 萤火虫 / 连线节点
three_d	Three.js / Babylon.js 3D 场景
scroll	视差 / 滚动触发 / scrub
text	字符分裂 / 打字机 / 故障 / 渐变填充
cursor	自定义光标 / 磁吸 / 聚光 / 拖尾
glassmorphism	毛玻璃模糊 + 透明 + 边框

完整字段定义见 references/schema.md。

---

📁 目录结构

catch-web/
├── README.md                          # 本文件
├── SKILL.md                           # OpenClaw Skill 主入口
├── references/
│   ├── schema.md                      # DNA JSON 字段定义
│   ├── analysis-guide.md              # 怎么从图/URL 提取
│   └── generation-guide.md            # DNA → HTML 规则
├── examples/
│   ├── README.md                      # 示例说明
│   ├── example-cyberpunk-dna.json     # 示例 DNA
│   └── example-cyberpunk.html         # 示例输出 HTML
└── assets/                            # 预留：图标、字体等

---

💡 适用场景

• 看到一个漂亮的设计，想"抄"它的风格但内容用自己
• 团队需要统一设计语言：让 AI 提取一份 DNA 后所有页面都按这个 DNA 生成
• 快速出 demo：给客户看一个参考 → AI 出 5 种不同风格的方案
• 学习设计系统：把设计"拆解"成 token，能看清别人为什么这么搭

---

🛠️ 工作流详解

Extract（提取）

1. 读取 references/analysis-guide.md
2. 读取 references/schema.md
3. 对参考图：用 image 工具看视觉特征
4. 对参考 URL：用 web_fetch 抓 HTML 找 CSS token
5. 按 schema 输出完整 JSON

Generate（生成）

1. 读取 references/generation-guide.md
2. 把 DNA 核心层映射成 CSS 变量
3. 按效果层选择合适技术（CSS / Canvas / WebGL / GSAP）
4. 用户内容按 DNA 风格排版
5. 单文件 HTML 交付

---

❓ 跟其他工具有什么区别

工具	做法	catch-web 的不同
设计稿导出 Figma 资源	设计师手动逐项取色	AI 直接看图，5 分钟出完整 DNA
复制粘贴 CSS	借鉴局部	完整 token 系统 + 风格迁移
让 GPT 写 HTML	一句话自由发挥	基于结构化 DNA，输出可复现可调试
design-dna skill	类似思路	catch-web 是简化版，schema 更精炼、效果层按需

---

📜 License

MIT — 详见 LICENSE