# Catch Web

> 从参考设计（截图、图片、URL）提取结构化 Design DNA（颜色、字体、间距、布局、形状、阴影、动效、风格情绪）， 然后用 DNA + 用户内容生成自包含的 HTML/CSS/JS 页面。 Triggers on: "catch this design", "extract style", "design DNA", "复制这个网站的风格", "照着这个设计做", "analyze this design", "style transfer from screenshot"。

- Skill: `yushengxin/catch-web` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add yushengxin/catch-web`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yushengxin/catch-web/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: yushengxin (https://skillmd.com/u/yushengxin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yushengxin/catch-web

---


# catch-web

从「好看的参考设计」到「自己可用的同风格页面」的两阶段工作流。

## 何时触发

- 用户说"照着这个截图/网页做一版"
- 用户说"提取这个设计风格"
- 用户说"我要这个网站的风格"
- 用户给一张图或 URL，并要求基于此生成 HTML

## 工作流

整个 skill 只有两步，没有"先讲 schema"这种没必要的步骤。

### Phase 1: Extract — 提取 DNA

**输入**：一张或多张参考图 / 一个或多个 URL
**输出**：一份 `dna.json` 文件，按 [`references/schema.md`](references/schema.md) 的两层结构

**步骤**：
1. 读取 [`references/analysis-guide.md`](references/analysis-guide.md) 了解提取方法
2. 读取 [`references/schema.md`](references/schema.md) 了解输出结构
3. **核心层（必填）** 8 个区块全部填实：color / typography / spacing / layout / shape / elevation / motion / mood
4. **效果层（按需）** 只在参考里实际观察到效果时才填
5. 把结果写到 `dna.json`，每个字段都不能留空字符串，没观察到的用 `null` + 在 `notes` 里说明

**多参考冲突处理**：以"主导模式"为准，`notes` 数组里记录次要变体。

### Phase 2: Generate — 生成 HTML

**输入**：`dna.json` + 用户自己的内容（标题、段落、列表、图片等）
**输出**：自包含单文件 HTML（inline CSS + JS，无外部构建）

**步骤**：
1. 读取 [`references/generation-guide.md`](references/generation-guide.md) 了解代码生成规则
2. 把 DNA 核心层映射成 CSS 自定义属性写到 `:root`
3. 按效果层选择合适的技术（CSS / Canvas / WebGL / GSAP）
4. 用户内容按 DNA 风格重新排版
5. 单文件交付，所有 CSS/JS inline，CDN 仅用于大型库（three.js/gsap/lottie）

## 输入格式

- **图片**：用户直接附图，或提供本地路径
- **URL**：用户给完整 URL，AI 调用 `web_fetch` 抓取页面分析
- **多个参考**：可以，AI 会综合判断"主导风格"

## 输出格式

- **DNA**：JSON 文件，UTF-8，缩进 2 空格
- **HTML**：单文件 `<name>.html`，inline `<style>` + `<script>`，可直接双击在浏览器打开

## 重要规则

1. **不要照抄参考内容**——只借风格，不借文字/图片
2. **效果层用 null 代替猜测**——没看见就别编
3. **CDN 选 jsdelivr**——`https://cdn.jsdelivr.net/npm/<pkg>@<ver>/...`，固定版本号，不写 `@latest`
4. **自包含优先**——能 inline 就 inline，少一次网络请求
5. **可访问性**——保证 WCAG AA 对比度（正文 4.5:1，大字 3:1）

## 详细规范

- 字段定义：[`references/schema.md`](references/schema.md)
- 提取方法：[`references/analysis-guide.md`](references/analysis-guide.md)
- 代码生成：[`references/generation-guide.md`](references/generation-guide.md)
- 示例：[`examples/`](examples/)