尧图网站建设 
把 DESIGN.md 丢进项目让 AI 生成官网同款 UI73 份品牌设计文档实战指南【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md你有没有遇到过这种情况你告诉 AI做一个 Vercel 风格的落地页它给你一套字号、色值、圆角全凭感觉的页面跟官网八竿子打不着问题不在模型在于你没给它一份视觉规范。awesome-design-md 仓库就是为此存在的它收录了 73 份 DESIGN.md 文档是从 Vercel、Notion、Supabase 等真实品牌官网提取的设计系统AI Agent 读一份就能生成风格一致的界面。AI 生成的页面为什么会跑偏先看一次真实的使用过程。我从 design-md/vercel/DESIGN.md 把这个文件复制到项目根目录然后对 Agent 只说了一句用项目里的 DESIGN.md 做一个定价页。接下来 Agent 自己做的事读取文档里的色板主按钮用#171717黑画布用#ffffff白链接用#0070f3蓝读取字体层级大标题 48px / 字重 600 / 字距 -2.4px正文 16px / 字重 400读取组件规则营销按钮圆角 100px 胶囊导航按钮圆角 6px跑偏的根源是信息缺口你说深色高级感Agent 只能猜文档写#171717Agent 只能执行。DESIGN.md 的本质一份纯 Markdown 设计系统文档没有 Figma 导出、没有 JSON SchemaMarkdown 恰恰是大语言模型读得最懂的格式。仓库把两个容易搞混的文件分得很清楚文件谁来读管什么AGENTS.md编码 Agent怎么构建项目构建方式DESIGN.md设计 Agent项目长什么样视觉语言简单说AGENTS.md 管怎么做DESIGN.md 管长啥样两者不冲突。Agent 实际读到什么两种文档骨架翻开仓库里任意一份 DESIGN.md骨架只有两种。骨架一纯散文 表格。用编号章节顺序推进色值、字号直接写在正文和表格里好读适合快速浏览。骨架二YAML frontmatter 令牌引用。以 design-md/notion/DESIGN.md 和 design-md/vercel/DESIGN.md 为代表文件头部是一段结构化令牌。先解释两个词frontmatter 就是文件开头---之间的一段 YAML 配置令牌token可以理解为变量——先定义一次后文用{colors.primary}引用就像 CSS 变量。Vercel 版的令牌块长这样colors: primary: #171717 canvas: #ffffff link: #0070f3正文里所有涉及颜色的地方都写{colors.primary}而不是重复写色值。好处是改一处、全局生效Agent 也不会把错误色值安到错误组件上。把色板写成语义化三件套好的色板章节每个颜色都有三样东西语义名、十六进制色值、使用角色。拿 Vercel 的色板举例primary#171717唯一的主 CTA 背景色——黑墨就是转化目标link#0070f3仅用于可点击文本加深态#0761d1留给按下状态error#ee0000只出现在错误提示里如果你只抄一份色值列表Agent 会自己发明用法——比如把品牌蓝刷到背景上。写上角色它的发挥空间就被压缩到挑哪个色、放哪个位置。字体、间距、圆角把手感写成刻度表紧凑一点大一点这种词对 Agent 没用必须落成刻度。Vercel 的字体层级就是一张完整的表角色字号字重行高用途display-xl48px60048px英雄区大标题body-md16px40024px正文段落button-lg16px50024px主按钮文字caption-mono12px40016px技术标签、代码标注同一份文档里还有等距刻度基础单位 4px 起步xs 8px→md 16px→lg 24px→xl 32px→section 192px圆角刻度sm 6px导航按钮→md 8px卡片→pill 100px营销 CTA。三套刻度齐了Agent 输出的间距和圆角才有品牌感不会随机给你一个 13px 圆角。另外注意字体替代Vercel 用 Geist 字体文档里直接给出 fallback 链Geist, Inter, system-ui, sans-serif——专有字体加载不了时Agent 有明确的降级选择。给 AI 一张禁令清单这是整份文档里最容易被跳过、却最影响生成质量的章节Dos and Donts。看 design-md/vercel/DESIGN.md 的 Dont 部分条条具体❌ 不要引入第六种强调色——墨黑 灰 四组渐变色就是全部❌ 不要把大标题写成全大写——sentence-case 负字距是品牌声音❌ 不要把渐变缩小到 icon 尺寸——它只活在 hero 区❌ 不要把正文字号配到 700 字重——展示级字重的上限是 600禁令的本质是划定边界AI 最怕看起来都行一条明确的 Dont 能直接砍掉一类跑偏。只写可以做什么的文档等于没写护栏。怎么选8 大类 73 个品牌所有文档都在 design-md/ 目录下一个品牌一个文件夹每份文档都按 9 个标准章节组织Visual Theme氛围、Color Palette色板、Typography字体、Components组件、Layout布局、Elevation阴影层级、Dos and Donts、Responsive响应式、Agent Prompt Guide现成提示词。合集按 8 大类覆盖 73 个品牌挑几个方向给你开发者工具design-md/vercel/DESIGN.md、design-md/raycast/DESIGN.md——黑白精密、Geist 字体路线生产力与 SaaSdesign-md/notion/DESIGN.md、design-md/miro/DESIGN.md——暖色插画感 vs 亮黄无限画布金融科技design-md/supabase/DESIGN.md暗色祖母绿、design-md/coinbase/DESIGN.md信任蓝复古怀旧design-md/dell-1996/DESIGN.md1996 年企业官网、design-md/nintendo-2001/DESIGN.mdY2K 主机金属面板拿不准选哪个打开对应文档的 Overview 章节读一遍氛围描述2 分钟就能判断合不合适。带走一份下一步动作三步开始用克隆仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md挑一个品牌把它的DESIGN.md复制到你的项目根目录对 Agent 说build me a page that looks like this剩下的它自己读一句话速查要点一句话是什么73 份纯 Markdown 品牌设计系统AI 的视觉规范怎么用拷DESIGN.md进项目根目录让 Agent 直接读写什么语义化色板、完整字体表、组件状态、间距圆角刻度最容易漏Donts 禁令清单和字体 fallback 链想改进文档看 CONTRIBUTING.md 的指南提交前先开 issue项目遵循 MIT 协议见 LICENSE。现在就去design-md/里挑一个你喜欢的品牌让 Agent 开工 【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 把 DESIGN.md 丢进项目，让 AI 生成官网同款 UI：73 份品牌设计文档实战指南
把 DESIGN.md 丢进项目让 AI 生成官网同款 UI73 份品牌设计文档实战指南【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md你有没有遇到过这种情况你告诉 AI做一个 Vercel 风格的落地页它给你一套字号、色值、圆角全凭感觉的页面跟官网八竿子打不着问题不在模型在于你没给它一份视觉规范。awesome-design-md 仓库就是为此存在的它收录了 73 份 DESIGN.md 文档是从 Vercel、Notion、Supabase 等真实品牌官网提取的设计系统AI Agent 读一份就能生成风格一致的界面。AI 生成的页面为什么会跑偏先看一次真实的使用过程。我从 design-md/vercel/DESIGN.md 把这个文件复制到项目根目录然后对 Agent 只说了一句用项目里的 DESIGN.md 做一个定价页。接下来 Agent 自己做的事读取文档里的色板主按钮用#171717黑画布用#ffffff白链接用#0070f3蓝读取字体层级大标题 48px / 字重 600 / 字距 -2.4px正文 16px / 字重 400读取组件规则营销按钮圆角 100px 胶囊导航按钮圆角 6px跑偏的根源是信息缺口你说深色高级感Agent 只能猜文档写#171717Agent 只能执行。DESIGN.md 的本质一份纯 Markdown 设计系统文档没有 Figma 导出、没有 JSON SchemaMarkdown 恰恰是大语言模型读得最懂的格式。仓库把两个容易搞混的文件分得很清楚文件谁来读管什么AGENTS.md编码 Agent怎么构建项目构建方式DESIGN.md设计 Agent项目长什么样视觉语言简单说AGENTS.md 管怎么做DESIGN.md 管长啥样两者不冲突。Agent 实际读到什么两种文档骨架翻开仓库里任意一份 DESIGN.md骨架只有两种。骨架一纯散文 表格。用编号章节顺序推进色值、字号直接写在正文和表格里好读适合快速浏览。骨架二YAML frontmatter 令牌引用。以 design-md/notion/DESIGN.md 和 design-md/vercel/DESIGN.md 为代表文件头部是一段结构化令牌。先解释两个词frontmatter 就是文件开头---之间的一段 YAML 配置令牌token可以理解为变量——先定义一次后文用{colors.primary}引用就像 CSS 变量。Vercel 版的令牌块长这样colors: primary: #171717 canvas: #ffffff link: #0070f3正文里所有涉及颜色的地方都写{colors.primary}而不是重复写色值。好处是改一处、全局生效Agent 也不会把错误色值安到错误组件上。把色板写成语义化三件套好的色板章节每个颜色都有三样东西语义名、十六进制色值、使用角色。拿 Vercel 的色板举例primary#171717唯一的主 CTA 背景色——黑墨就是转化目标link#0070f3仅用于可点击文本加深态#0761d1留给按下状态error#ee0000只出现在错误提示里如果你只抄一份色值列表Agent 会自己发明用法——比如把品牌蓝刷到背景上。写上角色它的发挥空间就被压缩到挑哪个色、放哪个位置。字体、间距、圆角把手感写成刻度表紧凑一点大一点这种词对 Agent 没用必须落成刻度。Vercel 的字体层级就是一张完整的表角色字号字重行高用途display-xl48px60048px英雄区大标题body-md16px40024px正文段落button-lg16px50024px主按钮文字caption-mono12px40016px技术标签、代码标注同一份文档里还有等距刻度基础单位 4px 起步xs 8px→md 16px→lg 24px→xl 32px→section 192px圆角刻度sm 6px导航按钮→md 8px卡片→pill 100px营销 CTA。三套刻度齐了Agent 输出的间距和圆角才有品牌感不会随机给你一个 13px 圆角。另外注意字体替代Vercel 用 Geist 字体文档里直接给出 fallback 链Geist, Inter, system-ui, sans-serif——专有字体加载不了时Agent 有明确的降级选择。给 AI 一张禁令清单这是整份文档里最容易被跳过、却最影响生成质量的章节Dos and Donts。看 design-md/vercel/DESIGN.md 的 Dont 部分条条具体❌ 不要引入第六种强调色——墨黑 灰 四组渐变色就是全部❌ 不要把大标题写成全大写——sentence-case 负字距是品牌声音❌ 不要把渐变缩小到 icon 尺寸——它只活在 hero 区❌ 不要把正文字号配到 700 字重——展示级字重的上限是 600禁令的本质是划定边界AI 最怕看起来都行一条明确的 Dont 能直接砍掉一类跑偏。只写可以做什么的文档等于没写护栏。怎么选8 大类 73 个品牌所有文档都在 design-md/ 目录下一个品牌一个文件夹每份文档都按 9 个标准章节组织Visual Theme氛围、Color Palette色板、Typography字体、Components组件、Layout布局、Elevation阴影层级、Dos and Donts、Responsive响应式、Agent Prompt Guide现成提示词。合集按 8 大类覆盖 73 个品牌挑几个方向给你开发者工具design-md/vercel/DESIGN.md、design-md/raycast/DESIGN.md——黑白精密、Geist 字体路线生产力与 SaaSdesign-md/notion/DESIGN.md、design-md/miro/DESIGN.md——暖色插画感 vs 亮黄无限画布金融科技design-md/supabase/DESIGN.md暗色祖母绿、design-md/coinbase/DESIGN.md信任蓝复古怀旧design-md/dell-1996/DESIGN.md1996 年企业官网、design-md/nintendo-2001/DESIGN.mdY2K 主机金属面板拿不准选哪个打开对应文档的 Overview 章节读一遍氛围描述2 分钟就能判断合不合适。带走一份下一步动作三步开始用克隆仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md挑一个品牌把它的DESIGN.md复制到你的项目根目录对 Agent 说build me a page that looks like this剩下的它自己读一句话速查要点一句话是什么73 份纯 Markdown 品牌设计系统AI 的视觉规范怎么用拷DESIGN.md进项目根目录让 Agent 直接读写什么语义化色板、完整字体表、组件状态、间距圆角刻度最容易漏Donts 禁令清单和字体 fallback 链想改进文档看 CONTRIBUTING.md 的指南提交前先开 issue项目遵循 MIT 协议见 LICENSE。现在就去design-md/里挑一个你喜欢的品牌让 Agent 开工 【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考