Law的数字世界

1）Figma 很强，但它对小白来说太”全能”了#

Figma 的优点是专业、细、协作强、生态大。

但它的代价也很明显：你得学。

你要理解 Frame、Auto Layout、组件、变体、约束、样式库、协作规范……这些东西对设计师来说是生产力，对新手来说是门槛。

翻译：Figma 适合”我要成为会设计的人”，不一定适合”我今天要把官网做出来的人”。

如果你本质上是开发、运营、内容创业者、做 SaaS 的、做个人品牌的，你大概率不是想转行做设计师。

你只是想把官网搞定。

2）Stitch 很快，但它更像”生成器”，不一定直接给你稳定风格#

Google Stitch 这套思路我其实很看好，因为它让 DESIGN.md 这件事真正火起来了。

但 Stitch 更像是”帮你生成设计”的工具，而不是”替你做风格筛选”的工具。

你直接一句”做个科技公司官网”，它也能出图。

问题是，风格是否高级、是否符合你的业务、是否接近市场主流水平，依然吃你的审美判断。

而小白最缺的，恰恰就是这个判断。

3）awesome-design-md 的价值，是先帮你跳过”审美起步阶段”#

这才是重点。

你为什么总觉得自己设计的网站”不高级”？

不是你不努力，而是你在跟一堆已经被几十上百人打磨过的官网比。那些官网背后可能是专业设计师、品牌团队、增长团队、A/B 测试、用户反馈、商业转化一起堆出来的。

个人想从零空想出一个同等级官网，难度真的很高。

泼冷水一句：

很多人以为”我多看点灵感网站就能做出高级官网”。现实是，看过不等于能复用，喜欢也不等于能落地。

你真正缺的，不是截图，而是能被 AI 和代码直接使用的设计规则。

而 awesome-design-md 恰好把这件事补上了。

它给你的不是一张图，而是一套可以直接喂给 Agent 的规则。

你不是在”照着抄”，你是在”继承成熟风格的设计语言”。

4）它特别适合官网这种场景#

为什么我一直强调”官网”？

因为官网跟后台系统不一样。

后台系统更看重功能密度、交互效率；官网更看重第一眼气质、品牌感、可信度、转化率。

官网用户往往只看几秒：

• 你是不是专业的
• 你做什么的
• 值不值得继续往下看
• 愿不愿意点咨询/注册/下载

所以官网的关键，不是”功能多”，而是”看起来对”。

而 awesome-design-md 这种方案，正好就擅长把”看起来对”这件事标准化。

第一步：先去看样例，不要急着写代码#

项目地址在这里：awesome-design-md。

进去后，你先看 design-md/ 目录，会看到一堆站点名字。

比如：

• Stripe
• Apple
• Vercel
• Linear
• Notion
• Cursor
• Supabase
• Webflow

这一步不要贪多。

你先问自己一句：我这次做的官网，更像哪一类？

可以这样粗暴分类：

别一上来就选”最好看”的。

要选”最像你业务”的。

因为官网设计最怕的不是丑，而是气质跑偏。

第二步：看各个站点的设计风格——3 种方式都能用#

这一步很多人会漏掉，但其实是整个流程里最重要的”选料”环节。

每个站点目录里一般有这三个文件：

• DESIGN.md — AI 看的设计说明书
• preview.html — 亮色版视觉样板
• preview-dark.html — 暗色版视觉样板

你点开 preview 以后，能看到颜色色板、字号层级、按钮样式、卡片组件、阴影效果，一眼就知道这套风格长什么样。

问题来了：preview.html 是个 HTML 文件，怎么打开它看效果？

下面三种方式，从最懒到最完整，按需选一种就行。

方式一：在线直接看（最懒，0 下载）

不用 git，不用安装任何东西。

用 htmlpreview.github.io 这个在线服务，可以直接把 GitHub 上的 HTML 文件渲染出来。

用法：在 GitHub 里找到你想看的 preview.html，复制它的地址，拼到这个前缀后面：

1
https://htmlpreview.github.io/?https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/stripe/preview.html

把最后的 stripe/preview.html 换成你想看的站点名就行。

比如看 Notion 的：

1
https://htmlpreview.github.io/?https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/notion/preview.html

比看 Figma 的：

1
https://htmlpreview.github.io/?https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/figma/preview.html

这种方式适合先快速扫一圈，不想下载整个仓库的时候用。

htmlpreview 是第三方服务，偶尔会加载慢，或者有些用了复杂 JS 的页面渲染不完整。遇到这种情况就换方式二。

方式二：git clone 到本地，用浏览器直接打开（最常用）

这是最推荐的方式，一次下载，本地随便翻。

打开终端，执行：

1
git clone https://github.com/VoltAgent/awesome-design-md.git

下载完毕后，进入任意一个站点目录，比如：

1
awesome-design-md/design-md/stripe/

里面有 preview.html 和 preview-dark.html，双击用浏览器打开就能看效果。

Windows 用户也可以直接在资源管理器里双击 .html 文件，系统会自动用默认浏览器打开。

这样做的好处是：一次 clone，所有 50+ 个站点都在本地，随时比对，不依赖网络。

想同时比对多个风格？在浏览器里把不同站点的 preview.html 开成多个 Tab，左右切换看——比一张张截图对比更直观。

方式三：用本地 HTTP 服务器跑（开发者方式，效果最完整）

如果你遇到某些 preview 页面双击打开后样式不对，或者 JS 效果没加载出来，通常是浏览器的 file:// 协议安全限制导致的。

这时候用本地服务器跑就稳了。

最省事的方法是用 Python 内置的 HTTP 服务器：

1
# 进入仓库根目录
2
cd awesome-design-md
3

4
# 启动本地服务器
5
python -m http.server 8080

然后在浏览器打开：

1
http://localhost:8080/design-md/stripe/preview.html

同样换站点名就能看对应的。

没有 Python 也可以用 Node.js 的 npx serve：

1
npx serve .

或者在 VS Code 里装 Live Server 插件，右键 HTML 文件选「Open with Live Server」，一键搞定。

三种方式一句话总结：

一个偷懒但很实用的方法：

同时打开 3 套你喜欢的 preview.html，对比这几件事：

• 整体气质是不是你想要的感觉
• 按钮和卡片是否顺眼
• 字体层级清不清楚
• 用在你行业上会不会违和

比如下面就是 Figma 和 Notion 两套风格的 preview 效果，气质差异一眼就看出来了——Figma 活泼多彩，Notion 克制温润：

第三步：把 DESIGN.md 放到你的项目根目录#

以 Notion 为例，我来带你走一遍。

Notion 是典型的”内容型产品”风格——暖白底色、衬线标题、克制的留白、亲切但不廉价。如果你做的是笔记工具、知识库、文档类产品，或者就是想要一个”看起来干净有品味”的官网，选它准没错。

第一步，找到文件。

在 awesome-design-md 仓库里进到这个路径：

1
design-md/notion/DESIGN.md

点开文件，右上角有个「Raw」按钮，点进去是纯文本版本，全选复制。

或者更省事，直接 git clone 整个仓库到本地，文件就在：

1
awesome-design-md/design-md/notion/DESIGN.md

第二步，放到你的项目根目录。

我自己的项目路径是这样的：

1
D:\git\content-studio-web

里面有 backend、frontend、docs 三个子目录，前端代码在 frontend 下。

DESIGN.md 要放在最外层的根目录，不是 frontend 里：

1
D:\git\content-studio-web\DESIGN.md

放完以后目录大概长这样：

1
D:\git\content-studio-web
2
├── .claude/
3
├── backend/
4
├── docs/
5
├── frontend/
6
├── DEPLOY.md
7
├── README.md
8
└── DESIGN.md        ← 和 README.md 平级，就放这一层

就这一步，把文件扔进去，不需要任何额外配置。

实际效果长这样，DESIGN.md 和 DEPLOY.md、README.md 平级放在根目录：

为什么要放这个位置？

因为 Claude Code 这类 AI Agent 在读项目的时候，会自动扫根目录下的几个特殊文件——CLAUDE.md、AGENTS.md、DESIGN.md 都是它重点关注的。

你不需要告诉它”去哪找设计规范”，只要文件在根目录，它自己会读。

一句话记住：AGENTS.md 告诉 AI 怎么干活，DESIGN.md 告诉 AI 活要干成什么气质。两个配合用，比你在 prompt 里反复描述”要高级要简洁要有品味”靠谱得多。

第四步：在 Claude Code 里明确下指令#

这一步最关键。

很多人把 DESIGN.md 放进去了，然后只说一句：“帮我做个官网。”

这种写法太模糊了。

你要说得像个项目负责人，尽可能的详细。

我以我自己的产品 Lucky Rabbit Creator Center 为例，给你看一份真实可用的指令：

1
请读取项目根目录的 DESIGN.md，基于这套 Notion 风格的设计系统开发一个产品官网。
2

3
## 产品背景
4
产品名称：Lucky Rabbit Creator Center
5
产品定位：AI 驱动的内容创作工具平台，帮助内容创作者一键生成高质量配图
6
核心功能：封面图生成、信息图生成、文章配图、知识漫画、幻灯片、小红书配图
7
目标用户：自媒体创作者、微信公众号运营者、小红书博主
8

9
## 页面结构
10
按照以下顺序开发各个区块：
11
1. 导航栏：左侧 Logo + 产品名，中间导航（功能、关于），右上角语言切换按钮 + 登录按钮（登录跳转 http://xx.xx.xx.xx/login）
12
2. Hero 区：大标题 + 副标题 + CTA 按钮（立即免费体验 → http://xx.xx.xx.xx）
13
3. 功能介绍区：展示 6 个核心功能（封面图、信息图、文章配图、知识漫画、幻灯片、小红书配图），每个功能配图标和简短说明
14
4. 使用流程区：3 步走（输入内容 → 选择风格 → 一键生成）
15
5. FAQ：常见问题解答
16
6. 页脚：版权信息 + 快速链接
17

18
## 技术要求
19
- 技术栈：Vite + React + TypeScript + Tailwind CSS（与现有项目保持一致）
20
- 语言切换：中英文，默认中文
21
- 响应式：桌面端优先，兼容移动端
22
- 整体风格严格遵守 DESIGN.md，不要自由发挥成别的审美
23

24
## 产品参考
25
可通过 Chrome MCP 浏览 http://xx.xx.xx.xx/ 查看产品的真实界面、功能布局和文案，以此作为官网内容的参考依据。

你自己用的时候，把产品名称、功能描述、跳转链接换成你自己的就行。

核心原则只有一条：DESIGN.md 负责定风格，你的指令负责定业务。 两者一结合，Claude Code 才能稳定输出，不乱跑偏。

下面是我在 Claude Code 里实际下指令的截图，可以对照着看：

跑完之后，官网的中英文两个版本就出来了——Claude Code 自动按 DESIGN.md 的 Notion 风格做了完整排版，中英文内容也分开处理了，品质还不错：