Vibe session · Learning mode阅读、尝试、提问都留在同一个工作区
Course Map
练习进度 0/55
Learning Guide
Build session

用 Cowork 找设计参考 + 生成 design.md

beginner · 30-45 min · 步骤 1/6

没有 design.md,AI 每次都在重新猜你想要什么

先讲个真实场景。

你在 Cowork 里说:"帮我做一个咖啡店的官网首页。"

AI 出了一版。粉色的,圆角的,挺可爱。你说:"不对,我想要更高级一点的感觉。" AI 改成了黑白极简。你说:"太冷了,我想要温暖一点。" AI 加了一点橘色。你说:"橘色太鲜艳了……"

折腾了半小时,你才发现——你想要的其实是那种独立精品咖啡店那种"日式工业风"的感觉:原木 + 哑光黑 + 一点奶油黄、Helvetica 那种干净字体、留白多、不要花哨的图标。

如果你一开始就把这些写下来给 AI,5 分钟就完事了。这份"一开始就写下来"的东西,就叫 design.md

design.md 是什么

design.md 是一份纯文本的设计约定文档,告诉 AI:

  • 我这个产品给谁用(目标用户)
  • 调性是什么(高级 / 亲切 / 专业 / 活泼 / 极简 / 复古)
  • 用什么颜色(主色、辅色、文字色)
  • 用什么字体(标题字体、正文字体、是衬线还是无衬线)
  • 布局风格(卡片式 / 杂志式 / 极简留白 / 信息密集)
  • 组件风格(圆角多大、阴影怎么样、按钮长什么样)
  • 哪些设计不要(比如"不要拟物化、不要 Glassmorphism、不要彩虹渐变")
它不是 Figma 设计稿,也不是 PRD。它是 AI 时代的设计文档——纯文字、好维护、可复用、能直接喂给任何 AI 工具。

一个真实的 design.md 长什么样

# CoffeeNote design.md

## 产品调性
独立精品咖啡店在线社区。给爱喝手冲、有点钱、有点品味、但讨厌网红打卡风的年轻白领。
关键词:克制、温暖、专业、不浮夸。

## 颜色
- 主色:#1A1A1A(哑光黑)
- 辅色:#F5E6D3(奶油黄)
- 强调色:#C97D5D(赤陶橙,只用在 CTA 按钮)
- 背景色:#FAF8F3(米白)
- 文字色:#2C2C2C(深灰)/ #6B6B6B(中灰)

## 字体
- 标题:Inter 700,字母间距 -0.02em
- 正文:Inter 400,行距 1.7
- 数字 / 价格:JetBrains Mono(区分一下,显得专业)

## 布局
- 留白多,section 之间 120px padding
- 卡片圆角 8px(不要 16px,太可爱)
- 阴影:4px 8px rgba(0,0,0,0.06)(要轻,几乎看不到)
- 网格:12 栏,最大宽度 1200px

## 不要做的
- 不要 Glassmorphism(毛玻璃)
- 不要彩虹渐变
- 不要表情包式 Emoji 图标,要用线性图标
- 不要"加入我们改变世界" 这种营销话术

这份 design.md 一旦写好,后面你做 PPT、做 Brochure、做网站雏形、做视频脚本,全部用同一份蓝图。所有产出就会是一套的,不会东一块西一块。

你不需要懂设计

你可能会想——"我又不是设计师,怎么知道字体用 Inter 还是 Roboto?"

不用担心。这节 Lab 就是教你借助 Cowork 帮你定下来这些东西。你只需要回答:

  • 我做什么产品?
  • 我喜欢哪些产品的感觉?
  • 喜欢哪些产品的感觉?
Cowork 会帮你把"感觉"翻译成"颜色 + 字体 + 布局"这些具体的设计参数。

Vibe Workspace
Live build context

为什么需要 design.md

同样让 AI 出一个落地页,有的人 5 分钟出一版能用的,有的人改 20 轮还是别扭——区别在于有没有一份 design.md

自动保存在此设备
用一段话把产品的调性、目标用户、行业讲清楚让 Cowork 帮你找 3 个真实可参考的对标产品从参考里提取出可复用的设计语言(颜色 / 字体 / 布局 / 组件风格)
Home| Vibe Lab
草稿自动保存