设计系统 Playground
选模板骨架 + 配色方案,或 DIY 自定义。选定后全分页联动。
A骨架模板
圆角 / 字族 / 字重 / 字距。决定整体气质。当前基线:Muji×Stripe 融合。
Cal.com
柔和圆润 · 6px 圆角 · 内嵌阴影
温暖圆润,圆角适中,输入框带内嵌阴影。适合 SaaS 预约类。
Linear
锋利工程感 · 6px · 紧凑字距
工程理性,字距收紧,tag 用直角描边。适合开发者工具。
Vercel Geist
极简硬朗 · 4px · 描边按钮
极简硬朗,小圆角,按钮带描边。适合技术型产品。
Muji 无印
直角极简 · Helvetica · 双字重
极致克制,零圆角,Helvetica 字族。朴素无装饰。
Stripe
质感温润 · 6px · 双层投影
精致质感,柔和双层投影,hover 浮起。适合商业产品。
Muji×Stripe 融合基线
Helvetica + 10px 圆角 + 柔和投影
取 Muji 的 Helvetica 字族与留白,取 Stripe 的 10px 圆角与柔和投影。比纯 Muji 温润,比纯 Stripe 克制。当前 PU 基线。
B配色方案(15 套 Anti-Slop 轮换家族)
中性基底 + 单一饱和点缀。避开 beige+brass AI 默认味。当前基线:O 宣纸白 + 翡翠绿。
ACold Luxury
银灰 · 铬 · 烟
BMono + Emerald
最克制的「一点绿」
CMono + Electric Blue
工程理性
DCobalt + Cream
饱和钴蓝对单一中性暖白
ETerracotta + Slate
暖锈对冷灰 · 冷暖对比
FBlack & Tan
锐对比 · 无米色
GInk Wash
中性冷灰 + 青墨强调 · 东方克制
HWarm Grey Mono
暖灰阶(非米色)
IWarm Grey + Forest
B 的暖版
JWarm Grey + Plum
有腔调的暖调
KStone + Rust
大地但不 brass
LCool Grey + Teal
比翡翠更冷更静
MPaper Ink
纯东方极简 · 零彩色
NSoft Black + Mustard
Muji 原色系
OPaper + Emerald
宣纸温润暖底 + 翡翠生机点睛· 基线
CDIY 微调
基于选定配色「O」微调单个颜色。改完全分页联动。
#faf9f6
#ffffff
#f0efe9
#1a1a18
#807d75
#e4e1d8
#059669
#ffffff
D实时预览
当前 Muji×Stripe 融合 · 配色 O · 浅色
标签 Tag
龙
E组件分页预览
6 轮选型 · 共 28 组件。点击进入分页查看。
第一轮 · 6 组件
基础组件
Alert · Progress · Avatar · Breadcrumb · Accordion · HoverCard
第二轮 · 4 组件
反馈数据
Result · Statistic · Tag · Skeleton 增强
第三轮 · 5 组件
移动端
NavBar · TabBar · ActionSheet · SwipeCell · PullRefresh
第四轮 · 5 组件
内容创作
Editor · MediaUploader · MarkdownRenderer · TagInput · SplitPane
第五轮 · 5 组件
数据密集
Chart · Timeline · Descriptions · Filter · EmptyTableRow
第六轮 · 3 组件
工程基建
Command · Calendar · kbd