Catch web

Skill yushengxin/catch-web

From reference designs (screenshots, URLs) extract structured Design DNA, then generate self-contained HTML/CSS/JS with your content.

Install

npx -y skills add yushengxin/catch-web

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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

SKILL.md

3.3 KB, as published. Nobody here has run it

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）