Vibe Design
Examples · theme
Vibe Design
设计系统风格预览
面向产品与设计团队的可视化设计系统预览：在同一页核对色彩、组件、卡片与反馈状态， 快速对齐品牌观感与交互规范，支撑官网、后台与 App 原型高效交付。
{{ inventory.families }}
组件类型
{{ inventory.components }}
组件数量
{{ inventory.layouts }}
布局框架
{{ inventory.blocks }}
区块数量
Colors · tokens
色板与令牌
Buttons · families
按钮家族
主要按钮
btn-primary
柔和按钮
btn-soft
中性按钮
btn-secondary
描边按钮
btn-outline
图标按钮
btn-icon
按钮尺寸
btn-size
Surfaces · cards
卡片容器
Card Shadow
纯白卡面 + soft 投影，层级清晰不抢眼。
适合内容展示与信息分组。
Card Flat
无投影平面卡，适合弱层级说明。
常用于次级说明区。
推荐方案
¥199/月
会员头图式蓝渐变锚点卡，角上半透明装饰圆。
悬停扫光
悬停时斜向高光扫过表面，适合强调可点击内容卡。
surface-fx · shine
流光边框
悬停时主色高光沿边框旋转，适合定价或重点方案卡。
surface-fx · border-flow
悬停抬起
悬停上移并加强阴影，不跟鼠标，适合功能入口卡。
surface-fx · lift
使用进度
存储配额68%
交付准时率91%
功能卡片
纯白卡面 + soft 投影；适合内容展示，不做悬停位移。
Forms · controls
表单组件
搜索输入框
前缀输入框
密码输入框
数字输入框
下拉选择器
华东
华南
华北
西部
端点标签滑块
日期选择器
日期范围选择器
时间选择器
多选框
邮件
短信
推送
单选框
低
中
高
开关
公开资料
Type · scale
字号层级
把想法做成可交付原型
Inter · 600把想法做成可交付原型
Inter · 600区块小标题
Inter · 600卡片标题
Inter · 600正文说明：换肤后对比度仍应清晰可读。
Inter · 400辅助正文用于紧凑信息与次要文案。
Inter · 400Feedback · tags
标签与反馈
Tabs
消息提示
标签
警告提示
Charts · preview
图表预览
Data · table
表格与指标
进度条
进度组件
默认进度
成功
警告
危险
States · result
结果与空态
还没有任何项目
创建你的第一个项目开始吧。
Social CTA
关注我们
获取最新设计规范与组件更新，访问官网或联系团队。
