别再手抄设计稿了：一个 Skill 把任意网站变成 AI 能读懂的设计文档

背景：design.md 为什么火了

最近有一个开源项目在开发者社区迅速走红：design.md。

它做的事情很简单——把 Vercel、Linear、Stripe、Notion 这些知名网站的设计风格，写成结构化的 Markdown 文档。文档里包含色彩体系、字体层级、组件样式、间距规则等所有关键设计决策。AI Agent 读了这份文档之后，就能在生成前端代码时模仿对应网站的视觉风格。

这切中了当下 Vibe Coding 场景的一个痛点：AI 写代码越来越快，但写出来的东西"长得不好看"。你让 Agent 写一个 landing page，它可能在功能上完全正确，但视觉上一看就是"AI 味"——缺少成熟产品那种经过打磨的设计一致性。

design.md 的做法是给 AI 一份"视觉参考答案"。效果确实不错，但有一个明显的局限：它是手工策展的静态语料库。你想模仿 Airbnb 的风格？抱歉，库里还没有。你有一个自己喜欢的小众网站想借鉴？更不可能有。

这让我想到：与其等别人把设计文档写好，不如做一个工具，输入任意网址，自动生成这种文档。

我做了什么

我写了一个 Agent Skill 叫 website-to-design-md，它的定位很直接：

给我一个网址，我帮你把这个网站的设计系统逆向工程成一套分层的文档。

不是截个图让 AI 猜，而是系统性地分析：自动发现多个页面模板、通过浏览器检查工具抓取真实的计算样式和 CSS Token、区分全局规则和页面特有规则、记录每条结论的置信度和证据来源。

最终输出的不是一个笼统的"这个网站配色是蓝色"，而是一套可以直接指导实现的结构化文档。

项目地址：github.com/Scofieldfree/website-to-design

和 design.md 的区别

两件事情解决的是同一类问题，但路径完全不同：

对比维度	design.md	website-to-design-md
本质	静态语料库	动态分析工具
覆盖范围	预设的知名网站	任意网站
输出结构	单文件 DESIGN.md	分层：DESIGN.md + TEMPLATE_MAP + PAGE_BLUEPRINT + EVIDENCE_REPORT
模板差异	通常不区分	自动识别不同页面模板，分开记录
证据追溯	一般不提供	记录证据来源和置信度
使用方式	直接引用现有文档	先运行 Skill 生成，再引用

简单来说：design.md 是一本"知名网站设计风格字典"，而 website-to-design-md 是一台"设计风格扫描仪"。两者可以互补——你可以用我的 Skill 生成的文档贡献回 design.md 语料库。

工作原理

这个 Skill 的核心工作流分两个模式：

默认模式：只要设计系统概览

输入一个网址，输出一份 DESIGN.md。适合你只是想快速了解一个网站的配色、字体、组件风格，用作参考。

复刻模式：要更高保真度的实现指导

当你明确说要"模仿"或"复刻"某个网站的风格时，Skill 会自动进入复刻模式。除了 DESIGN.md，还会额外生成三份文档：

TEMPLATE_MAP.md——描述不同页面模板之间的差异。哪些规则是全局一致的，哪些是首页独有的、列表页独有的、详情页独有的。
PAGE_BLUEPRINT.md——描述页面的内容编排和节奏。Section 怎么堆叠、hero 区域的比例、card 每行几个、页面在哪里"呼吸"。
EVIDENCE_REPORT.md——记录分析的证据来源和置信度。哪些结论是通过 DevTools 直接检查确认的，哪些是从截图推断的。

分析流程

Skill 内部的执行步骤：

检查浏览器工具——如果有 Chrome DevTools MCP 或类似工具可用，优先用它直接检查计算样式、CSS 变量、DOM 结构，而不是只看截图。
自动发现页面——如果用户只给了首页 URL，Skill 会自动从导航和链接中发现同域名的代表性内页。
构建模板矩阵——把发现的页面按角色分类：首页、列表页、详情页、定价页等。
逐模板采集证据——对每个模板采样关键元素的计算样式：body、标题、正文、按钮、卡片、导航、输入框等。还会尝试捕获 hover、focus、sticky 等交互状态。
分类结论的作用域——把发现标记为 global（全局规则）、template-specific（模板特有）、page-specific（页面特有）或 uncertain（不确定）。
写入结构化文档——按模板输出规范格式的文档，确保和 design.md 语料库格式兼容。

实际效果：以 Airbnb 为例

仓库里附带了一个完整的实战案例——对 zh.airbnb.com 的分析。

运行 Skill 后生成了四份文档：

DESIGN.md 捕获了 Airbnb 的全局设计系统：明亮的白色画布、温暖的近黑文字、系统性的圆角体系（12px → 16px → 20px → 24px → 40px → 50%）、珊瑚色 #FF385C 作为克制的行动色、自有字体 Airbnb Cereal 从导航到正文通吃。

TEMPLATE_MAP.md 揭示了模板之间的结构差异：首页和体验页是横向滑动的发现轨道，搜索结果页分裂成列表+地图的双栏布局，房源详情页切换成信任模块+预订卡片的纵深结构。但跨模板的颜色、字体、圆角规则始终一致。

PAGE_BLUEPRINT.md 记录了页面的编排节奏：搜到对应的起承转合。

EVIDENCE_REPORT.md 记录了哪些数据是通过 DevTools 直接检查的、哪些是截图推断的、哪些地方存在不确定性。

更有意思的是仓库里的下游示例：基于 Airbnb 的分析文档，用一个转换 prompt 生成了一个完全不同领域的宠物服务预订网站。它继承了 Airbnb 的视觉语言——白色画布、搜索胶囊、图片先行的卡片浏览、信任模块——但内容完全是宠物服务的。这说明提取出来的设计系统确实是可迁移的，而不是绑定在原始业务内容上的。

如何使用

安装

把 skills/website-to-design-md 目录加载到你的 Agent Skill 系统里——无论是 Copilot、Claude Code、Cursor 还是其他支持 Skill 的 Agent 环境。

基本用法

直接告诉 Agent："用 website-to-design-md 分析 https://example.com "。Skill 会自动开始工作。

获得最佳效果

提供浏览器检查能力——如果你的环境有 Chrome MCP 或类似工具，分析质量会显著提升。Skill 优先使用工具检查而不是截图猜测。
说明你的意图——如果你要复刻风格，明确说出来，Skill 会自动进入复刻模式生成完整的四份文档。
不止看首页——Skill 会自动发现内页，但如果你知道有哪些关键页面类型值得分析，可以直接指定。

使用生成的文档

# 快速参考设计风格
→ 阅读 DESIGN.md

# 需要实现多个页面
→ 先读 TEMPLATE_MAP.md 了解模板差异
→ 再读 PAGE_BLUEPRINT.md 了解页面编排
→ 查 EVIDENCE_REPORT.md 确认哪些结论靠谱

# 风格迁移到新产品
→ 写一个转换 prompt，引用生成的全部文档作为视觉源
→ 指定新的产品定位、内容和页面需求

为什么要分层，而不是一个大文件

早期版本确实是单文件输出。但实际使用中发现，一个文件把全局规则、模板差异、页面布局和证据全部混在一起，下游 Agent 容易搞混——把首页独有的大 hero 当成全局风格，把某个模板的特殊处理泛化到所有页面。

分层之后：

DESIGN.md 只放稳定、重复出现的全局规则，Agent 可以放心地当作项目级别的设计基线。
TEMPLATE_MAP.md 明确告诉 Agent "这些差异是有意设计的，不要把它们统一掉"。
PAGE_BLUEPRINT.md 让 Agent 知道一个页面的 section 应该怎么排列，而不是随意堆组件。
EVIDENCE_REPORT.md 让 Agent 知道哪些地方可以大胆实现，哪些地方要保守处理。

这种分层结构直接减少了下游实现时的风格漂移。

试试看

如果你正在用 AI Agent 做前端开发，趁手的设计参考是生产力。你可以：

Star 这个项目：github.com/Scofieldfree/website-to-design
装上 Skill，对你喜欢的网站跑一遍，看看输出的设计文档质量
用生成的文档指导你的下一个项目，对比一下有没有设计"参考答案"时 Agent 输出的差距

如果你生成了高质量的设计文档，也欢迎贡献回 design.md 社区语料库——让更多人受益。