拓冰网站定制 
awesome-design-md案例Stripe签名紫色渐变与weight-300优雅字体的完整拆解【免费下载链接】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-mdawesome-design-md 是一个精选的DESIGN.md 设计系统文档合集把一份品牌的DESIGN.md丢进项目AI 编码代理就能生成风格一致的 UI。本文以合集中最具代表性的Stripe 案例为例完整拆解它标志性的签名紫色渐变#533afd靛蓝 渐变网格背景与 weight-300 纤细字体是如何被沉淀成 AI 可读的设计令牌的 什么是 awesome-design-md让 AI 能读懂的 Stripe 设计一句话理解这个项目AGENTS.md告诉编码代理如何构建项目DESIGN.md告诉设计代理项目应该长什么样awesome-design-md 提供的是从真实网站中提炼的73 份开箱即用的 DESIGN.md 文件涵盖颜色令牌、字体层级、组件样式、布局间距、阴影系统、Dos Donts 等 9 大板块详见 README.md。你不需要 Figma 导出、JSON Schema 或任何特殊工具——它就是一份 Markdown而 Markdown 正是大语言模型读取效果最好的格式。 核心用法只有两步把某个网站的DESIGN.md复制到项目根目录然后告诉 AI 代理按这个风格给我建一个页面。快速上手三步生成 Stripe 风格页面1️⃣ 获取仓库如需要 clone地址为 https://gitcode.com/GitHub_Trending/aw/awesome-design-md 2️⃣ 复制 Stripe 的设计文档到你的项目根目录design-md/stripe/DESIGN.md3️⃣ 对 AI 代理说请阅读 DESIGN.md用它描述的设计语言生成一个 Stripe 风格的产品落地页。 核心文件位置design-md/stripe/DESIGN.md —— 包含从 YAML 令牌颜色、字体、圆角、间距到组件规范的全部定义文件开头 前 244 行 就是可直接被 AI 解析的结构化令牌区。Stripe 签名紫色渐变一张网撑起整个品牌打开 Stripe 官网最抓眼球的不是 Logo而是页面上三分之一那片柔和的奶油色 → 蜜橘 → 薰衣草紫 → 电光靛蓝 → 宝石粉横向晕染的渐变网格Gradient Mesh。文档在 Overview 里开宗明义Stripis design language opens with the gradient mesh见原文。核心色彩令牌一览令牌色值角色primary#533afd签名靛蓝唯一的填充 CTA 色primary-deep#4434d4渐变中间停靠点primary-press#2e2b8c按钮按压态brand-dark-900#1c1e54深蓝推荐套餐卡、仪表盘外壳ink#0d253d正文色——永远是深蓝从不纯黑ruby/magenta#ea2261/#f96bee只出现在渐变里永不用于按钮canvas-cream#f5e9d4奶油色特性卡蓝白节奏中的暖色间奏 两条关键规则藏在 Dos and Donts 里靛蓝要节制使用——每个视觉区块只允许一个填充按钮渐变网格不可用普通 CSS 渐变替代真实的 mesh 带有有机色块blob形状文档建议用 SVG 分层或大图实现L425-L427。它不是装饰而是 Stripe 的主深度系统——用大气感替代字面阴影。weight-300 优雅字体纤细才是 Stripe如果只能记住一个数字请记住300。Stripe 的整个展示字阶都跑在 weight 300 上再叠加负字距56px 时 -1.4px逐级缩到 20px 时 -0.2px——这就是文档所说的editorial-density display signature编辑感排版签名L323-L327。层级字号字距用途display-xxl56px / 300-1.4px英雄区大标题display-lg32px / 300-0.64px卡片标题body-md15px / 3000默认 UI 正文body-tabular14px / 300-0.42px金额数字专用开启tnumbutton-md16px / 4000胶囊按钮文字三个隐藏细节让效果更对味L295-L331ss01全局开启Sohne 字体替换为单故事 a 等字形变体需写在body上tnum表格数字凡渲染金额、交易量的单元格一律开启等宽数字——这是 Stripe 低调的金融 DNA 信号开源平替Sohne 是专有字体文档官方推荐Inter开源以 300 字重 letter-spacing: -1.4px近似还原并明确警告别用 Helvetica 或系统默认字体——它们比品牌需要的更重。⚠️ 最容易被 AI 代理犯错的红线display 层级字重不得高于 300——一旦升到 400品牌气息瞬间坍塌。组件与布局胶囊按钮 8px 网格 奶油卡Stripe 的组件体系可以用三个词概括紧、圆、白。️胶囊按钮圆角9999px内边距严格8px 16px——短、果断、交易感。文档甚至明令不得把胶囊换成圆角矩形8px 基础间距2/4/8/12/16/24/32/64px 令牌体系营销区块间距 64–96pxL332-L346️反转高亮套餐卡推荐套餐不用紫色而用深蓝底白字brand-dark-900这是 Stripe 区别于其他 SaaS 定价页的标志性选择L398-L399响应式阶梯定价卡 4 列 → 2 列 → 1 列1024/768 断点大标题 56 → 36px移动端仪表盘合成图退化为单面板L455-L474。总结令牌思维是 AI 生成好 UI 的关键回顾这次 Stripe 案例拆解awesome-design-md 真正教会我们的不是紫色好看而是一套可被 AI 精确执行的设计规则颜色有角色CTA 靛蓝 vs 渐变宝石红而不只是色值字体有禁令300 封顶、负字距、tnum而不只是字号表每个反模式都有Dont兜底AI 才不会自由发挥翻车。仓库中还有大量同类拆解可直接复用Vercel 的黑白精准、Linear 的紫色极简、Notion 的衬线温情、Supabase 的深绿开发者风……把 design-md/ 目录下任意一份DESIGN.md放进项目就是你拥有一座AI 可执行的 UI 品牌库的开始 ✨【免费下载链接】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），仅供参考 awesome-design-md案例：Stripe签名紫色渐变与weight-300优雅字体的完整拆解
awesome-design-md案例Stripe签名紫色渐变与weight-300优雅字体的完整拆解【免费下载链接】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-mdawesome-design-md 是一个精选的DESIGN.md 设计系统文档合集把一份品牌的DESIGN.md丢进项目AI 编码代理就能生成风格一致的 UI。本文以合集中最具代表性的Stripe 案例为例完整拆解它标志性的签名紫色渐变#533afd靛蓝 渐变网格背景与 weight-300 纤细字体是如何被沉淀成 AI 可读的设计令牌的 什么是 awesome-design-md让 AI 能读懂的 Stripe 设计一句话理解这个项目AGENTS.md告诉编码代理如何构建项目DESIGN.md告诉设计代理项目应该长什么样awesome-design-md 提供的是从真实网站中提炼的73 份开箱即用的 DESIGN.md 文件涵盖颜色令牌、字体层级、组件样式、布局间距、阴影系统、Dos Donts 等 9 大板块详见 README.md。你不需要 Figma 导出、JSON Schema 或任何特殊工具——它就是一份 Markdown而 Markdown 正是大语言模型读取效果最好的格式。 核心用法只有两步把某个网站的DESIGN.md复制到项目根目录然后告诉 AI 代理按这个风格给我建一个页面。快速上手三步生成 Stripe 风格页面1️⃣ 获取仓库如需要 clone地址为 https://gitcode.com/GitHub_Trending/aw/awesome-design-md 2️⃣ 复制 Stripe 的设计文档到你的项目根目录design-md/stripe/DESIGN.md3️⃣ 对 AI 代理说请阅读 DESIGN.md用它描述的设计语言生成一个 Stripe 风格的产品落地页。 核心文件位置design-md/stripe/DESIGN.md —— 包含从 YAML 令牌颜色、字体、圆角、间距到组件规范的全部定义文件开头 前 244 行 就是可直接被 AI 解析的结构化令牌区。Stripe 签名紫色渐变一张网撑起整个品牌打开 Stripe 官网最抓眼球的不是 Logo而是页面上三分之一那片柔和的奶油色 → 蜜橘 → 薰衣草紫 → 电光靛蓝 → 宝石粉横向晕染的渐变网格Gradient Mesh。文档在 Overview 里开宗明义Stripis design language opens with the gradient mesh见原文。核心色彩令牌一览令牌色值角色primary#533afd签名靛蓝唯一的填充 CTA 色primary-deep#4434d4渐变中间停靠点primary-press#2e2b8c按钮按压态brand-dark-900#1c1e54深蓝推荐套餐卡、仪表盘外壳ink#0d253d正文色——永远是深蓝从不纯黑ruby/magenta#ea2261/#f96bee只出现在渐变里永不用于按钮canvas-cream#f5e9d4奶油色特性卡蓝白节奏中的暖色间奏 两条关键规则藏在 Dos and Donts 里靛蓝要节制使用——每个视觉区块只允许一个填充按钮渐变网格不可用普通 CSS 渐变替代真实的 mesh 带有有机色块blob形状文档建议用 SVG 分层或大图实现L425-L427。它不是装饰而是 Stripe 的主深度系统——用大气感替代字面阴影。weight-300 优雅字体纤细才是 Stripe如果只能记住一个数字请记住300。Stripe 的整个展示字阶都跑在 weight 300 上再叠加负字距56px 时 -1.4px逐级缩到 20px 时 -0.2px——这就是文档所说的editorial-density display signature编辑感排版签名L323-L327。层级字号字距用途display-xxl56px / 300-1.4px英雄区大标题display-lg32px / 300-0.64px卡片标题body-md15px / 3000默认 UI 正文body-tabular14px / 300-0.42px金额数字专用开启tnumbutton-md16px / 4000胶囊按钮文字三个隐藏细节让效果更对味L295-L331ss01全局开启Sohne 字体替换为单故事 a 等字形变体需写在body上tnum表格数字凡渲染金额、交易量的单元格一律开启等宽数字——这是 Stripe 低调的金融 DNA 信号开源平替Sohne 是专有字体文档官方推荐Inter开源以 300 字重 letter-spacing: -1.4px近似还原并明确警告别用 Helvetica 或系统默认字体——它们比品牌需要的更重。⚠️ 最容易被 AI 代理犯错的红线display 层级字重不得高于 300——一旦升到 400品牌气息瞬间坍塌。组件与布局胶囊按钮 8px 网格 奶油卡Stripe 的组件体系可以用三个词概括紧、圆、白。️胶囊按钮圆角9999px内边距严格8px 16px——短、果断、交易感。文档甚至明令不得把胶囊换成圆角矩形8px 基础间距2/4/8/12/16/24/32/64px 令牌体系营销区块间距 64–96pxL332-L346️反转高亮套餐卡推荐套餐不用紫色而用深蓝底白字brand-dark-900这是 Stripe 区别于其他 SaaS 定价页的标志性选择L398-L399响应式阶梯定价卡 4 列 → 2 列 → 1 列1024/768 断点大标题 56 → 36px移动端仪表盘合成图退化为单面板L455-L474。总结令牌思维是 AI 生成好 UI 的关键回顾这次 Stripe 案例拆解awesome-design-md 真正教会我们的不是紫色好看而是一套可被 AI 精确执行的设计规则颜色有角色CTA 靛蓝 vs 渐变宝石红而不只是色值字体有禁令300 封顶、负字距、tnum而不只是字号表每个反模式都有Dont兜底AI 才不会自由发挥翻车。仓库中还有大量同类拆解可直接复用Vercel 的黑白精准、Linear 的紫色极简、Notion 的衬线温情、Supabase 的深绿开发者风……把 design-md/ 目录下任意一份DESIGN.md放进项目就是你拥有一座AI 可执行的 UI 品牌库的开始 ✨【免费下载链接】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），仅供参考