sintbot 1.3.0 → 1.4.1

package/assets/design-styles/riso-print.md

@@ -0,0 +1,116 @@
+---
+name: 复古印刷
+description: Riso 孔版双色印刷——真实油墨色、网点纹理、轻微套印错位,独立 zine 的粗粝浪漫
+name_en: "Riso Print"
+description_en: "Two-color Risograph printing: real ink colors, halftone texture and slight misregistration. The rough romance of an indie zine."
+suits: "生图插画 · 活动推广"
+colors:
+  paper: "#F3EEE2"
+  ink-blue: "#0078BF"
+  ink-pink: "#FF48B0"
+  ink-orange: "#FF6C2F"
+  ink-black: "#1A1A1A"
+fonts:
+  cjk: sans
+typography:
+  headline:
+    latin: "'Cooper Hewitt', 'GT Pressura'"
+    fontSize: "44px"
+    fontWeight: 700
+  body:
+    fontSize: "16px"
+    lineHeight: 1.55
+    measure: "56ch"
+    fontWeight: 400
+  mono:
+    latin: "'IBM Plex Mono'"
+    fontWeight: 400
+border:
+  width: "0px"
+  style: solid
+  emphasis: "0px"
+rounded:
+  none: 0px
+spacing:
+  unit: 8px
+omitted: ["Components"]
+imagery:
+  ratio: "1:1"
+  treatment: halftone
+  crop: hard
+icon:
+  style: solid
+  strokeWidth: "2px"
+  linecap: butt
+  corner: sharp
+---
+
+## Overview
+
+参照物:80 年代大学讲义的油印质感、独立出版 zine、日本 riso 工作室的双色海报。
+Riso 的美学全部来自限制:一次只印一色、油墨半透明、套印会错位、实色会有网点。
+选两个油墨色,把这些「缺陷」当作语言,粗粝但被精心控制。
+
+## Colors
+
+- **paper (#F3EEE2)**:再生纸的米黄底。
+- 油墨四选二:**ink-blue (#0078BF)**、**ink-pink (#FF48B0)**、**ink-orange (#FF6C2F)**、**ink-black (#1A1A1A)**——蓝/粉/橙是真实 riso 油墨的标准色号,别自调;黑刻意用近黑(纯黑在纸上并不存在)。
+- 双色叠印出第三色(蓝×粉=深紫调),是免费的丰富度;大面积实色要带网点感(50-80% 网点)。
+- 一图恒定两油墨 + 纸色,没有例外。
+
+## Typography
+
+- 粗壮的印刷感无衬线(拉丁 Cooper Hewitt/GT Pressura 一路,中文系统黑体 Bold:苹方 / 微软雅黑,思源黑体兜底);等宽字体做编号、日期等「档案感」信息;中文没有等宽族,夹在里面的汉字兜到系统黑体。
+- 文字直接用油墨色印,大标题可做 1-2px 的套印错位(两色版本轻微offset)。
+
+## Layout
+
+- 版面像印刷品不像屏幕:通栏大标题、粗规矩的分栏、页码页眉一应俱全。
+- 图像处理成单色网点版(halftone)再套油墨色;照片不以全彩出现。
+- 大色块 + 反白字是 riso 的强项,敢用。
+
+## Elevation & Depth
+
+孔版印刷是单层纸,**物理上不存在深度**。层级全部由工艺提供,三样:
+
+1. **叠印**:两个油墨色的重叠区自然生成第三色(蓝 × 粉 = 深紫调)。重叠区是画面上最「重」
+   的地方——主体压在哪里,哪里就是视觉中心。
+2. **网点密度**:这是它的明度台阶。**80% 网点比 50% 重**;同一个油墨色靠 30 / 50 / 80 三档网点
+   就能拉出三个层级,不用另调颜色。
+3. **纸色留白**:未上墨的 paper `#F3EEE2` 恒为最底层,也是唯一的「后退」手段。
+
+Don't:任何 box-shadow(油印做不出投影,加了立刻变数字味);用半透明模拟层次
+(油墨是**叠印**不是混色,半透明会出中间灰,而 riso 没有灰)。
+
+## Shapes
+
+形状语言 = **制版印得出来的东西**:实心块、粗线、网点面。
+
+- **圆角恒 0**(`rounded.none`);`border.width: 0` 是认真的——这个风格**不描边**,
+  形状靠色块自身的边界成立。
+- **线条**:最细 2px(1px 线在油印上会断),端点 butt、直角相交;**不用虚线**
+  (虚线遇上套印错位会碎成乱点)。
+- **边缘允许 1-2px 的套印错位**,这是形状语言的一部分,不是瑕疵——但整张图错位方向要一致。
+- **允许的形状**:矩形、正圆、粗箭头、网点密度渐变带。不用细腻曲线与小圆角,制版分辨率吃不下。
+- **图标**:跟着制版走——**实心块造形**,不描细边;非画线不可时最细 2px、端点 butt、直角相交。
+  线描图标印不出来:1px 的边在纸上会断,套印一错位就碎。
+
+## Do's and Don'ts
+
+- Don't:超过两个油墨色;渐变(riso 的「渐变」只能是网点密度渐变)。
+- Don't:假做旧滤镜(划痕、咖啡渍、揉纸效果)——riso 的旧来自工艺,不来自贴图。
+- Don't:光滑的数字纯色平涂;实色区域必须有油墨的不均匀与网点。
+- Don't:细字重(300 以下)——油印糊掉细节,细字是工艺不允许的。
+- Do:套印错位控制在「刚能察觉」的程度(1-2px),错太多是印坏了。
+- Do:利用叠印色做层次:两色 + 叠印色 + 纸色 = 四个层级,够用。
+
+## Composition
+
+- 海报:一个网点化的大图像主体 + 通栏粗标题 + 档案感小字(编号/日期),像一页被认真印出来的 zine。
+- 图解:粗线条图形 + 网点填充,标注用等宽字体。
+
+## Image Prompt Templates
+
+- base: "risograph print poster, two-ink design in riso blue (#0078BF) and fluorescent pink (#FF48B0) on off-white recycled paper (#F3EEE2), visible halftone dots, slight registration misalignment, ink overprint creating a third color, bold chunky sans-serif typography, grainy ink texture, independent zine aesthetic, 1980s duplicator print"
+- negative: "full color photo, smooth digital flat color, gradient, fake vintage scratches and coffee stains, thin delicate typography, glossy, 3D"
+- 注:换油墨组合时同步改 base 里的两个色名与 hex;两色纪律写死在描述里("exactly two ink colors")。

package/assets/design-styles/soft-friendly.md

@@ -0,0 +1,174 @@
+---
+name: 圆融亲和
+description: 消费品与教育产品的温软圆润——奶白底、珊瑚与薄荷、大圆角,亲切但不幼稚
+name_en: "Soft & Friendly"
+description_en: "The soft roundness of consumer and education products: milk-white ground, coral and mint, and generous corners. Warm without being childish."
+suits: "工具产品 · 品牌门面"
+colors:
+  cream: "#FFFDF8"
+  ink: "#3A4254"
+  coral: "#F97A6C"
+  mint: "#7FD8BE"
+  butter: "#FFD98E"
+  line: "#E8E2D6"
+fonts:
+  latin: "'Nunito'"
+  cjk: rounded
+typography:
+  headline:
+    latin: "'Nunito', 'Quicksand'"
+    fontSize: "24px"
+    fontWeight: 700
+  body:
+    fontSize: "16px"
+    lineHeight: 1.75
+    measure: "50ch"
+    fontWeight: 400
+  label:
+    fontWeight: 600
+border:
+  width: "1px"
+  style: solid
+  emphasis: "2px"
+rounded:
+  md: 12px
+  lg: 20px
+  full: 999px
+spacing:
+  unit: 8px
+imagery:
+  ratio: "1:1"
+  treatment: none
+  crop: rounded
+icon:
+  style: line
+  strokeWidth: "2px"
+  linecap: round
+  corner: round
+components:
+  card:
+    backgroundColor: "{colors.cream}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: "24px"
+  button-primary:
+    backgroundColor: "{colors.coral}"
+    textColor: "{colors.ink}"
+    typography: "{typography.label}"
+    rounded: "{rounded.full}"
+    height: "44px"
+    padding: "24px"
+  button-secondary:
+    backgroundColor: "{colors.mint}"
+    textColor: "{colors.ink}"
+    typography: "{typography.label}"
+    rounded: "{rounded.full}"
+    height: "44px"
+    padding: "24px"
+  input-field:
+    backgroundColor: "{colors.cream}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.md}"
+    height: "44px"
+    padding: "16px"
+  tag:
+    backgroundColor: "{colors.butter}"
+    textColor: "{colors.ink}"
+    typography: "{typography.label}"
+    rounded: "{rounded.full}"
+    height: "28px"
+    padding: "12px"
+  avatar:
+    rounded: "{rounded.full}"
+    size: "40px"
+---
+
+## Overview
+
+参照物:做得体面的儿童教育 App、健康食品包装、日系文具品牌。
+圆是这个风格的核心词:圆角、圆形色块、圆头线条、圆润字体。
+但「亲和」靠的是低饱和的暖色与充足留白——饱和度一拉高就成了廉价玩具。
+
+## Colors
+
+- **cream (#FFFDF8)**:奶白底,暖而不黄。
+- **ink (#3A4254)**:蓝灰墨色文字——比纯黑柔和,是「不幼稚」的关键一票。
+- **coral (#F97A6C)**:珊瑚主色,按钮与重点。
+- **mint (#7FD8BE) / butter (#FFD98E)**:薄荷与奶油黄,辅助色块与插画配色。
+- **line (#E8E2D6)**:温暖的描边与分隔线。
+- 配色纪律:一图一主色(coral),辅助色出现在插画与小标签里;三彩色齐上阵的场合要拉开面积比例。
+
+## Typography
+
+- 圆体系:拉丁 Nunito/Quicksand,中文走系统圆体(圆体-简),取不到再落苹方 / 微软雅黑 —— 圆黑更佳;标题 700 但字号别过大——这个风格音量是中等的。
+- 全部字色用 ink 蓝灰,彩色文字只出现在标签胶囊里。
+
+## Layout
+
+- 圆角统一档位:卡片 20px、按钮胶囊、小元素 12px——**同屏别混第三种圆角**。
+- 元素之间留白充足(16px 起步),挤密与亲和不共存。
+- 插画风格:圆头粗线 + 平涂 + 少量脸部表情(两点一线的极简脸,不是大眼萌系)。
+
+## Elevation & Depth
+
+允许**一层**柔投影,且**只有一层**——这是「亲和」与「廉价果冻感」的分界线。
+
+- **卡片是唯一投影的地方**:key 阴影 `0 1px 2px rgba(58,66,84,0.30)` +
+  ambient 阴影 `0 2px 6px 2px rgba(58,66,84,0.15)`。
+- **柔投影本质是两层**:近而实的 key + 远而散的 ambient,只画一层会显得硬。
+  (依据:Material 3 每一档 elevation 都是 key 0.3 + ambient 0.15 两层;
+  Adobe Spectrum 2 逐字说是 key + ambient + transition 三层。)
+- **阴影色取 ink 蓝灰 `#3A4254`,不是纯黑**——纯黑投影落在奶白底 `#FFFDF8` 上会发灰发脏。
+- **按钮不投影**。按钮的分量来自 coral 实色本身,不来自浮起。
+- **按下 = 背景色加深一档**(coral → 约 `#E86657`),不是加深阴影、不是位移。
+
+Don't:卡片里套卡片;多层投影堆出立体按钮。
+
+## Shapes
+
+形状语言 = **圆**:圆角、圆形色块、圆头线条、圆润字体,四件事说的是同一个词。
+
+- **三档分工**:`md 12px` 给输入框/标签/小元素,`lg 20px` 给卡片与图片,
+  `full 999px` **只给按钮胶囊、头像、圆点**——**矩形卡片永远不许用 full**。
+- **同心嵌套**:外圆角 − 内边距 = 内圆角(M3 optical roundness / Apple HIG concentricity)。
+  20px 圆角的卡片 + 8px 内边距 ⇒ 内层元素正好 12px(`md` 档);内边距要开到 16px 时,
+  内层就别再套带底色的容器,直接裸放内容,免得出现第四种圆角。
+- **线条**:1.5-2px,端点 **round**(`stroke-linecap: round`),贯彻到图标、箭头、下划线、
+  图表线——出现一个平头端点就破功。
+- **允许的形状**:圆角矩形、正圆、胶囊、圆头弧线与波浪。**不出现锐角三角形**;
+  需要箭头时用圆头折线代替三角箭头。
+- **图标**:线性圆头,2px 描边、端点与转角**都是 round**,24px 网格上画;实心图标和锐角三角
+  一个下场——一出现就硬了。
+
+## Components
+
+- **按钮**:44px 高胶囊 + 左右 24px 内边距,coral 实色 + **ink 字**。
+  白字在 coral 上只有 2.6:1,ink 是 3.8:1(16px / 600 字重按大文本判定达标)——所以按钮字用 ink。
+- **按钮交互**:hover 背景提亮约 8%,按下背景加深一档(约 `#E86657`);两态都不动阴影、不动位置。
+- **输入框**:44px 高、**12px 圆角(不用胶囊)**——胶囊输入框会让光标起始位置变得暧昧;
+  cream 底 + 1px line 描边,聚焦时描边换 coral 并加粗到 2px。
+- **卡片**:20px 圆角 + 24px 内边距 + 唯一那层柔投影,卡片之间至少 16px。
+- **标签**:28px 胶囊,butter 或 mint 底 + ink 字,一屏 ≤3 个。
+- **头像**:正圆 40px,不加描边不加投影。
+
+## Do's and Don'ts
+
+- Don't:高饱和彩虹全家桶(纯红纯蓝纯黄挤一屏)。
+- Don't:大眼睛萌系吉祥物、emoji 表情当插画。
+- Don't:投影堆叠的「果冻感」立体按钮;浮起感最多一层淡投影。
+- Don't:纯黑文字、锐利直角元素乱入。
+- Do:圆头线条(stroke linecap round)贯彻到图标、箭头、下划线。
+- Do:用留白与淡色线维持秩序,亲和的底子是整洁。
+
+## Composition
+
+- 界面/卡片:奶白底 + 圆角卡 + 一个珊瑚色主按钮,插画点缀在角落不抢主体。
+- 插画场景:主角居中、配角环绕,地面用一条 mint 或 butter 的圆角色带交代。
+
+## Image Prompt Templates
+
+- base: "friendly rounded illustration style, warm cream background (#FFFDF8), soft coral (#F97A6C) and mint (#7FD8BE) palette with muted saturation, thick round-capped outlines in blue-gray (#3A4254), generous rounded corners, simple dot-eyes minimal faces, clean and airy layout, tasteful children's-education-app aesthetic, flat with at most one soft shadow"
+- negative: "oversaturated rainbow colors, big anime eyes mascot, emoji, jelly 3D buttons, harsh black outlines, cluttered layout, sharp corners"
+- 注:饱和度是这个风格的生死线——描述里保留 "muted saturation";出图太艳就再加 "pastel, low saturation"。

package/assets/design-styles/swiss-grid.md

@@ -0,0 +1,156 @@
+---
+name: 瑞士网格
+description: 国际主义排版风格——严格网格、大量留白、单一强调色,冷静克制的现代主义
+name_en: "Swiss Grid"
+description_en: "The International Typographic Style: a strict grid, plenty of white space and a single accent color. Calm, restrained modernism."
+suits: "内容阅读 · 品牌门面"
+colors:
+  primary: "#111418"
+  secondary: "#5C6066"
+  accent: "#D93025"
+  neutral: "#F4F3EF"
+  line: "#C9C7C0"
+fonts:
+  latin: "'Neue Haas Grotesk', 'Helvetica Neue'"
+  cjk: sans
+typography:
+  headline:
+    fontSize: "48px"
+    fontWeight: 700
+    letterSpacing: "-0.02em"
+  body:
+    fontSize: "16px"
+    lineHeight: 1.6
+    measure: "66ch"
+    fontWeight: 400
+  label:
+    fontWeight: 500
+    letterSpacing: "0.08em"
+border:
+  width: "1px"
+  style: solid
+  emphasis: "1px"
+rounded:
+  none: 0px
+spacing:
+  unit: 8px
+imagery:
+  ratio: "3:2"
+  treatment: grayscale
+  crop: hard
+icon:
+  style: line
+  strokeWidth: "1px"
+  linecap: butt
+  corner: sharp
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.neutral}"
+    typography: "{typography.label}"
+    rounded: "{rounded.none}"
+    height: "40px"
+    padding: "20px"
+  button-primary-hover:
+    backgroundColor: "{colors.accent}"
+  button-secondary:
+    backgroundColor: "{colors.neutral}"
+    textColor: "{colors.primary}"
+    typography: "{typography.label}"
+    rounded: "{rounded.none}"
+    height: "40px"
+    padding: "20px"
+  input-field:
+    backgroundColor: "{colors.neutral}"
+    textColor: "{colors.primary}"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    height: "40px"
+    padding: "12px"
+  tag:
+    backgroundColor: "{colors.accent}"
+    textColor: "{colors.neutral}"
+    typography: "{typography.label}"
+    rounded: "{rounded.none}"
+    height: "24px"
+    padding: "8px"
+---
+
+## Overview
+
+参照物:1960 年代 Josef Müller-Brockmann 的音乐厅招贴、苏黎世设计学院的展览目录。
+一切秩序来自网格与字号,而不是装饰。纸感的暖白底、近黑的墨色文字、唯一一点红。
+气质是「工程师的冷静」——信息密度可以高,但每一毫米都有依据。
+
+## Colors
+
+- **primary (#111418)**:近黑墨色,承担 90% 的文字与图形。
+- **secondary (#5C6066)**:注释、次级信息的中灰。
+- **accent (#D93025)**:全局唯一的强调红,一张图里出现不超过两处(一个标题词、一条线、一个箭头)。红是信号,不是装饰。
+- **neutral (#F4F3EF)**:暖白纸底。不用纯白 #FFF——纸感来自这一点点暖。
+- **line (#C9C7C0)**:网格线、分隔线专用,细而浅。
+
+## Typography
+
+- 无衬线一族走到底:拉丁 Neue Haas Grotesk / Helvetica,中文系统黑体(苹方 / 微软雅黑,思源黑体在栈尾兜底)。
+- 层级只靠字号与字重拉开(大标题可以非常大,与正文形成 4 倍以上的反差),不靠颜色和斜体。
+- label 类小字全大写(拉丁)+ 加宽字距,是这个风格的签名细节。
+
+## Layout
+
+- 严格的列网格(海报 6 列、界面 12 列),元素必须落在网格线上;留白占版面 40% 以上。
+- 齐左不齐右(拉丁);对齐是唯一的装饰。
+- 图片裁成网格整数倍的矩形,不加边框不加圆角不加投影。
+
+## Elevation & Depth
+
+深度**不存在**。这是印刷品,纸只有一层。
+
+- **Level 0 是唯一一层**:所有内容直接落在 neutral 纸底上,没有第二层底色。
+- 分区只有两种手段:**一条 1px 的 line 横线**,或**一整段留白**(≥3 倍常规间距 = 24px 起)。
+  二者等效,**优先留白**。
+- 主次靠字号跳跃(48/16,4 倍差)与 accent 红的位置——红落在哪里,哪里就是第一视线。
+- 需要一个区块看起来独立时:加一条线,或多留 3 倍的白。**不要把它变成卡片。**
+
+Don't:任何 box-shadow(哪怕 1px 模糊);白卡叠在白底上制造「浮起」的错觉。
+
+## Shapes
+
+形状语言 = **网格切出来的矩形**。
+
+- **圆角恒 0**(`rounded.none`),包括图片、输入框、头像。圆角一出现,秩序感就换成了亲和感。
+- **线条只有一种**:1px 实线 line 色,端点 butt(平头),只走水平或垂直;不用虚线、不用斜线。
+- 描边用得极省:图片不描边、区块不描边。线只用来**分隔**,不用来**包围**。
+- 允许的形状:矩形、正圆(仅作图表数据点)、实心三角(仅作箭头)。装饰性图形一个都没有。
+- **图标**:与网格线同一支笔——1px 实线、端点 butt(平头)、转角直角,不圆头也不填实心。
+  图标是标识不是装饰件,能用文字说清的地方就不要图标。
+
+## Components
+
+- **按钮**:方角实心块,高 40px、左右内边距 20px。主按钮 primary 底 + neutral 字;
+  hover **换成 accent 红**(不是变深)——这个风格里状态变化是换色,不是加效果。
+- **次级按钮**:同尺寸,neutral 底 + 1px line 描边 + primary 字。层级差别只在填色。
+- **输入框**:与按钮同高(40px),只画**底部一条 1px line**;聚焦时线换 primary 并加粗到 2px,
+  **不加外发光、不加背景色变化**。
+- **标签**:accent 实色小块,高 24px。一屏最多一个——它和红标题共用「唯一强调」的配额。
+- 所有控件高度取 `spacing.unit` 的整数倍(24 / 40 / 48),对不齐网格的控件不要出现。
+
+## Do's and Don'ts
+
+- Don't:任何渐变、任何投影、任何圆角。
+- Don't:第二种强调色。红已经在了,想加蓝的时候删一个元素。
+- Don't:斜体、艺术字、描边字。
+- Don't:居中排版(标题正文全部齐左;居中只允许出现在单行封面字)。
+- Do:敢留白,敢把标题放大到「有点过分」的程度。
+- Do:用一条 1px 的线解决所有分区需求。
+
+## Composition
+
+- 单主体、强轴线:主体沿网格垂直/水平轴放置,视线路径从大字号向小字号流动。
+- 摄影素材转黑白或单色化处理后再进版面,避免彩色照片打破配色纪律。
+
+## Image Prompt Templates
+
+- base: "Swiss International Typographic Style poster, strict grid layout, generous negative space, warm off-white paper background (#F4F3EF), near-black ink text (#111418), a single red accent (#D93025), Helvetica-style grotesque typography, flat, no gradients, no shadows, precise and rational, 1960s Zurich design school aesthetic"
+- negative: "gradient, drop shadow, rounded corners, multiple bright colors, 3D render, glossy, clip art, emoji"
+- 注:生成带中文文字的版面时,在 base 里补 "clean CJK sans-serif typography";文字宁少勿多。

package/assets/design-styles/tech-dark.md

@@ -0,0 +1,182 @@
+---
+name: 科技深色
+description: 克制的深色科技界面——石墨蓝底、高可读文字、一点数据青,像专业监控台而非霓虹夜店
+name_en: "Tech Dark"
+description_en: "A restrained dark technical interface: graphite-blue ground, highly legible text and a hint of data cyan. A professional monitoring console, not a neon nightclub."
+suits: "工具产品"
+colors:
+  bg: "#0B0E14"
+  surface: "#151A23"
+  primary: "#E6EAF2"
+  secondary: "#8A93A6"
+  accent: "#2DD4BF"
+  line: "#232B38"
+fonts:
+  latin: "'IBM Plex Sans'"
+  cjk: sans
+typography:
+  headline:
+    fontSize: "24px"
+    fontWeight: 600
+  body:
+    fontSize: "14px"
+    lineHeight: 1.7
+    measure: "72ch"
+    fontWeight: 400
+  data:
+    latin: "'IBM Plex Mono', 'JetBrains Mono'"
+    fontWeight: 500
+border:
+  width: "1px"
+  style: solid
+  emphasis: "1px"
+rounded:
+  sm: 6px
+  md: 10px
+spacing:
+  unit: 8px
+status:
+  warning: "#F2B26B"
+imagery:
+  ratio: "16:9"
+  treatment: none
+  crop: rounded
+icon:
+  style: line
+  strokeWidth: "1.5px"
+  linecap: butt
+  corner: sharp
+components:
+  card:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.primary}"
+    typography: "{typography.body}"
+    rounded: "{rounded.md}"
+    padding: "16px"
+  button-primary:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.primary}"
+    typography: "{typography.body}"
+    rounded: "{rounded.sm}"
+    height: "32px"
+    padding: "12px"
+  button-primary-hover:
+    backgroundColor: "{colors.line}"
+  button-secondary:
+    backgroundColor: "{colors.bg}"
+    textColor: "{colors.secondary}"
+    typography: "{typography.body}"
+    rounded: "{rounded.sm}"
+    height: "32px"
+    padding: "12px"
+  input-field:
+    backgroundColor: "{colors.bg}"
+    textColor: "{colors.primary}"
+    typography: "{typography.body}"
+    rounded: "{rounded.sm}"
+    height: "32px"
+    padding: "10px"
+  tag:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.accent}"
+    typography: "{typography.data}"
+    rounded: "{rounded.sm}"
+    height: "20px"
+    padding: "8px"
+  metric-value:
+    textColor: "{colors.accent}"
+    typography: "{typography.data}"
+---
+
+## Overview
+
+参照物:专业交易终端、航天任务控制室的屏幕、开发者工具的深色主题。
+深色不是为了酷,是为了让数据发光。底色是带一点蓝的石墨,不是纯黑;
+强调色是冷静的数据青,只给「活的数据」用。整体气质:值夜班的工程师信得过的界面。
+
+## Colors
+
+- **bg (#0B0E14) / surface (#151A23)**:两级深底,卡片浮起靠这一档明度差,不靠投影。
+- **primary (#E6EAF2)**:正文亮灰白。别用纯白 #FFF,刺眼。
+- **secondary (#8A93A6)**:标签、说明文字。
+- **accent (#2DD4BF)**:数据青。只用于数值、活动状态、图表主线——按钮和标题不抢它。
+- **warning (#F2B26B,在顶层 `status:` 段)**:告警琥珀,与青色天然区分(bg 上 10.5:1)。错误可再深一档到红,但一张图里红是稀客。
+- **line (#232B38)**:分隔线与描边。深色界面的秩序靠线,不靠色块。
+
+## Typography
+
+- 界面文字 IBM Plex Sans + 系统黑体(苹方 / 微软雅黑,思源黑体兜底);**所有数值一律等宽字体**(IBM Plex Mono / JetBrains Mono)——数字会对齐、会跳动,等宽是专业感的一半;中文没有等宽族,夹在数值里的汉字兜到系统黑体。
+- 字重克制:600 封顶,不用 800/900 的重磅字。
+
+## Layout
+
+- 信息密度可以高,但要分区清晰:卡片之间留 16px 以上,卡片内边距统一。
+- 图表线条细(1.5-2px),数据点小;网格线用 line 色且比数据线浅得多。
+
+## Elevation & Depth
+
+层级靠**明度台阶**,不靠投影——深色底上的投影根本看不见,只会把界面弄脏。
+
+1. **Level 0** = bg `#0B0E14`,页面底。
+2. **Level 1**(卡片/面板)= surface `#151A23`。**这一档明度差就是全部的「浮起」**,不叠任何阴影。
+3. **Level 2**(弹层/下拉/浮层)= 仍是 surface + **1px line `#232B38` 描边**。靠描边而不是再提亮
+   一档,是为了不引入第三种底色。
+4. **hover** = 在当前层上再提亮约 6% 明度(surface `#151A23` → `#232B38`,与 line 同值),
+   **不是**加投影、不是加边框。
+5. ⚠ 不要用「在 surface 上叠一层品牌色 tint」的老做法:Material 3 已弃用 `surfaceTint`
+   (规范逐字:"Surface tint color is deprecated. Use elevation level tokens (0–5) instead."),
+   正统做法就是像这里一样,用两个**独立的 surface 色角色**。
+
+Don't:霓虹外发光(glow)当浮起;≥3 层底色堆叠(第三层深色一定分不出来)。
+
+## Shapes
+
+形状语言 = 精密仪器的面板:直边、小圆角、细线。
+
+- **圆角两档分工**:`sm 6px` 给按钮/输入框/标签,`md 10px` 给卡片/面板/弹层。**同屏不出现第三种**。
+- **同心嵌套**:外圆角 − 内边距 = 内圆角(M3 叫 optical roundness,Apple HIG 叫 concentricity,
+  两家独立收敛到同一条)。10px 圆角的卡片里放按钮,内边距 4px 时按钮才配 6px;
+  内边距开到 16px 时,内层元素**不要再画圆角容器**,直接裸放内容。
+- **转角族用 `rounded` 不用 `cut`**(M3 逐字:"The shape style family can be customized from
+  rounded to cut. This makes the corner a straight line instead of curved.")——切角是赛博朋克
+  语汇,与这里的克制不合。
+- **紧邻成组**的元素(分段控件、工具条按钮)用**非对称转角**:整组外侧两端 6px、内侧相接处 0,
+  让一排按钮读作一件东西而不是四个。
+- **线条**:1px line 色实线、端点 butt 用于分隔;图表数据线 1.5-2px、端点 round;
+  虚线只表达一种语义——「预测值/未确认数据」,别当装饰用。
+- **图标**:细线几何图标,1.5px 描边、端点 butt、转角直角,24px 网格。比 1px 分隔线粗半档
+  是为了在深底上立得住——深色底会把过细的亮线吃掉;再粗就成了仪表盘之外的另一种音量。
+  **不用实心图标**(实心块是 surface 的活儿,不是图标的)。
+
+## Components
+
+- **卡片/面板**:surface 底 + 10px 圆角 + 16px 内边距,卡片之间 16px。
+  **卡片里不再套卡片**(第二层 surface 在深色下分不出来)。
+- **按钮**:32px 高、6px 圆角、surface 底 + primary 字,hover 提亮到 `#232B38`。
+  **主按钮不用 accent**——青色是数据的,不是操作的。
+- **输入框**:32px 高、bg 底(比卡片更暗 = 「凹进去」)+ 1px line 描边;聚焦时描边换 accent,
+  不加外发光。
+- **标签/状态点**:20px 高,surface 底 + accent 字,文字走 `typography.data` 等宽。
+- **数值**:一律等宽字体;**活跃/实时**的数值上 accent,静态历史值用 primary——
+  一屏里带 accent 的数字超过三个,accent 就失效了。
+- 控件高度取 4px 的整数倍(20 / 32 / 40),密度可以高,但必须齐。
+
+## Do's and Don'ts
+
+- Don't:紫蓝渐变(#6366F1 一族)、任何大面积渐变背景——这是深色科技风最泛滥的套路。
+- Don't:霓虹发光(glow/bloom)效果、赛博朋克粉紫配色。
+- Don't:emoji 当图标;图标用细线几何图标。
+- Don't:纯黑底 #000。
+- Do:数据造真:量级合理、有单位、有时间戳;假数据一眼假。
+- Do:让 accent 保持稀缺——满屏青色等于没有青色。
+
+## Composition
+
+- 仪表盘类:最重要的一个数字最大,放左上;趋势图占宽不占高。
+- 概念图/架构图:深底上用 surface 色块做节点、line 色连线、accent 只标关键路径。
+
+## Image Prompt Templates
+
+- base: "professional dark-mode dashboard interface, graphite blue-black background (#0B0E14), elevated panels (#151A23), light gray text, teal accent (#2DD4BF) for live data only, monospaced numerals, thin geometric line icons, subtle 1px borders, realistic plausible metrics with units, calm and precise, no neon glow"
+- negative: "purple-blue gradient, neon glow, cyberpunk, emoji icons, pure black background, glossy 3D, lens flare"
+- 注:图表数据要像真实业务(合理量级 + 单位),这条写进每次的画面描述里。