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：单文件 .html，inline ` + `，可直接双击在浏览器打开

重要规则

1. 不要照抄参考内容——只借风格，不借文字/图片
2. 效果层用 null 代替猜测——没看见就别编
3. CDN 选 jsdelivr——https://cdn.jsdelivr.net/npm/@/...，固定版本号，不写 @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/)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: yushengxin
• Source: yushengxin/catch-web
• License: MIT

Install and usage instructions live in the source repository linked above.