yushengxin catch-web
从「好看的参考设计」到「自己可用的同风格页面」的两阶段工作流。
何时触发
- 用户说"照着这个截图/网页做一版"
- 用户说"提取这个设计风格"
- 用户说"我要这个网站的风格"
- 用户给一张图或 URL，并要求基于此生成 HTML
工作流
整个 skill 只有两步，没有"先讲 schema"这种没必要的步骤。
Phase 1: Extract — 提取 DNA
输入：一张或多张参考图 / 一个或多个 URL
输出：一份 dna.json 文件，按 references/schema.md 的两层结构
步骤：
- 读取
references/analysis-guide.md了解提取方法 - 读取
references/schema.md了解输出结构 - 核心层（必填） 8 个区块全部填实：color / typography / spacing / layout / shape / elevation / motion / mood
- 效果层（按需） 只在参考里实际观察到效果时才填
- 把结果写到
dna.json，每个字段都不能留空字符串，没观察到的用null+ 在notes里说明
多参考冲突处理：以"主导模式"为准，notes 数组里记录次要变体。
Phase 2: Generate — 生成 HTML
输入：dna.json + 用户自己的内容（标题、段落、列表、图片等）
输出：自包含单文件 HTML（inline CSS + JS，无外部构建）
步骤：
- 读取
references/generation-guide.md了解代码生成规则 - 把 DNA 核心层映射成 CSS 自定义属性写到
:root - 按效果层选择合适的技术（CSS / Canvas / WebGL / GSAP）
- 用户内容按 DNA 风格重新排版
- 单文件交付，所有 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>，可直接双击在浏览器打开
重要规则
- 不要照抄参考内容——只借风格，不借文字/图片
- 效果层用 null 代替猜测——没看见就别编
- CDN 选 jsdelivr——
https://cdn.jsdelivr.net/npm/<pkg>@<ver>/...，固定版本号，不写@latest - 自包含优先——能 inline 就 inline，少一次网络请求
- 可访问性——保证 WCAG AA 对比度（正文 4.5:1，大字 3:1）
详细规范
- 字段定义：
references/schema.md - 提取方法：
references/analysis-guide.md - 代码生成：
references/generation-guide.md - 示例：
examples/