TbusOS Atelier Design — 应用界面风格
生成暖色渐变壁纸上浮着一整块磨砂玻璃的产品界面:侧栏、KPI 行、图表、筛选面板、记录表、预订流、设置表单、登录页。这是本仓 9 个设计 skill 里唯一画应用界面的一个——其余 8 个画的都是页面(落地 / 定价 / 文档 / deck / 发布会)。
Generates warm-gradient product UI: one frosted application shell floating on a peach-and-rose wallpaper, with gradient orb icons, round-cap bar charts over neutral tracks, and exactly one near-black anchor card per screen. The only skill in this repo that draws applications rather than documents — and the only one whose JavaScript is half the deliverable.
§1 使用方式
- 引入
assets/fonts.css+assets/atelier.css+assets/atelier.js(<script src>放</body>前)。 - 页面骨架:
<html data-theme="light">→.atl-wall(壁纸层,必须有)→.atl-page→.atl-app(整块玻璃)→.atl-rail+.atl-main。 无侧栏的屏幕用.atl-app--full。 - 组件用
atl-前缀;页面局部样式用无前缀 class 写在页内<style>(verify.py 只校验atl-*是否定义于 CSS)。 - 交互全部属性驱动,页面不写一行 atelier JS:
data-route/data-tab/data-seg-group/data-accordion/data-expand/data-switch/data-sort/data-count-to/data-grow/data-reveal/data-lang-toggle/data-theme-toggle。 - 先读
references/atelier-material.md(材质配方)和references/dos-and-donts.md(品位边界),再复制 canonical 起步。
§2 触发关键词
atelier 风格 / 仪表盘 / dashboard / 控制台 / 后台 / admin panel / SaaS 界面 / 应用界面 / app UI / 产品界面 / 预订流 / booking / 搜索结果 / 设置页 / settings / 登录页 / sign in / 暖色玻璃 / 桃色渐变 / 珊瑚渐变 / Dribbble 风仪表盘
§3 不要用于
| 场景 | 用哪个 |
|---|---|
| 深藏青 aurora 玻璃的展示页 | glass(同为玻璃,但暗底 + cyan + 光晕;atelier 是亮底暖色 + 应用界面) |
| 营销落地页 / 定价页 / 长文档站 | anthropic · apple · sage · ember |
| 产品发布会 / keynote | eclat |
| 会议室商务汇报 deck | lectern |
| 打印物 / PDF 导出 | 任何非玻璃 skill——backdrop-filter 不进打印管线 |
| 政府 / 法律 / 医疗等严肃可信内容 | lectern 或 apple(渐变圆球读作"消费级 SaaS") |
§4 阅读顺序
references/atelier-material.md— 壁纸 + 三层玻璃 + 渐变圆球(skill 的物理学)references/dos-and-donts.md— 品位边界(暖玻璃 ≠ 通用后台模板的那条线)references/design-tokens.md— 双主题 token 全表references/app-shell.md— 外壳 / 侧栏 / 路由 / 面板(应用界面独有,其余 7 个 skill 没有)references/components.md— 组件清单 + 每个组件的硬规矩references/data-display.md— 图表配方(一条渐变 + 中性轨道)references/typography.md— Plus Jakarta Sans 字号表 + 中文字体栈references/motion.md— 交互契约 + 冻结契约(截图检查依赖)references/diagram-craft.md— SVG 图示工艺references/canonical/— 6 个页型的 canonical html + md 成对读 (dashboard / booking / detail / settings / signin / console —— console 是以图为主体的那一屏)templates/diagrams/— 界面内图示片段(服务拓扑 / 流水线状态)。是.html不是.svg: 这类图的一半是面板壳和交互接线,单独一个 svg 文件装不下。画法见references/diagram-craft.md§7 —— 编辑类工程图(位域 / SoC 框图 / 时序)不进 atelier,那是文档页的活
§5 发布前检查(MUST)
bin/design-review --skill=atelier <你的页面>.html # 四道检查
bin/design-review --skill=atelier --pixel <你的页面>.html # 再加像素回归
四道检查必须全绿:verify.py(结构)· visual-audit.mjs(渲染 + 品牌 + 串味)·
axe-audit.mjs(可达性 · axe-core)· 截图。
可选的第五道 pixel-gate.mjs 比对已提交的像素基线 —— 它是唯一能抓住"没有任何规则描述过"
的改动的那一道(卡片位移、颜色漂移、字体回落)。
截图必须人眼看过——本 skill 建成当天,机械检查放过了三个只有人眼能发现的问题:
KPI 标签和数字挤成一行、时间轴圆点被压成竖条、暗面板上的 .atl-muted 几乎不可见。
机械检查是必要条件,不是充分条件。
atelier 目前 8/8 页 axe 零 violation(6 canonical + 2 demo),这是验收线。
§6 三条不可让步的规矩
- 渐变永远不承载文字。 白字压在珊瑚端
#F5854F上只有 2.5:1,压在玫红端只有 3.8:1。 实心按钮用--atl-accent-ink(#B83370,白字 5.6:1)或默认的近黑.atl-btn。 渐变只出现在:圆球、柱子、进度条、品牌标记。 - 玻璃是外壳,不透明度是数据。 外壳 0.32 → 数据卡 0.80 → 表格卡 0.94。 任何承载数字的表面都往不透明走。数字压在会动的渐变上,读者要读两遍。
- 每屏只有一张暗卡。 亮底页面上暗卡是视线落点;两张就没有落点了。 暗色主题下它翻成奶油色——这一笔是"一张卡打断明暗节奏",不是"一张卡是黑的"。
§7 数据纪律(与其他 skill 不同的地方)
应用界面天生要显示数据,而 canonical 页不能显示查不到来源的数据。本 skill 的解法:
- 终值写在 markup 里,
data-count-to/data-grow只做动画。JS 永远不发明数字。 - 分段控件、筛选框、滑块是装饰:切"近一年"不会改写数字。切换即改数 = 编数据。
- 反常的数字必须当场解释(6 月 31% 是因为评估周期错过校准窗口;2 次中转更贵是因为要分开出票)。 一个不解释自己的异常值,会被读成 bug。
§8 来源
风格重建自 Ghani Pradita(印尼日惹 · Paperpillar)的仪表盘作品。 没有照抄任何一稿:配色、排版、组件、文案、数据全部重写,只借了这套语言的语法—— 暖 mesh 壁纸 / 整窗磨砂 / 渐变圆球 / 灰轨道圆头柱 / 一张暗卡。 他的底子是渐变图标集与 3D 插画,这解释了为什么图标是实心渐变球而不是线性图标—— 线性图标配细圆环是通用后台模板的标志,复刻错这一笔,出来的就是"另一个 admin 模板"。