awesome-design-md案例PostHog刺猬品牌与开发者友好暗色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本文带你逐层拆解 awesome-design-md 精选集中的 PostHog 案例知名开源产品分析工具 PostHog 如何用刺猬吉祥物、奶油色画布与暗色代码块构建出友好工程手绘本风格以及你如何把这份 DESIGN.md 丢进项目让 AI 编码 Agent 一键生成同款 UI。30秒了解 awesome-design-md 与 DESIGN.md 文件awesome-design-md是一个精选开源仓库收录了 73 个流行网站的 DESIGN.md 设计系统分析文件覆盖 PostHog、Stripe、Vercel 等知名品牌DESIGN.md是由 Google Stitch 提出的纯文本设计系统文档概念它只记录颜色、字体、圆角、间距、组件规则等设计事实任何 AI Agent 都能直接读懂用法极简把一份DESIGN.md拷到你的项目根目录告诉 AI按这个风格帮我做页面即可生成视觉一致的界面无需 Figma 导出或特殊工具在仓库的站点列表中PostHog 的定位是Playful hedgehog branding, developer-friendly dark UI俏皮的刺猬品牌 开发者友好暗色 UI这正是本文要拆解的两条主线。刺猬品牌解析奶油画布上的教科书插画打开 design-md/posthog/DESIGN.md你会发现这套设计最反直觉的一点它主动拒绝了开发者工具常见的冷峻暗黑科技风转而走暖色手绘路线。三大品牌支柱支柱关键做法对应 Token奶油色画布页面背景不是纯白而是全程贯穿的暖奶油色无任何阴影卡片靠 1px 橄榄色细边框平贴在画布上canvas→#eeefe9唯一高饱和色全站只有一个黄橙色 CTA 胶囊按钮深橄榄色文字出现在导航Get started、定价按钮等所有主操作上primary→#f7a501手绘刺猬吉祥物穿白大褂的刺猬、终端前的刺猬、躺椅上的刺猬像教科书页边涂鸦一样散布在布局中——装饰系统全靠它没有渐变、没有氛围背景hedgehog-mascot-card字体策略同样克制全站只用IBM Plex Sans Variable一款字体用 400/500/600/700/800 五档字重制造层级——层级靠字重对比而非颜色这正是工程博客气质的来源详见 DESIGN.md 排版章节。开发者友好暗色UI的三个关键细节PostHog 的暗色 UI 不是整站暗色而是在暖色画布中精准放置暗色岛屿专为开发者阅读代码而生暗色代码块是系统里唯一的高亮表面代码块使用深橄榄炭黑#23251d与标题文字同色号文字与暗面共用一个色白色代码文字置于白底文档卡片内部形成暗色浮岛——这是整个系统最有画面感的视觉时刻。规格见 code-block 组件定义。文档页专用 240px 粘性侧边栏文档页面在左侧固定 240px 边栏顶部是Ask PostHog AI搜索框每个产品板块配圆角线性小图标正文列宽约 720px——典型为开发者优化的阅读布局。四色柔和提示横幅管理信息层级长文档中用蓝 Tip、绿✅ Success、红⚠️ Warning、紫 Info四种柔和底色横幅做内联注解且规则明确它们只允许出现在文档正文不能当营销卡片背景。配套的不要做清单同样有参考价值Dos and Donts 章节 直接写明卡片禁止加投影黄色 CTA 每屏最多一个不要用通用图标集替换刺猬插画——这些护栏正是 AI 生成 UI 时保持品牌一致性的关键。一键上手3步把 PostHog 风格用进你的项目第 1 步获取仓库git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md第 2 步拷贝设计文件将design-md/posthog/DESIGN.md复制到你的项目根目录与AGENTS.md平级。这个文件同时包含 YAML 形式的 Token 数据颜色/字体/圆角/间距/组件和自然语言规则Agent 两种读法都兼容。第 3 步对 AI 说一句指令例如阅读项目根目录的 DESIGN.md按它的颜色、字体和组件规则帮我搭一个产品定价页。 小贴士修改设计文件后可用npx google/design.md lint DESIGN.md自动检查悬空引用和对比度问题方法来自 迭代指南章节。相关资料与延伸阅读 PostHog 设计系统全文design-md/posthog/DESIGN.md含完整颜色表、字阶层级表、组件规格 PostHog 案例说明页design-md/posthog/README.md 仓库总览与 73 个品牌清单README.md 贡献指南如何修正 Token 错误CONTRIBUTING.md 开源许可LICENSEMIT 协议如果你想在其他暗色风格之间做对比仓库里的 Sentry 案例粉色紫色强调的数据密集型仪表盘和 Warp 案例块状命令式终端 UI都是不错的对照组——而 PostHog 证明了开发者友好的暗色 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），仅供参考
