夜雨聆风
我做了个插件和 Skills,一键提取任何网站的设计风格 Design.md
2026
DESIGN EXTRACTOR · SKILLS
DESIGN.MD WORKFLOW
我做了个插件和 Skills
一键提取任何网站的
设计风格 Design.md
把一个网站的视觉风格、配色、字体、布局和组件规范提取成 Agent 可读的设计指导文件。
我做了一个浏览器插件 Design Extractor，
可以让你获取任何一个页面的设计规范，保存为 design.md。
Chrome 插件地址：
https://chromewebstore.google.com/detail/design-extractor/adahpanfaajdfhddlaeplmkfnpnbkkke
LINKS
项目官网：https://getwebdesign.top
开源 Skills：https://github.com/liaocaoxuezhe/get-web-design
Design.md 文件
会成为下一个 Agent 产品都原生适配的文件。
当设计开始进入 Prompt，设计规范就需要从口头描述变成可复用文件。
ARTICLE MAP
01 为什么 AI 生成的网站容易千篇一律？
02 Design.md 为什么会变成 Agent 的设计输入？
03 截图、多模态与 CSS 分析如何结合？
04 插件和 Skills 分别适合什么使用方式？
01
为什么需要 Design.md
我们在让 AI Agent 开发网页或者 APP 的时候，纯 AI 生成的内容，会显得太过千篇一律，大部分是蓝色+卡片+emoji 等元素会大量出现。
为了避免让 Agent 生成的网站太过无聊，就需要使用 prompt 来指导 Agent 生成的设计风格。
例如我经常会加这样的提示词来让模型生成的质量更高。
PROMPT SAMPLE
# Design System（设计规范）
1. 核心风格
风格:（在此处填空，示例: 模仿 Notion.so 的视觉设计风格）
视觉:（在此处填空，示例: 秩序感、高对比、大字号排版、纸媒质感。）
2. 配色方案
Bg 背景颜色、
Text 字体颜色、
Accent 强调色。
3. 字体栈（CDN）在此处填空。
4. 质感（必须）
SVG Noise (在此处填空，示例:全局叠加透明度 0.05~0.08 的 feTurbulence 噪点，混合模式建议使用 multiply。)、
Shadow (在此处填空，示例:卡片需有统一的深邃阴影，营造悬浮感。)
5. 动态交互（Motion Design）
编排式入场、惯性滚动、微交互、磁吸按钮、跟随光标效果等。
随着 prompt 中对设计的主导越来越普遍，越来越多人将设计的描述单独抽出来作为一个文件。
也就是 Design.md 文件。
和 Agent.md，rules.md，Memory.md 一样，Design 会在 Agent 进行设计/前端页面制作时，必须读取的设计指导文件。
02
Google 的 design.md 文件规范
前段时间，Google 也发布了 design.md 文件的文件规范，更加肯定了我的猜测。
规范地址：https://github.com/google-labs-code/design.md
DESIGN.MD STRUCTURE
FOUNDATION
基础信息
顶部 YAML 属性展示名称、作者、版本等。
STYLE
品牌与风格
Overview
Brand&Style
Colors
Typography。
SYSTEM
组件系统
Layout
Elevation
Shapes
Components
Do’s and Don’ts。
03
我测试过的两条路线
因为我最近频繁地在做前端页面，有些是用来做 SEO 的小站，有些是官网，有些是临时起意做出来的产品页。
所以也研究并测试了很多版本的 design.md。
让 AI 获取一个网站的 design.md 的时候，一种方案是通过网站的 css 来分析；另外一种是截图让多模态模型进行分析。
METHOD COMPARISON
CSS ANALYSIS
更准确
适合实现功能和布局与目标网站一模一样的网站。
VISION ANALYSIS
更有神韵
通过截图让多模态模型分析，有时反而更能抓住风格。
HYBRID
组合方案
截图多模态分析 + CSS 处理 + 组件示例，输出效果最好。
我进行了很多方法的测试，实际测试下来，如果提供太详细的 css，只有在想实现功能和布局与目标网站一模一样的网站时，效果比较好。
提供截图让模型进行多模态分析的方案，虽然没办法实现那么准确，有时候反而模仿的神韵会更好。
所以这个 skills 会结合两者的优势，使用截图进行多模态分析 + CSS 处理 + 组件示例的方式，生成网站的 design.md，输出效果是我测试的网站里最好的。
04
以 Notion 页面为例
用不同的方案提取 Design.md 以后，都在 ClaudeCode 中使用 Kimi，让 Agent 生成模仿 Notion 这个页面的设计风格的网页：
参考页面：https://www.notion.com/product
原始页面：Notion 产品页，用来作为风格提取的目标对象。
HYBRID RESULT
我做出来的方案，更能够还原原始页面的设计风格。
纯 CSS 的方案虽然信息更精确，但对于整体视觉神韵的捕捉不如组合方案稳定。
可以看到，通过我们的 skills / 浏览器插件获取到的 design.md，更能够还原原始页面的设计风格。
05
插件与 Skills 的使用方式
如果你不习惯使用 skill 的话，你也可以直接使用浏览器插件 getwebdesign.top。
在浏览器中安装浏览器插件，就可以在侧边栏中使用。使用的时候需要你自行配置支持多模态的模型 API。
USAGE OPTIONS
PLUGIN
侧边栏使用
适合不想配置 skill、希望直接从浏览器页面提取设计规范的人。
SKILLS
Agent 工作流
适合把 Design.md 纳入开发流程，让 Agent 在制作页面前自动读取。
06
一个真实的个人网站案例
例如我最新更新的个人网站 https://liaocaoxuezhe.com，
我模仿设计师 @haxfenx 的网站做的个人网站截图。
推荐模仿学习，不建议 1:1 抄袭。
好的 design.md 应该帮助 Agent 理解风格，而不是复制一个页面。
FINAL NOTES
READ
先读风格
让 Agent 在写页面前读取 Design.md。
ADAPT
再做适配
把目标网站的风格翻译到自己的内容结构里。
BUILD
最后生成
把设计规范变成可复用的产品页面工作流。
DESIGN EXTRACTOR · GETWEBDESIGN.TOP · DESIGN.MD FOR AI AGENTS