AI资讯

我把这 62 个大厂设计风格总结成一个 getdesign.md

作者:空格的键盘0 次浏览 来源:空格的键盘
我把这 62 个大厂设计风格总结成一个 getdesign.md

有人把这些规范都整理成了 MD 文件,都在这个网站上 getdesign.md。62 个全球顶级品牌的设计语言,提炼成结构化的DESIGN.md文件,让 AI 编码 Agent 能直接读懂并执行。

Vibecoding 有个通病:做出来的东西太统一了。

主色多为紫色,看的多了审美疲劳,一眼就能认出是 AI 做的,就像下面这个。

文章配图

AI 做 UI 的时候,不会自动去选择某个像样的风格。

如果不去限定风格描述,他永远都是默认的出厂设置风格。

而风格这件事,一直是大厂在引领。

苹果有自己的设计规范,每个版本升级都会迭代自己设计,整个设计行业都被影响

文章配图

而其他大厂也有自己的设计风格,谷歌的 Material Design、字节的 Semi Design、阿里的 Ant Design、Notion 的黑白极简、Linear 的极简紫…

这些大厂的设计规范,是整个行业的审美教科书。

用户对「好看」的感知,也被这些产品训练了多年。

所以当给 AI 说「做成苹果风格」,背后是一套几十年积累、几百页规范、几千个组件决策的系。

不是一句话能描述清楚的。

01 汇聚 60+大厂设计规范

有人把这些规范都整理成了 MD 文件,都在这个网站上getdesign.md

62 个全球顶级品牌的设计语言,提炼成结构化的DESIGN.md文件,让 AI 编码 Agent 能直接读懂并执行。

覆盖的品牌横跨科技、消费品、奢侈品、金融:

文章配图

常见的那些「设计口碑好」的产品,基本都在上面。

DESIGN.md 文件:每个品牌背后是一份 Markdown 文件,描述字体体系、主色调、组件规范、表面质感、排版逻辑

文章配图

用CLI 工具,一条npx命令把文件装进本地

npx getdesign@latest add apple

项目本身开源在 VoltAgent/awesome-design-md 的仓库,社区在持续添加新品牌

文章配图

有了每个大厂详细的 DESIGN.md 文档,Agent 做产品就像厨师有了菜谱,知道了用什么食材、什么火候、什么摆盘。

02 DESIGN.md 怎么用

只需两步,很简单。

第一步:选品牌,装文件

# 苹果风npx getdesign@latest add apple# Claude 风npx getdesign@latest add claude

跑完之后,项目根目录会多一个DESIGN.md

第二步:告诉 AI

在你的 prompt 里加一句:

「参考项目根目录的 DESIGN.md,按照里面的设计规范来写这个页面的 UI。」

就这样。AI 有了具体的参照物,不靠猜了。

还可以风格混搭

同时装多个品牌的 DESIGN.md,然后告诉 AI:

「参考 DESIGN.md,用 Notion 的暖色调,结合 Linear 的极简排版,帮我做这个组件。」

相当于给 Agent 58 个可选择的审美维度,可以单选,可以混搭,产品的风格标识度一下子就上来了。

但是这样感觉还是有点麻烦了,每次都要Agent下载读取DESIGN.md 网站内容。所以

03 我做这个 Skill

我做了一个 Skill:brand-design-md

文章配图

效果是这样的:跟 Claude Code 说"用 Stripe 风格帮我做一个登录页",它自动识别品牌名,调用npx getdesign@latest add stripe拉取最新的 DESIGN.md,生成 UI。

和直接用 getdesign.md 网站相比,不需要提前下载文件,网站更新了也能用,支持 62 个品牌,中英文都能识别。支持多品牌混搭。

安装方式很简单,把 Skill 文件放进~/.claude/skills/brand-design-md/目录。

GitHub 仓库地址:github.com/zephyrwang6/brand-design-md

04 测试效果

我用一个叫 Lumina 的虚构 AI 写作工具作为内容,调用 skill 让 Claude Code 分别按 Apple、Notion、Claude 三套 DESIGN.md 生成了完整落地页。

内容完全一样,产品名一样,功能描述一样

只是设计风格不同。

Apple 风格:极致留白 + 电影质感

关键词:Premium white space / SF Pro / Cinematic imagery

文章配图

适合:高端产品页、精品 SaaS 落地页、任何想传达「贵」的东西。

Notion 风格:暖色极简 + 衬线阅读感

关键词:Warm minimalism / Serif headings / Soft surfaces

文章配图

适合:工具类产品、知识库界面、想要「专业但不疏离」的场景。

Claude 风格:赭石强调色 + 编辑排版

关键词:Warm terracotta accent / Clean editorial layout

文章配图

这个风格我最喜欢。

适合AI 产品页、知识密集型界面、想传达「有温度的智识感」的场景。

做完这三个 Demo,感受很直接。

同一套内容,三种风格,三家完全不同的公司做的产品。

这个 skill 解决的就给 AI 一个明确的审美参照系,让输出有方向,不随机。

05 最后

getdesign.md 就是写给 Agent 的审美说明书,

现在网上这种「写给 AI 看」的神仙文档真的很多(比如必备的.cursorrules,claude.md)。再比如那些产品设计思维,名人公开的内容,都可以制作成 skill。

只要自己需要,就可以让 Agent 帮我整理。

把你的核心诉求告诉 AI,让它去吃透这些开源文档,然后吐出一份为你量身定制的 skill。

开始绝对是为了解决自己的效率痛点。但只要这个工作流跑通了,我非常建议大家把它开源出去。

不要怕好东西被别人学走,创作者的价值在于「持续创造」的能力。

开源是做贡献,更是在找同频的人。

文章来自于微信公众号 "空格的键盘",作者 "空格的键盘"

相关主题

读完之后

加入 AINRK 交流群

了解加入交流群的方式,与更多 AI 从业者交流。

查看交流群说明(在新窗口打开)