创意灵感库

精选创意设计灵感展示

返回列表
组件

字体样式调试器

·

字号、字重、字距、行高滑杆配合对齐方式与字体族快捷切换，右侧文字实时预览并生成对应 CSS，一键复制。适用场景：可用于设计工具页、排版调试面板、主题配置后台。

表单滑块交互

排版参数

22px
500
1px
1.7

对齐方式

字体系列

好的排版会说话

字号、字重、字距与行高共同决定了一段文字的呼吸感。调节左侧参数，实时观察排版节奏的变化——这是构建设计系统时最常用的调试方式。

font-size: 22px;
font-weight: 500;
letter-spacing: 1px;
line-height: 1.7;
text-align: left;
font-family: -apple-system, "PingFang SC", sans-serif;

字体样式调试器

实时预览 · 可用于设计工具/排版调试面板

相关推荐

汇率换算器
组件
查看详情
组件

汇率换算器

双币种换算卡片，自定义币种下拉、金额输入与一键交换，结果数字滚动动画，附单位汇率明细。适用场景：可用于跨境电商价格展示、财务工具、旅行网站汇率小部件。

浏览器模型预览框
组件
查看详情
组件

浏览器模型预览框

带标签页与地址栏的浏览器窗口外壳，内嵌 iframe 离线预览多种典型站点页面，切换标签带淡入过渡。适用场景：可用于作品集项目展示、hub 项目卡片中的站点实时预览。

书签链接管理器
组件
查看详情
组件

书签链接管理器

深色主题书签卡片墙，支持名称与链接录入、URL 格式实时校验、分组筛选与悬浮删除，新增卡片带入场动画。适用场景：可用于资源导航页、个人主页友链墙、hub 项目链接管理。