// V2.1 · INTERACTIVE · 2026-05-22

# Airshelf 设计系统

本页是 `design.md` 的可视化样板间。所有 token / 组件均来自 `assets/restraint.css` —— 看到的就是页面用的。点击色块复制 token,hover / 点击组件看真实交互反馈。

[ Restraint · V2.1 ] · // 基于 design.md 整合定稿
// §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 档 · 冷灰无色相

--background-base
#f9f9f9 · 页面底 ★
copied
--background-lighter
#fbfbfb · 容器底
copied
--surface
#ffffff · 卡片 ★
copied
--surface-raised
#ffffff · Modal
copied

### 边框 // 3 档 · 差距极小靠语义

3 档相差只 1–2 色阶,肉眼几乎看不出。用语义,不用视觉对比 —— 80% 场景用 `--border-faint`。

--border-faint
#ededed · 默认 ★ 80%
copied
--border-muted
#e8e8e8 · 略深
copied
--border-loud
#e6e6e6 · 强分隔
copied

### 主橙 Heat // 单 hue #fa5d19 + 8 档 alpha

全靠 alpha 叠加,绝不换 hue。hover 不切换深橙,而是用 90% / 16% 这些档位组合。

--heat
100% · CTA ★
copied
--heat-90
90% · hover
copied
--heat-40
40% · ring / edge
copied
--heat-20
20% · pill border / selection
copied
--heat-16
16% · hover bg
copied
--heat-12
12% · tint bg ★
copied
--heat-8
8%
copied
--heat-4
4% · 极弱
copied

### Accent 多彩点 // 5 色信号 · 限定语义场景

只用于语义信号(代码高亮 / info / 状态色),禁止做大面积装饰 —— 全场依然只有橙色一个 accent。

--accent-black
#262626 · 主前景 ★
copied
--accent-white
#ffffff · 反色文字
copied
--accent-amethyst
#9061ff · 紫 / code
copied
--accent-bluetron
#2a6dfb · 蓝 / info
copied
--accent-crimson
#eb3424 · 红 / error ★
copied
--accent-forest
#42c366 · 绿 / success ★
copied
--accent-honey
#ecb730 · 黄 / warning
copied

### 状态色配套(底 / 边) // 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,...)`(避免叠出"灰中带蓝")。

--black-alpha-1
1%
copied
--black-alpha-2
2%
copied
--black-alpha-3
3%
copied
--black-alpha-4
4% · hover bg ★
copied
--black-alpha-5
5% · disabled bg
copied
--black-alpha-7
7% · active bg ★
copied
--black-alpha-8
8% · prog 未开始
copied
--black-alpha-12
12% · inside-border ★
copied
--black-alpha-24
24% · input hover
copied
--black-alpha-32
32% · base 切换 →
copied
--black-alpha-48
48% · 占位字色 ★
copied
--black-alpha-56
56% · 次级文字 ★
copied
--black-alpha-64
64% · 描述
copied
--black-alpha-72
72%
copied
--black-alpha-88
88% · 近主前景
copied
// §2.5 · TYPE · MIXED STRATEGY

## 字体系统 · 中英协作

`Inter`(英文/数字)+ `Alibaba PuHuiTi`(中文)+ `Inter`(装饰)。浏览器按字符级 fallthrough,不需要 JS,中英自然分工。

### 字体族原理 // browser-level character fallthrough

// 01 · ENGLISH
Inter
The quick brown fox jumps. 0123456789 — Vercel / Linear / Stripe 御用,屏幕 UI 优化。
// 02 · 中文
阿里普惠体
为中英混排专门设计的笔画粗细配比,与 Inter 视觉重量贴近。
// 03 · 装饰 MONO
Inter
[ 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
Airshelf · Aa Bb 123
// MEDIUM · 500 ★ 默认
Airshelf · Aa Bb 123
// SEMIBOLD · 600
Airshelf · Aa Bb 123
// BOLD · 700 · 限徽标
Airshelf · Aa Bb 123

// Bold 700 仅用于 Ctrl K 这种纯英文徽标场景 · 正文严禁 700(中英字重错位会暴露)

// §2.6 · TYPE SCALE

## 字号 / 字重 / 行高(11 档)

数值类必须加 `tabular-nums` 或 `.num`。中文正文行高 1.65–1.8。

H1 / Hero36 / 500 / -0.024em / 1.2
早上好,大莱
区块 H228 / 500 / -0.02em / 1.25
设计系统总览
KPI 数值32 / 500 / -0.02em / tabular-nums
¥327.40 K
子区 H316 / 500 / -0.01em / 1.4
最近项目
卡片标题14 / 500 / normal / 1.4
夏季新款蕾丝连衣裙 · 蓝色 / M
正文 body14 / 400 / normal / 1.65
商家可能没有现成的商品图,需要新增一种「AI 生成」模式 —— 上传一张随手拍的原图,AI 生成 4 张满意的头图。
Label · 按钮 / Tab13 / 500 / normal
查看 Demo
描述次级13 / 400 / black-alpha-64 / 1.8
本月营收较上月增长 33%,5 个项目处于"生成中"状态,2 个需要重新调整模特模板
Pill 文字11.5 / 500 / normal
生成中
Inter Bold 徽标11.5 / 700 / Inter only
Ctrl K · ESC · Enter · ⇧+Tab
Mono 标签11 / 400 / 0.04em · Inter
[ 200 OK ] [ .MP4 · 9:16 ] [ /v2 ]
Mono 散点装饰8.5 / 400 / 0.04em
· · + · +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&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
// §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.1 · BUTTONS · 三级体系(按功能重要性)

## 按钮 · 按功能重要性分 3 级

视觉强度 = 操作重要程度。一个区域只能有一个一级按钮(像航海图上只能有一个北极星)。视觉等级混乱比按钮不好看更致命。

### 三级体系总览 // 视觉 / 语义 / 数量约束

等级 | 类名 | 视觉 | 语义 | 数量约束
--- | --- | --- | --- | ---
L1 | .btn.btn-primary | 橙底 + 4 层橙阴影 + 字重 600 | 页面/弹窗最重要动作 · 主动作 | 一个区域只 1 个 ★
L2 | .btn | 白底 + inside-border + 主前景字 | 跟主操作并列的重要动作 | 可多个
L3 | .btn.btn-ghost | 透明底 + 无框 + alpha-56 字 | 辅助 / 链接式弱化操作 | 不限

### 选谁?决策表 // 操作类型 → 等级

操作类型 | 等级 | 例子
--- | --- | ---
提交 / 确认 / 创建 / 下一步 / 保存 / 生成 | L1 一级 | 创建商品 · 确认删除 · 开始生成
取消 / 重置 / 导出 / 导入 / 上一步 / 关闭 | L2 二级 | 取消 · 重置 · 导出 CSV
跳过 / 了解更多 / 查看详情 / 行内动作 | L3 三级 | 跳过 · 了解更多 → · [查看] [编辑] [删除] 行内
破坏性(删除 / 危险) | L1 in Modal | 列表里的"删除"用二级 → 弹 modal,modal 里的"确认删除"才是一级

### 一级按钮 · Primary // .btn-primary · 一个区域只 1 个

语义:用户在当前页面/弹窗最希望完成的那一个动作。视觉上需要"被看到"。

// default
// hover
// active
// focused
// disabled

### 二级按钮 · Secondary // .btn · 并列动作 · 可多个

语义:跟主操作并列出现的动作,但不是首要焦点 —— 取消、重置、导出、上一步、关闭。

// default
// hover
// active
// focused
// disabled

### 三级按钮 · Tertiary // .btn-ghost · 弱化辅助 · 不限

语义:视觉降级的辅助动作 —— 跳过、了解更多、行内 [查看]/[编辑]/[删除]。不抢夺主流程注意力。

// default
// hover
// active
// disabled

### 典型组合 // 一个区域如何摆放 4 种场景

// 1 · page-head 标题区 · 模式 `[L2] + [L1]`

商品库
// 12 个商品 · 你的所有商品和卖点

// 2 · Modal 底栏 · 模式 `[L2 取消] + [L1 确认]` · 主操作永远在右

// 3 · 卡片 / 列表行内 · 模式 `[L3] × N` · 弱化避免抢戏

夏季新款蕾丝连衣裙
// 05.14 · 蓝色 / M

// 4 · 表单 / 向导底部 · 模式 `[L3] + spacer + [L2] + [L1]`

### 尺寸阶梯 // 独立于等级 · 按上下文密度选

尺寸跟等级正交 — 一级可以是 sm/默认/lg,二级三级同理。按上下文密度选尺寸。

// sm 用于:行内/列表行末/表格内/紧凑工具栏 · lg 用于:hero CTA / page-head 主操作(已全局覆盖)

### 常见错误 // Do / Don't 对照

DON'T
一个区域两个一级橙按钮并列 — 用户视线分散,不知道该点哪个
DO
[二级] + [一级] · 永远只有一个真正的主动作
DON'T
"取消"做成橙色 primary — 取消是退出动作,不应该是焦点
DO
"取消" 永远是二级 .btn,放在主操作的左边
DON'T
重要操作用 ghost 三级 — 弱化了主流程,用户找不到入口
DO
按重要性分级:主动作橙 · 次重要白 · 弱化 ghost
DON'T
三级按钮 inline 加边框 — 加了边框就退化成二级了
DO
三级保持 ghost 无框,只 hover 时出 4% 浅底
DON'T
页面 inline 改 .btn 高度/字号 — 用 .btn-sm / .btn-lg,不要 inline
DO
需要新尺寸 → 先回 restraint.css 加,不污染页面 inline
// §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 用纯文本不用 ⌘(Inter 不带该字形)

// §4.4 · FORM CONTROLS

## 表单控件 · Checkbox / Radio / Switch

全部用真 SVG indicator,禁止 border-width / rotate(45deg) 凑对勾(在缩放/字体渲染下会变形)。点击下面控件试试。

### Checkbox

未选中 已选中 半选中 Disabled

### Radio

选项 A 选项 B(已选) 选项 C Disabled

### Switch

关 开 Disabled
// §4.5 · KPI STATS

## KPI 统计行 · 4 格

1 行 4 格 grid · 共用一个 inside-border 容器 · 无 gap。列与列之间用 1 px 分隔线。

本月营收+33%
¥327.40 K
↑ 较上月 +33%
活跃项目
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
夏季新款蕾丝连衣裙
// 创建于 05.14 · 蓝色 / M
生成中
4:5
秋季风衣 · 卡其色
// 创建于 05.12 · M / L
已完成
1:1
运动 T 恤 · 黑白款
// 创建于 05.10 · 全色系
生成失败
// §4.8 · TABS

## Tab · 双层结构

主 Tab 用下划线激活(2 px `--heat` 横线)。副 Tab 用灰度→彩色 icon 反馈。点击切换。

### 主 Tab

当前显示:全部

### 副 Tab · 灰度→彩色

// §4.10 · CARDS

## 卡片 / 快捷入口

所有卡片统一 `8 px 圆角 · 1 px 边框 · 无阴影`。快捷入口含 hover / active 状态。

### 快捷入口 // hover 我

新建商品
// AI 生成 / 上传图
短视频工坊
// 9:16 · MP4
投放话术库
// /v2 · 模板
// §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 自动消失。触发演示:

// §4.13 · CHAT · AI 对话面板

## AI 对话面板

编辑器型页面专用(AI 图片创作 / 流水线 AI 助手 / 商品 AI 优化 / 镜头脚本)。3 个编辑器页定义一致,已成事实组件 — 应抽到 restraint.css。

### 完整对话面板 // .chat-pane · 试在输入框打字看 focus 反馈

AI 助手 // chat /v2
你好,我可以帮你优化这张图。试试告诉我:换背景、调光线、加文字 等。
// 14:30
把背景换成咖啡厅,加暖色光线
// 14:32
收到,正在生成 4 个候选...

### 消息气泡规则 // .msg.ai vs .msg.user

类型 | 对齐 | 气泡背景 | 气泡边框
--- | --- | --- | ---
`.msg.ai` | 左对齐(默认) | `--surface` 白 | `--border-faint`
`.msg.user` | 右对齐(`flex-end`) | `--heat-12` 浅橙 | `--heat-20`

// 所有气泡共享:max-width 90% / padding 10·14 / font 13 / line-height 1.6 / radius 8 · 时间戳放气泡下用 mono 11px / alpha-48

### 打字指示器 // .ai-thinking · 1.2s 交替闪烁

AI 正在思考
// §4.14 · CARD SYSTEM · 商品 / 资产卡片三种形态

## 商品 / 资产卡片体系

商品 + 资产 + 人物 + 场景共用一套卡片体系。按"使用场景"选形态,不要为每种内容类型做新类。

### 三种形态对照 // 选谁?看场景

形态 | 类名 | 缩图比 | 缩图宽度 | 使用场景
--- | --- | --- | --- | ---
网格主卡 | .product-card | 1.4:1 / 1:1 / 3:4 | 自适应宽 | 商品库 / 资产库 / 主网格
行卡(列表) | .prod-row / .mp-prod-item | 1:1 | 28–36 px | 表单已选行 / 侧栏列表
选择器卡 | .pl-card / .opt-card | 1:1 或 3:4 | 100–160 px | Modal 内多选 picker

### 形态 1 · 网格主卡 // .product-card · 主网格用

9:16
夏季新款蕾丝连衣裙
// 女装 · 蓝色
9:16
秋季风衣 · 卡其色
// 女装 · M / L
9:16
运动 T 恤 · 黑白款
// 男女同款

// 缩图比例按内容类型选 · 商品 1.4:1(.product-thumb 默认)· 资产 1:1(加 .r-square)· 人物 3:4(加 .r-portrait)

### 形态 2 · 行卡 // .prod-row · 表单 / 侧栏用

9:16
夏季新款蕾丝连衣裙
4:5
秋季风衣 · 卡其色

// hover 右侧 X 变红 · 用于"已选商品"列表 / 流水线 stage 选中态

### 形态 3 · 选择器卡 // .pl-card · Modal 多选 picker · 点击切换 selected

1:1
商品 A
1:1
商品 B(已选)
1:1
商品 C(已选)
1:1
商品 D
1:1
商品 E

// 3 种状态:默认浅灰 / hover 变白 / selected 橙边 + 浅橙底 + 右上勾

// §4.15 · MODEL CARD · 人物 / 演员 / 模特卡

## 人物 / 演员 / 模特卡

选择器卡的"人物 3:4 竖图"特例。复用 .pl-card 的选中态逻辑,只换缩图比例为 3:4。点击切换:

3:4
林夏 · 25 岁
// 165cm · 都市风
3:4
陈宇 · 28 岁(已选)
// 178cm · 商务休闲
3:4
王悦 · 22 岁
// 168cm · 学院风
3:4
张涛 · 30 岁
// 180cm · 运动型

// 跟 .pl-card 同基础 · 只是 .m-thumb 用 aspect-ratio: 3/4(人物竖图标准) · 多了 .m-meta 行

// §4.16 · SCENE CARD · 场景卡(复用 asset-card-2)

## 场景 / 通用资产卡

场景卡 = 资产卡的"1:1 通用"形态。不要做新类,派生类(`.scene-card / .person-card / .background-card`)只语义命名,样式继承 `.asset-card-2`。

1:1
咖啡厅 · 暖光
// indoor · warm
1:1
街头 · 黄昏
// outdoor · sunset
1:1
极简白底
// studio · pure
1:1
海滩 · 蓝调
// outdoor · cool

// hover 边变橙 + 浅阴影 · 通常宽 240px(可放在 flex 横滑容器里) · 同样 class 也用于素材库 / 人物库 通用卡

// §4.17 · FREQUENT · 其他高频复用组件

## 其他高频复用组件

以下组件已在 2–5 个页面重复定义,需要尽快抽到 restraint.css。在此先做规范展示。

### §4.17.1 流程步骤条 // .stepper · 大尺寸主流程

1商品
2故事板
3镜头
4生成
5投放

// 已完成:黑底白字 · 进行中:橙底白字 + 600 字重 · 未开始:白底灰字 · 与 .prog 区别:.prog 是小徽标横在卡片角,.stepper 是大尺寸主流程

### §4.17.2 分页 // .pagination · sticky bottom

共 247 条
跳至 页

// 激活页用橙底白字 600 · 页码按钮 30×30 / 4 px 圆角(密集场景小圆角不破节奏)

### §4.17.3 视图切换 // .view-toggle · 模式切换组

// 当前 grid 视图 · 点击切换
DO
激活态用 `--accent-black` 黑底白字 · 模式开关不抢主橙的舞台
DON'T
用橙底 — 视图切换不是 CTA,用了橙就跟主操作按钮抢戏

### §4.17.4 操作型胶囊 // .pill-tip · 可点击的链接式 CTA

// hover 时 bg → 橙 / 字 → 白 + shadow-cta · 与 .pill.info(静态状态徽标)区别:.pill-tip 是可点击操作

### §4.17.5 卖点 / 编辑式列表 // .bullet-list · 表单常用

- 1 100% 棉麻 · 透气吸汗
- 2 独家设计 · 限量 200 件
- 3 隐形拉链 · 显瘦剪裁
- +

// 序号 .num 22×22 mono 700 字色 heat · 最后一行 .bl-add 用 dashed 虚线区别于已添加项 · hover 时删除按钮显示

// §4.18 · GEN CARD · AI 生成结果卡

## AI 生成结果卡

用于"输入提示词 → 多候选输出"场景(AI 图片 / 视频创作 · 模板生成 · 批量预览)。三个可变接口:① 图片比例 ② 悬浮按钮 ③ 底部按钮,其他全部复用。

### 完整示例 // hover 图片看右上浮层 · 点击图片看中央反馈 toast

一只穿着宇航服的橘猫,漂浮在霓虹色星云中,赛博朋克风
Airshelf v2 | 1:1 | 1K · 2 天前
1:1 · #1
已添加到剪贴板
1:1 · #2
已添加到剪贴板
1:1 · #3
已添加到剪贴板
1:1 · #4
已添加到剪贴板

### 变体 · 9:16 竖图 / 2 列 // --ratio: 9/16 --cols: 2

东方美人 · 古典园林背景 · 短视频 9:16
Airshelf v2 | 9:16 | 2K · 刚刚
9:16 · #1
已收藏
9:16 · #2
已收藏

// 切换 --ratio 和 --cols 即可适配视频 9:16 / 横屏 16:9 / 海报 4:5 / 头像 1:1 · 悬浮按钮和底部按钮按业务定制

### 三个可变接口对照 // 决策表

维度 | 怎么变 | 典型场景
--- | --- | ---
① 图片比例 | style="--ratio: 9/16; --cols: 2" | 1:1 头像 · 9:16 短视频 · 16:9 横屏 · 4:5 海报
② 悬浮按钮 | .gen-image-actions 内放 1–4 个 .gen-img-btn | 重新生成 · 下载 · 收藏 · 分享 · 用作参考 · 更多 ···
③ 底部按钮 | .gen-card-actions 内放 .btn-sm | 重新编辑 · 再次生成 · 编辑分镜 · 导出 · 更多 ···

### Don't // 常见错误

×悬浮按钮放图片底部 · 永远放右上(避免遮挡图片主体)
×用全局 toast 通知"已复制" · 用本组件内的 .gen-image-feedback(就地反馈,用户不必转头看屏幕角落)
×把 prompt 文字截断省略 · 完整显示 — 它就是用户的输入,要看清
×底部按钮做成主橙 primary · 抢了 prompt 视觉重心,用二级 .btn 即可
×给每个图片单独写卡样式 · 用 .gen-image 通用 · 比例靠 --ratio CSS 变量切换
// §5 · MONO DECOR · 品牌签名

## Mono 装饰元素

方括号标签 / 双斜杠注释 / 中点连接 —— 这些是Airshelf 独有的"调试视图感",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·

### 强调单词上色

本月营收较上月增长 +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 · platform-cover.html · image-optimize.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 字符 · Inter 不带该字形 · 用 "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
- 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 加 `.dark` class 看是否破)
- 移动端缩到 1100 px 以下看响应式
- 不在 master/main 上,在 dev 分支
- 不带 `--no-verify`,不跳过 hook

确认删除此商品?// /products/dlt · IRREVERSIBLE
该操作不可撤销。商品「夏季新款蕾丝连衣裙」及其关联的 4 张候选图、2 段短视频将一并删除。