Design System Gallery
为下一个网站,
找到能直接落地的视觉方向。
我们拆解了 Airbnb、Claude、Stripe、Linear 等 71 套顶级品牌的完整视觉系统——色彩、字体、组件规格全部整理成结构化 DESIGN.md,并配上可交互实时预览。挑中一套,复制 prompt,直接喂给 Claude、Cursor、v0,产出同款气质的界面。
已拆解 71 套品牌视觉系统
工作流 · How it works
从「找灵感」到「能落地」,只要四步。
不再是一面看完就忘的灵感墙,而是一条能直接接进你 AI 工作流的管线。
01
浏览 & 筛选
按行业、主色、明暗、字体气质与风格标签,从 71 套里快速锁定候选方向。
02
拆解预览
每套都有可交互 Live Preview:色板、字阶、按钮与组件一览无余,而不是一张截图。
03
复制 Style Pack
把结构化的 DESIGN.md(tokens 化的色彩 / 字体 / 组件)一键复制成 prompt。
04
喂给 AI 建站
粘进 Claude、Cursor、v0,直接产出这套风格的页面,省掉从零调设计的时间。
为什么好用
不止是灵感墙,而是能执行的设计说明书。
Style Pack · DESIGN.md
每套系统都拆成机器可读的规格:色彩 tokens、字阶、圆角、组件行为,全部写进一份 DESIGN.md。一键复制成 prompt,喂给 AI 就能复现——不用你再逐个抠色值。
airbnb / DESIGN.md
# Airbnb — design analysis colors: primary: "#ff385c" # brand voltage ink: "#222222" canvas: "#ffffff" typography: display: Cereal VF · 28/600 body: Cereal VF · 16/400 radius: button: 32px card: 14px
可交互实时预览
悬停、点击、响应式断点都能亲手试,真实感受这套系统的气质,而不是靠一张截图脑补。
五维交叉筛选
行业 × 主色 × 明暗 × 字体气质 × 风格标签,多维交叉,几秒锁定贴合项目的方向。
个人评分 & 收藏
登录后可为每套系统打分、加标记;评分按账号隔离,方便为不同项目分别沉淀候选方向,下次接着挑。
收录范围
覆盖 9 大行业,明暗与多种色系一应俱全。
从消费级到金融、AI、开发者工具、汽车豪华品牌——总有一套贴近你正在做的产品。
全部 71AI & LLM金融 & 加密开发者工具设计工具电商零售数据库 & DevOps效率 & SaaS媒体消费汽车