本月营收+33%
¥327.40 K
↑ 较上月 +33%
// V2.1 · INTERACTIVE · 2026-05-22
流·Studio 设计系统
本页是 design.md 的可视化样板间。所有 token / 组件均来自 assets/restraint.css —— 看到的就是页面用的。点击色块复制 token,hover / 点击组件看真实交互反馈。
// §1 · PHILOSOPHY
设计哲学
一句话:一台精密设备的工作面板。克制 + 单橙锚点 + 图纸装订线 + Mono 装饰。
三条铁律 // 不可妥协
// RULE 1
克制大于装饰
留白 > 容器 > 内容,大量空气感。padding 不确定选 24,margin 不确定选 64。
// RULE 2
单色锚点
全场只有一个 accent(橙)· 只用于 CTA / 关键状态 / 强调单词。其他颜色仅做语义信号。
// RULE 3
结构清晰可见
用 1 px 边框 + 8 px 圆角 + 准星 + 装订线 + mono 标签暴露"图纸感",而非阴影/渐变隐藏结构。
核心签名 // 4 个不能丢
- 主橙
#fa5d19(Firecrawl 实测)+ 单 hue alpha 阶梯 - 全场 8 px 圆角(Pill 999 例外)
- 主容器左右装订线 + 四角准星
- Mono 装饰
[ 200 OK ]// 05.14[ /v2 ](品牌签名 · Firecrawl 没有)
// §2.1 · COLOR TOKENS · FIRECRAWL-ALIGNED
色彩系统
冷灰底 · 单 hue 橙 · 5 色信号点。点击色块复制 token 名。禁止创建新色值,所有颜色必须用以下 token。
表面 / 背景 // 4 档 · 冷灰无色相
边框 // 3 档 · 差距极小靠语义
3 档相差只 1–2 色阶,肉眼几乎看不出。用语义,不用视觉对比 —— 80% 场景用 --border-faint。
主橙 Heat // 单 hue #fa5d19 + 8 档 alpha
全靠 alpha 叠加,绝不换 hue。hover 不切换深橙,而是用 90% / 16% 这些档位组合。
Accent 多彩点 // 5 色信号 · 限定语义场景
只用于语义信号(代码高亮 / info / 状态色),禁止做大面积装饰 —— 全场依然只有橙色一个 accent。
状态色配套(底 / 边) // 8% / 20% alpha
成功 · forest
失败 · crimson
信息 · heat
警告 · honey
Selection · Firecrawl 签名细节
页面任何文字选中时,底色 --heat-20 + 字色 --heat。试选下面这行字看效果:
本月营收 ¥327,400 较上月增长 33%,有 5 个项目处于"生成中"状态。其中 2 个需要重新调整模特模板。
// §2.2 · BLACK-ALPHA · 20 档核心工具尺
Black-Alpha 阶梯
日常用得最多的 token。0–24% 用 rgba(0,0,0,...);32% 起换 rgba(38,38,38,...)(避免叠出"灰中带蓝")。
// §2.5 · TYPE · MIXED STRATEGY
字体系统 · 中英协作
Inter(英文/数字)+ Alibaba PuHuiTi(中文)+ JetBrains Mono(装饰)。浏览器按字符级 fallthrough,不需要 JS,中英自然分工。
字体族原理 // browser-level character fallthrough
// 01 · ENGLISH
Inter
The quick brown fox jumps. 0123456789 — Vercel / Linear / Stripe 御用,屏幕 UI 优化。
// 02 · 中文
阿里普惠体
为中英混排专门设计的笔画粗细配比,与 Inter 视觉重量贴近。
// 03 · 装饰 MONO
JetBrains
[ 200 OK ] · // 05.14 · /v2 — 仅装饰,不参与正文。
// 混排实测 · MIXED RENDERING
本月营收 ¥327,400 较上月 +33%,共 5 个 AI 项目处于 "生成中" 状态
↑ 中文走 PuHuiTi · "¥" "327,400" "+33%" "5" "AI" 走 Inter · 字重视觉匀质,无错位
字重档位 // 400 / 500 / 600 · 700 仅徽标
// REGULAR · 400
流·Studio · Aa Bb 123
// MEDIUM · 500 ★ 默认
流·Studio · Aa Bb 123
// SEMIBOLD · 600
流·Studio · Aa Bb 123
// BOLD · 700 · 限徽标
流·Studio · Aa Bb 123
// Bold 700 仅用于 Ctrl K 这种纯英文徽标场景 · 正文严禁 700(中英字重错位会暴露)
// §2.6 · TYPE SCALE
字号 / 字重 / 行高(11 档)
数值类必须加 tabular-nums 或 .num。中文正文行高 1.65–1.8。
早上好,大莱
设计系统总览
¥327.40 K
最近项目
夏季新款蕾丝连衣裙 · 蓝色 / M
商家可能没有现成的商品图,需要新增一种「AI 生成」模式 —— 上传一张随手拍的原图,AI 生成 4 张满意的头图。
查看 Demo
本月营收较上月增长 33%,5 个项目处于"生成中"状态,2 个需要重新调整模特模板
生成中
Ctrl K · ESC · Enter · ⇧+Tab
[ 200 OK ] [ .MP4 · 9:16 ] [ /v2 ]
· · + · +XX+ +XXXX· +X·
// §2.7 · RADIUS
圆角阶梯
统一 8 px 作为默认主圆角。完全圆 999 px 仅用于 pill / dot。不确定就选 8 · >12 px 直接判错。
禁
禁用 V1
0 px
progress
2 px
kbd / badge
4 px
小色块
6 px
主默认
8 px ★
pill
pill / dot
999 px
// §2.8 · SPACING
间距阶梯
基础栅格 4 px。当不确定 padding 是 16 还是 24 时,选 24。当不确定 margin 是 48 还是 64 时,选 64。
常用阶梯
4
8
12
16
20
24 ★
32
40
48
64 ★
80
104
典型场景
| 场景 | 值 |
|---|---|
| Sidebar 宽度 | 248 px |
| Topbar 高度 | 64 px |
| Content padding | 48 · 28 · 72 |
| 卡片内 padding(大) | 28 · 30 或 24 · 28 |
| 列表行 padding | 14 · 18 ~ 20 · 24 |
| KPI cell padding | 24 · 28 |
| 主区块 margin | 64–104 px |
| 子区块 margin | 36–48 px |
| 卡片网格 gap | 14(子区)/ 24(主区) |
// §2.9 · SHADOW
阴影 · 只 3 个允许场景
主 CTA(4 层橙色发光)+ Toast/Dropdown 浮层(白色 6%)。其他场景一律禁阴影。
主 CTA · 4 层橙阴影
主 CTA · hover 抬升
Toast / Dropdown · 白阴影
// §2.10 · INSIDE-BORDER
边框策略 · inside-border
默认边框用 ::before 伪元素绘制(而非真 border),hover 时让 ::before 透明度 → 0,不触发布局抖动。hover 下面的卡看效果。
// 默认
// hover 我看
// hover 我看
// §3 · SKELETON
页面骨架(全站统一)
每个新页面都用同一套 HTML 骨架。shell.js 自动注入 sidebar + topbar,页面只写 <main> 内的 .content 内容。
HTML 模板
<link rel="stylesheet" href="assets/restraint.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700
&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<div class="app">
<aside class="sidebar"><!-- shell.js 注入 --></aside>
<main>
<div class="topbar"><!-- shell.js 注入:crumbs · right --></div>
<div class="content">
<div class="page-head">
<div>
<h1>商品库</h1>
<div class="sub"><span class="mono">// 12 个商品</span> · 描述</div>
</div>
<div class="actions">
<button class="btn">导入</button>
<button class="btn btn-primary">+ 新建商品</button>
</div>
</div>
<div class="section-h">
<h2>最近项目</h2>
<a class="more">[ ALL · 12 ] →</a>
</div>
<!-- 内容 -->
</div>
</main>
</div>
<script src="assets/shell.js" defer></script>
// §3.4 · SIGNATURE · CONTAINER GUTTER
主容器装订线
工作台 / 项目列表 / 商品库 / 流水线主区:左右两条 1 px 边线 + 4 角圆弧内凹 SVG 准星。Modal / 编辑器全屏画布不必加。
这块容器左右贯穿两条 1 px 边线,四角带圆弧内凹的 SVG 准星
// container-demo · max-width: 720 · border-x only
// container-demo · max-width: 720 · border-x only
// §4.12 · ICONS
Icon 系统
统一 SVG line icon · stroke 1.5 · linecap round · 颜色通过 currentColor 继承。禁用 emoji / filled icon。
尺寸阶梯 // 5 档
S · 14 px
M · 16 px ★
L · 20 px
XL · 24 px
Hero · 36 px
颜色场景 // 通过 currentColor 继承
默认 alpha-56
hover · 主前景
active · heat
在主 CTA 内
disabled
Icon Box // 快捷入口 / Modal 头部用
32×32 · 8 px 圆角 · --heat-12 底 · 16 px line icon
// §4.2 · PILLS
胶囊 · 严格 3 级分层
同级别尺寸必须完全一致。pill 永远是 999 px(完全圆),靠 dot 体现状态。
L1 · 大胶囊 // h:28 / fs:13 / dot:8 · 项目状态 / 列表行主标签
生成中
已完成
失败
已归档
L2 · 中胶囊 // h:22 / fs:11.5 / dot:6 ★ 默认
最常用尺寸。卡片内 / 表格内默认。
生成中
200 OK
超时
已归档
L3 · 小胶囊 // h:18 / fs:10.5 / dot:5 · KPI 角标
NEW
+33%
-1.2%
对比 // 同色 3 级并列
L1 · 生成中
L2 · 生成中
L3 · 生成中
// §4.3 · INPUTS
输入框 · 5 状态
高 36 px / 圆角 8 / inside-border。focused 时橙色 ring 内嵌 1 px,error 时红边 + 红软底。点击下面字段看真实 focus 反馈。
// default
// focused
// error
// disabled
带图标 / 搜索 // 含 Ctrl K 提示
Ctrl K
// 关键坑:左侧 icon 必须 z-index: 2(否则被 input 白底盖住)· Ctrl K 用纯文本不用 ⌘(JetBrains Mono 不带该字形)
// §4.4 · FORM CONTROLS
表单控件 · Checkbox / Radio / Switch
全部用真 SVG indicator,禁止 border-width / rotate(45deg) 凑对勾(在缩放/字体渲染下会变形)。点击下面控件试试。
Checkbox
Radio
Switch
// §4.5 · KPI STATS
KPI 统计行 · 4 格
1 行 4 格 grid · 共用一个 inside-border 容器 · 无 gap。列与列之间用 1 px 分隔线。
活跃项目
12
↑ 本月 +3
生成中RUN
5
资产总数
847
· MP4 · JPG · PNG
// §4.6 · PROGRESS · 5 段流水线专用
进度条段位
动 = 在运行,静 = 完成/失败。脉动只给"进行中"(橙)。已完成绿、失败红、未开始灰。
未开始
进行中(2/5)· 脉动
已完成
失败
// §4.7 · LIST ROW
列表行
grid: 56px 1fr auto auto auto · gap 22 · padding 20·24。hover 我看整行底色变化。
9:16
生成中
4:5
已完成
1:1
生成失败
// §4.8 · TABS
Tab · 双层结构
主 Tab 用下划线激活(2 px --heat 横线)。副 Tab 用灰度→彩色 icon 反馈。点击切换。
主 Tab
当前显示:全部
副 Tab · 灰度→彩色
// §4.10 · CARDS
卡片 / 快捷入口
所有卡片统一 8 px 圆角 · 1 px 边框 · 无阴影。快捷入口含 hover / active 状态。
快捷入口 // hover 我
// §4.10 · TIP
提示框
白底 · 1 px 虚线边框(dashed)· 8 px 圆角 · 加粗标题 + 正文。
小提示
使用 Ctrl K 快速搜索任意项目、商品或资产。Tab 切换不同维度,Enter 直达。
// §4.11 · MODAL
弹窗 Modal
居中 460–480 px · 4 角 SVG 准星 · 8 px 圆角 · backdrop-filter: blur(8px) · 弹性入场。点击下方按钮打开 · ESC / 点击遮罩关闭。
// §4.11 · TOAST
Toast 通知
右下角浮出 · 300ms 弹性入场 · 2400ms 自动消失。触发演示:
// §5 · MONO DECOR · 品牌签名
Mono 装饰元素
方括号标签 / 双斜杠注释 / 中点连接 —— 这些是流·Studio 独有的"调试视图感",Firecrawl 没有,绝对保留。
方括号标签
[ 200 OK ]
[ /v2 ]
[ .MP4 · 9:16 ]
[ STUDIO ]
[ ALL · 12 ] →
注释样式时间戳
// 05.14 · 周五 · 14:32
命令路径
/sidebar collapse · /toast dismiss · /modal open
数值后缀
¥327.40 K
// 主体大字 + 小字次级用 <small>
ASCII 散点(背景装饰)
· · +
· +XX+
+XXXX·
+X·
· +XX+
+XXXX·
+X·
强调单词上色
本月营收较上月增长 +33%,有 5 个项目处于"生成中"状态。其中 2 个需要重新调整模特模板。
// 关键名词加深一档(不变橙),橙色只留给 CTA
// §6 · LAYOUT MODES · 5 种
五种页面级布局模式
页面骨架统一,内容区布局按用途分 5 类。新页面归类后选对应模式。
A看板型 · Dashboard
KPI 行 + 多个 section + 列表行 / shortcut 网格。
[ stats.with-corners · KPI 4 列 ] [ section-h ] [ ░░ recent-row × N ░░ ] [ shortcut × N ] [ tip · 虚线提示 ]
代表页:index.html · projects.html(列表)· library.html
B列表 + 筛选型 · List + Filter
Toolbar(搜索 + chip 筛选 + 视图切换)+ 卡片网格 + 分页 + 批量栏。
[ toolbar: search-inline + chip-wrap × n + view-toggle ] sticky top [ result-meta · 共 N 条 ] [ ░░ 卡片网格 / 列表 ░░ ] [ pagination ] sticky bottom [ bulk-bar(选中后显示) ] 吸底浮动
代表页:products.html · projects.html · library.html · team.html
C编辑器型 · Editor / IDE
锁视口高度 · 多栏内部滚 · 大量页面级独有样式。⚠️ 这类定制最多 · 改之前先确认 restraint.css 没现成组件。
[ 左栏 · 资产/导航 sticky ] [ 中央 · 画布/参数 ] [ 右栏 · 预览/AI 助手 ] └───────── 整页 viewport 高度锁定 · 不滚 main ────────┘
代表页:pipeline.html · model-photo.html · image-optimize.html · studio.html
D表单 / 向导型 · Wizard / Form
左侧 sticky 步数条 + 右侧多 pane 同时显示(非 Tab 切换)。
[ .wizard ]
├─ .steps · 200 px sticky ← 左步数条
└─ .panes · 1fr ← 右滚
├─ .wiz-pane #step-1
├─ .wiz-pane #step-2
└─ .wiz-pane #step-3
代表页:projects-new.html · products.html drawer · account.html · settings.html
E单卡型 · Single Screen
不渲染 sidebar/topbar · 全屏灰底 + 中心白卡。
┌─────────────────┐
│ │
│ .input × N │
│ .btn-primary │
│ │
└─────────────────┘
代表页:login.html · register.html
// §7 · AUDIT · V2.1 落地待统一清单 ★
待统一清单
扫完 18 个 HTML 发现的偏离点。按影响视觉一致性程度排序。改页面时遇到这些点,顺手改正。
// 高优先级 · 影响视觉对齐
| # | 问题 | 现状 | 应改为 |
|---|---|---|---|
| 1 | 按钮等级混乱 ★ | 各页随意选 .btn / .btn-primary / .btn-ghost,部分页面 2 个一级橙并列,"取消"被做成主橙;尺寸也乱(38/32/44 混) | 按 §4.1 三级体系:一个区域只 1 个一级(主动作) · 二级(并列动作) · 三级(辅助) · 尺寸默认 36 / lg 40 / sm 28 |
| 2 | 输入框高度 | products 38 / projects search 32 / login 36 | 统一 36 |
| 3 | Tab 激活样式 | product-detail 下划线 / library 底色填充 | 统一下划线 + bottom 2 px heat |
| 4 | Hover 底色 | 多数 bg-lighter / 部分 black-alpha-4 | 统一 black-alpha-4 |
| 5 | 卡片标题字号 | projects 13.5 / products 14 | 统一 14 / 500 |
| 6 | 卡片网格列宽 | products 240 / library auto 180 / projects-new 4 列 | 商品 240 · 资产 180 · 通用 auto-fill 220 |
// 中优先级 · 语义偏离
| # | 问题 | 现状 | 应改为 |
|---|---|---|---|
| 7 | Pill 变体不全 | restraint.css 4 种 / library 用了 .pill.archive 没定义 | 补 .pill.archive(灰)/ .pill.warn(honey) |
| 8 | X 关闭按钮 | drawer 30 / modal 32 / toast 28 | 统一 32×32 / 8 px 圆角 |
| 9 | label 字重 | products 500 / product-detail 600 | 统一 500 |
| 10 | mono 装饰 | 部分页有 4 角 [ 200 OK ],部分没 | 主工作台型必有 · 编辑器型可省 |
| 11 | section-h 分隔 | 部分 border-bottom / 部分没 | 统一不用(留白即分隔) |
// 低优先级 · 架构清理
| # | 问题 | 现状 | 应改为 |
|---|---|---|---|
| 12 | 编辑器页 inline style 过大 | pipeline 795 / model-photo 1393 / platform-cover 1003 行 | 抽 .stepper / .shot-card 到 restraint.css 或 editor.css |
| 13 | 四角准星重复 SVG | 部分页定义自己的 SVG 背景 | 全部改用 .with-corners + .corner-tr/.corner-bl |
| 14 | 滚动条样式残留 | 部分页 inline scrollbar-width: thin | restraint.css 已全局隐藏 · 清理 inline |
| 15 | mono 字体里的中文 | 部分页直接写 font-family: monospace | 全部换 var(--font-mono) |
// §8 · GUARDRAILS
Don't List · 绝对禁止
任何 mockup / 代码 review 时,对照此清单。每一条违反都判错。
DO
用 8 px 统一圆角 + 准星 + 装订线 + mono 装饰做"图纸感"
DON'T
用 0 px 硬切角的卡片 —— V1 的做法,V2 起判错
DO
橙色 hover 用
--heat-90 等 alpha 阶梯
DON'T
hover 时切换到更深的橙 hex(如 #D04E1F)
DO
主 CTA 用多层橙色阴影(4 层)制造发光感
DON'T
用灰色阴影 / 文字阴影 / 通用 box-shadow 装饰
×渐变背景 · 只有 hero 区可考虑,首选纯色。绝禁多色渐变。
×玻璃拟态 ·
backdrop-filter 只用于 modal 遮罩×彩色 emoji / filled icon · 一律 SVG line(stroke 1.5)
×多 accent 色 · 全场只有橙色一个 accent
×大圆角容器(>12 px) · 直接判错
×真 border + hover 边框消失 · 用 inside-border ::before
×荧光鲜艳状态色 · 避免霓虹绿、电光蓝、霓虹粉
×居中对齐大段正文 · 全部左对齐
×装饰当主角 · 场记板 / 丝绒 / 霓虹灯都不要
×无意义微动效 · hover 旋转、缩放、彩虹流光,禁
×同一行混用直角和圆角 · 用户原话:"不要有些是直角,胶囊又是圆角"
×页面 inline style 重写共享类 · 要变体先改 restraint.css
×新建色值 · 必须复用现有 token
×⌘ Unicode 字符 · JetBrains Mono 不带该字形 · 用 "Ctrl K" 纯文本
// §9 · CHECKLIST
新页面 / 改页面 checklist
每次开工前过一遍。3 个阶段都不能跳。
// STAGE 01写代码前
- 已 Read [电商AI平台/design.md](design.md) §1 §3 §8(至少)
- 用 Grep 查 restraint.css 是否已有该组件
- 看本 design-system.html 找视觉参考
- 不确定的设计点 → 先问用户,不要凭感觉
// STAGE 02写代码时
- HTML 用
app > sidebar + main > topbar + content骨架 - head 含
assets/restraint.css+ Inter + JetBrains Mono - body 末尾
assets/shell.js - 标题区用
.page-head > h1 + .sub - 主操作按钮放
.page-head > .actions(自动 40 px 高) - 子区块用
.section-h > h2 + .more - 按钮全
.btn系列 · 不要自己写 - 状态徽标全
.pill.info/.ok/.err/.neutral - 输入框全
.input / .select / .textarea· 字段用.field - 浮层全用现成 Modal / Drawer / Toast
- 图标 SVG line · stroke 1.5 · linecap round ·
stroke="currentColor" - 时间戳 mono 注释
// 05.22 · 周四 - 强调单词加深(不变橙)
<b style="color:var(--accent-black)">3 个</b> - 数字加
.num或tabular-nums - 状态色按语义选
--heat / --accent-forest / --accent-crimson / --accent-honey
// STAGE 03写完自检
- 对照 §8 Don't List 逐条过
- 浏览器打开页面 · 截图 + 跟本 design-system.html 对比
- 测 hover / focus / active / disabled 状态都正确
- 测 dark mode(给 body 加
.darkclass 看是否破) - 移动端缩到 1100 px 以下看响应式
- 不在 master/main 上,在 dev 分支
- 不带
--no-verify,不跳过 hook