我做了个插件和 Skills，一键提取任何网站的设计风格 Design.md
我做了一个浏览器插件 Design Extractor，
可以让你获取任何一个页面的设计规范，保存为 design.md。
https://chromewebstore.google.com/detail/design-extractor/adahpanfaajdfhddlaeplmkfnpnbkkke
项目的官网是 https://getwebdesign.top
同时，我也开源了同样技术方案的一个 skills，开源在了 https://github.com/liaocaoxuezhe/get-web-design
我们在让 AI Agent 开发网页或者 APP 的时候，
纯 AI 生成的内容，会显得太过千篇一律，大部分是蓝色+卡片+emoji 等元素会大量出现。
为了避免让 Agent 生成的网站太过无聊，
就需要使用 prompt 来指导 Agent 生成的设计风格。
例如我经常会加这样的提示词来让模型生成的质量更高
Design System (设计规范)
- 核心风格
风格: (在此处填空，示例:模仿 Notion.so 的视觉设计风格)
视觉: (在此处填空，示例:秩序感、高对比、大字号排版、纸媒质感。)
- 配色方案
Bg (背景颜色): (在此处填空，示例:米白 #FAF9F5)
Text (字体颜色): (在此处填空，示例:墨色 #141412)
Accent (强调涩): (在此处填空，示例:#D97757)
- 字体栈 (CDN)
(在此处填空)
- 质感 (必须)
SVG Noise: (在此处填空，示例:全局叠加透明度 0.05~0.08 的 feTurbulence 噪点，混合模式建议使用 multiply。)
Shadow: (在此处填空，示例:卡片需有统一的深邃阴影，营造悬浮感。)
- 动态交互 (Motion Design):
(在此处填空，示例:
编排式入场: 所有元素不得同时出现，必须使用 Staggered Reveals (阶梯式显现)，延迟范围在 0ms → 400ms。
惯性滚动: 引入基于 Intersection Observer 的滚动触发特效 (Scale up, Blur in, Parallax)。
微交互: 必须包含“磁吸按扭 (Magnetic Buttons)”、“跟随光标效果”以及带物理阻尼感的悬停缩放。
)
随着 prompt 中对设计的主导越来越普遍，越来越多人将设计的描述单独抽出来作为一个文件。
也就是 Design.md 文件。
和 Agent.md，rules.md，Memory.md 一样，Design 会在 Agent 进行设计/前端页面制作时，必须读取的设计指导文件。
Design.md 文件会成为下一个 Agent 产品都原生适配的文件。
前段时间，Google 也发布了 design.md 文件的文件规范，更加肯定了我的猜测
整个 DESIGN.MD 文件的规范，要求内容包含
- 顶部有 YAML 属性来展示基础信息，包含名称，作者，版本等等。
- 主要内容要求包a括
- Overview 概览 | Brand & Style 品牌与风格
- Colors 颜色
- Typography 字体样式
- Layout 布局 | Layout & Spacing 布局与间距
- Elevation & Depth 高度与深度
- Shapes 形状
- Components 组件
- Do’s and Don’ts 注意事项和禁忌
因为我最近频繁地在做前端页面，
有些是用来做 SEO 的小站，有些是官网，有些是临时起意做出来的产品页。
所以也研究并测试了很多版本的 design.md
让 AI 获取一个网站的 design.md 的时候。
一种方案是通过网站的 css 来分析；
另外一种是截图让多模态模型进行分析；
我进行了很多方法的测试，实际测试下来，
如果提供太详细的 css，只有在想实现功能和布局与目标网站一模一样的网站时，效果比较好。
提供截图让模型进行多模态分析的方案，虽然没办法实现那么准确，有时候反而模仿的神韵会更好。
所以这个 skills 会结合两者的优势，
使用截图进行多模态分析 + CSS 处理 + 组件示例的方式，生成网站的 design.md，
输出效果是我测试的网站里最好的。
例如，同样模仿 Notion 这个页面的设计风格 The AI workspace that works for you. | Notion
我做出来的方案是这样的：
而纯 CSS 的方案是这样：
可以看到，通过我们的 skills / 浏览器插件获取到的 design.md，更能够还原原始页面的设计风格。
如果你不习惯使用 skill 的话，你也可以直接使用浏览器插件 getwebdesign.top
在浏览器中安装浏览器插件，就可以在侧边栏中使用（）使用的时候需要你知行配置支持多模态的模型 api）。
例如我最新更新的个人网站 https://liaocaoxuezhe.com，
我模仿设计师 @haxfenx 的网站做的个人网站截图。
最后一点 tips：
在获取 design.md 的时候，推荐大家模仿学习，不建议 1:1 抄袭。