sintbot 1.3.0 → 1.4.1

package/assets/design-styles/liquid-glass.md

@@ -0,0 +1,183 @@
+---
+name: 液态玻璃
+description: 半透明材质浮在真实内容之上——模糊加折射、边缘内高光、同心圆角,清透但不牺牲可读
+name_en: "Liquid Glass"
+description_en: "Translucent material floating over real content: blur and refraction, inner edge highlights and concentric corners. Clear, without giving up legibility."
+suits: "工具产品 · 品牌门面"
+colors:
+  bg: "#E8EDF4"
+  surface: "#FFFFFF"
+  ink: "#0B0D12"
+  muted: "#5A6273"
+  accent: "#007AFF"
+  line: "#D3DAE5"
+fonts:
+  latin: "'SF Pro Text', -apple-system, 'Host Grotesk'"
+  cjk: sans
+typography:
+  headline:
+    latin: "'SF Pro Display', -apple-system, 'Host Grotesk'"
+    fontSize: "34px"
+    fontWeight: 600
+    lineHeight: 1.15
+    letterSpacing: "-0.022em"
+  body:
+    fontSize: "17px"
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: "-0.01em"
+    measure: "64ch"
+  label:
+    fontSize: "15px"
+    fontWeight: 600
+border:
+  width: "1px"
+  style: solid
+  emphasis: "1px"
+rounded:
+  md: 12px
+  lg: 22px
+  xl: 28px
+  full: 999px
+spacing:
+  unit: "8px"
+  gutter: "16px"
+  maxWidth: "1080px"
+elevation:
+  mode: glass
+  levels: "2"
+imagery:
+  ratio: "16:9"
+  treatment: none
+  crop: rounded
+icon:
+  style: line
+  strokeWidth: "1.5px"
+  linecap: round
+  corner: round
+components:
+  button-primary:
+    backgroundColor: "{colors.accent}"
+    textColor: "{colors.surface}"
+    typography: "{typography.label}"
+    rounded: "{rounded.full}"
+    height: "44px"
+    padding: "20px"
+  button-secondary:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    typography: "{typography.label}"
+    rounded: "{rounded.full}"
+    height: "44px"
+    padding: "20px"
+  card:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.lg}"
+    padding: "20px"
+  input-field:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.md}"
+    height: "44px"
+    padding: "12px"
+  tag:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    typography: "{typography.label}"
+    rounded: "{rounded.full}"
+    height: "26px"
+    padding: "10px"
+---
+
+## Overview
+
+参照物:Apple 2025 年 6 月发布的 Liquid Glass 材质(发布稿原文 "reflects and refracts its surroundings"、控件要 "fit perfectly concentric with the rounded corners")、WWDC25 Session 219《Meet Liquid Glass》、HIG › Materials。
+
+核心不是「半透明白卡片」,是一层**有厚度的材质**:它取下层内容做模糊 + 提饱和,边缘留一道内高光当作光打在玻璃棱上,所以它跟着底下的内容变颜色。判断做没做对只有一条标准:**底下必须是真实内容**(照片/地图/视频/长列表),玻璃滑过时看得出下面的东西在动。底下若是一块装饰渐变,玻璃就退化成一张磨砂贴纸。
+
+⚠ **这个风格有个表达天花板**:它的性格全在「半透明 + 实时模糊」,而微缩预览图画不出这两样(图上只会显示浅底 + 大圆角 + 一个蓝按钮)。选它之前最好另找一张真实截图看,别只看预览图。
+
+## Colors
+
+- **bg (#E8EDF4)**:冷调浅灰蓝。它是**占位的衬底不是画面** —— 真做起来这层该被照片/地图/内容列表替掉,玻璃需要下面有东西可折射。
+- **surface (#FFFFFF)**:玻璃本色。落地时**永远带透明度**(见 Elevation),纯不透明白只出现在承载正文的实底卡。
+- **ink (#0B0D12)**:近黑。白底 19.4:1、bg 底 16.5:1 —— 玻璃上文字能不能读全指望它。
+- **muted (#5A6273)**:次级文字,白底 6.1:1。⚠ **只用在实底区**;玻璃层上一律 ink 或纯白,半透明背景已经吃掉一档对比,再降级必挂。
+- **accent (#007AFF)**:系统蓝,给按钮填充、图标、激活态。⚠ **它承载文字只有 4.02:1(白底),不达正文 4.5:1** —— 链接文字用深一档的 `#0062CC`(5.8:1),`#007AFF` 留给填充与图标;白字压 #007AFF 同样是 4.02:1,按钮文字请 15px/600 起,要严格达标就把按钮底压到 `#0062CC`(白字 5.8:1)。**这是这套色板唯一要自己拍板的取舍,别假装它过了。**
+- **line (#D3DAE5)**:实底区的分隔线与描边。⚠ 玻璃层**不用它描边**,见 Shapes。
+
+## Typography
+
+- 全族 SF Pro(拉丁)+ 苹方 / 微软雅黑(中文,思源黑体兜底),Host Grotesk 作无 SF 环境的回退。
+- 标题 Display 600 `-0.022em`、正文 Text 400 `-0.01em` —— **大字收紧、小字放松**是这一族的光学字距规则,不是随手写的数。
+- 小标签 **600 字重,不加宽字距**:这套体系靠字重区分层级,给小字加 0.08em 是瑞士/科技风的手法,放这里立刻串味。
+- 标题与正文反差只有 2 倍(34/17),克制是它的性格。⚠ 玻璃上最小字号 **15px / weight 500**,12px 白细字在玻璃上等于没有。
+
+## Layout
+
+- 分层不分块:内容是**一整片连续的滚动流**,chrome(导航条/标签栏/工具条)浮在它上面。别把版面切成一格一格的玻璃卡片阵 —— 那是把材质当装饰用。
+- 8px 栅格,组件间距 16/20/24;玻璃面板内边距 20px 起,材质要留白才看得出通透。
+- 浮动控件贴边距 16px,与内容之间**不留分隔线**,靠材质本身分离;内容区最大宽 1080px,正文行长 64ch。
+
+## Elevation & Depth
+
+深度来自**材质**而不是投影距离:玻璃有厚度,所以它同时有模糊、有高光、有一点很淡的落影。
+
+1. **Level 0**:内容层。完全实底、不加任何模糊 —— 它是被折射的对象。
+2. **Level 1**(导航条/标签栏/工具条):`backdrop-filter: blur(24px) saturate(180%)`;`box-shadow: 0 1px 1px rgba(11,13,18,.04), 0 8px 24px rgba(11,13,18,.10)`;内高光 `inset 0 1px 0 rgba(255,255,255,.65)`。
+3. **Level 2**(弹窗/菜单/浮层):同一套材质,阴影加到 `0 16px 40px rgba(11,13,18,.16)`,模糊**不要再加**(超过 30px 底下糊成一片灰,折射感反而没了)。
+
+三条硬规矩:**内高光是签名**,漏了玻璃就变磨砂塑料;`saturate(180%)` 不能省,只模糊不提饱和会把底下的颜色洗成灰;**阴影永远比模糊轻**,它只把玻璃抬起 1-2mm,不做立体感。
+
+Don't:两层玻璃直接叠;给玻璃再加内阴影;用渐变去「画」出玻璃 —— 这材质必须由 `backdrop-filter` 实时算,画出来的假玻璃一滚动就露馅。
+
+## Shapes
+
+形状语言 = **连续圆角的胶囊与圆角矩形**,没有一处直角。
+
+- **同心圆角规则(最容易做坏的一条)**:外圆角 = 内圆角 + 内边距。22px 圆角的面板里放 8px 内边距的按钮 ⇒ 按钮圆角必须是 14px。嵌错了(内比外圆、或两者相等)整套观感立刻塌成「随手套的圆角」。
+- 圆角档位:输入框 12 / 卡片与面板 22 / 大浮层 28 / 按钮与标签走 `full` 胶囊。
+- **玻璃边缘不用 1px 灰描边** —— 那是 2013 年的拟物残留。边缘靠内高光划定;`border.width` 那个 1px 是给**实底组件**(输入框、实底卡)用的,别混。
+- 图标细线 1.5px、圆头圆角,与胶囊语言同构。
+
+## Components
+
+- **主按钮**:accent 实色胶囊 + 白字,一屏最多一个 —— 唯一允许用满强调色的元素。
+- **次按钮**:玻璃胶囊(surface + 55-72% 透明 + 同款模糊),文字用 ink。
+- **卡片**:22px 圆角。⚠ **承载正文的卡片一律实底**,只有 chrome 层才用玻璃(见下一节)。
+- **输入框**:实底白 + 12px 圆角 + 1px `line` 描边;聚焦态描边换 accent 加 3px 外圈 `rgba(0,122,255,.18)`,**不加发光**。
+- **标签**:胶囊,玻璃或浅实底二选一,全站只用一种。
+
+## Do's and Don'ts
+
+- Do:让底下有真东西 —— 照片、地图、视频、内容列表。背景决定这个风格成不成立。
+- Do:玻璃只给 chrome 层,正文内容区一律实底;同心圆角算清楚再画,档位全站锁死这四个值。
+- Don't:**玻璃叠玻璃**。两层模糊叠加后对比度不可控,文字必挂,性能也塌。
+- Don't:玻璃上承载表格、长文、密集数据 —— 要读的东西放实底。
+- Don't:玻璃上放 12px 白细字(最小 15px / weight 500)。
+- Don't:**紫蓝渐变背景 + 白玻璃卡片**。那是被模板玩烂的长相,也正是 AI 生成图的标准脸;背景该是真实内容,不是装饰渐变。
+- Don't:用 PNG 或 CSS 渐变伪造玻璃;不做无模糊回退与 `prefers-reduced-transparency`。
+
+## 可用性底线
+
+这一节不是建议,是能不能交付的门槛。NN/g《Liquid Glass Is Cracked》点名了四类实测问题:**文字压在图上对比不足 · 图标融进背景认不出 · 半透明层里文字叠文字 · 浮动控件与内容争视觉**。Apple 自己在后续测试版里下调过透明度 —— 连原厂都要往回收,说明这材质的默认值天然偏激进。
+
+1. **玻璃只用在 chrome 层**:导航条、标签栏、工具条、弹窗可以;正文区、表格、表单、长文一律实底。判据是一句话 —— **要读的东西不放在会动的背景上**。
+2. **透明度按底色分两档**:暗底场景 `rgba(255,255,255,0.10)`,亮底场景 `rgba(20,22,26,0.55)`,保证其上文字 ≥4.5:1。
+3. **两张背景各测一次**:找应用里**最亮和最暗**的两张真实背景,把同一块玻璃分别放上去量对比度,**两次都过才算过**。只测一张等于没测 —— 玻璃的对比度是随背景浮动的。
+4. **图标不能只靠颜色立住**:玻璃上的线性图标要么加 1.5px 深色描边,要么坐在一块实底圆形上。
+5. **回退与偏好**:`@supports not (backdrop-filter: blur(1px))` 给实底回退(不透明 surface + line 描边);响应 `prefers-reduced-transparency: reduce` 时整套换实底 —— 这是系统级无障碍开关,不是可选项。
+6. **浮动控件让位内容**:玻璃层面积一屏不超过 20%,滚动时**不加放大或视差**,它是容器不是主角。
+
+## Composition
+
+- 一屏一层玻璃:满幅真实内容 + 顶部或底部一条玻璃 chrome,结束。
+- 玻璃条要**压着内容边缘**放(看得见下面的东西被它切走一半),悬在纯色空白上等于白做。
+- 图片 16:9,圆角与所在容器同心,不加描边不加投影 —— 深度由玻璃提供,图片只管平铺。想展示材质本身时让内容在玻璃下滚动一段再截图,静态图选下层色彩丰富的画面。
+
+## Image Prompt Templates
+
+- base: "iOS-style translucent glass panel floating over a real photographic background, heavy background blur with increased saturation, subtle inner top highlight along the panel edge, very soft ambient shadow, continuous rounded corners with concentric nesting, blue accent pill button (#007AFF), near-black text (#0B0D12), clean SF-Pro-like sans-serif typography, light cool gray-blue environment (#E8EDF4), crisp and legible"
+- negative: "purple blue gradient background, frosted plastic card on flat gradient, 1px gray border on glass, neon glow, heavy drop shadow, tiny thin white text, sharp 90-degree corners, skeuomorphic bevel, stacked glass layers"
+- 注:底层背景要写成**具体的真实画面**(照片/地图/列表),写 "gradient background" 出来的就是那张烂大街的模板脸;中文版面补 "clean CJK sans-serif typography, 15px minimum text size"。

package/assets/design-styles/neo-chinese.md

@@ -0,0 +1,136 @@
+---
+name: 新中式
+description: 民国书局与笺谱的克制东方——宣纸底、墨色字、朱砂一点,是文人气不是影楼中国风
+name_en: "Neo-Chinese"
+description_en: "The restrained East of Republican-era bookshops and letter-paper albums: rice-paper ground, ink-black text and a single touch of cinnabar. Scholarly, not photo-studio chinoiserie."
+suits: "内容阅读 · 品牌门面"
+colors:
+  paper: "#F5F0E6"
+  ink: "#2B2620"
+  cinnabar: "#C03F2B"
+  indigo: "#3D4A52"
+  gold: "#B08D46"
+fonts:
+  cjk: sans
+typography:
+  headline:
+    cjk: serif
+    fontSize: "36px"
+    fontWeight: 600
+  body:
+    generic: "serif"
+    fontSize: "16px"
+    lineHeight: 1.9
+    measure: "36em"
+    fontWeight: 400
+  label:
+    fontWeight: 400
+    letterSpacing: "0.12em"
+border:
+  width: "1px"
+  style: double
+  emphasis: "2px"
+rounded:
+  none: 0px
+spacing:
+  unit: 8px
+imagery:
+  ratio: "3:4"
+  treatment: grayscale
+  crop: hard
+icon:
+  style: line
+  strokeWidth: "1px"
+  linecap: butt
+  corner: sharp
+---
+
+## Overview
+
+参照物:民国商务印书馆的书籍函套、荣宝斋的木版水印笺谱、故宫文创里做得最素的那一档。
+东方感来自「留白 + 竖排的可能性 + 材质的纸感」,不来自龙凤祥云贴纸。
+色是宣纸的暖、墨的黑、朱砂印章的一点红;气质是书房,不是酒楼。
+
+## Colors
+
+- **paper (#F5F0E6)**:宣纸暖白,全部底色。
+- **ink (#2B2620)**:暖黑墨色,文字与线描主色——不是冷黑。
+- **cinnabar (#C03F2B)**:朱砂红,印章逻辑:小面积、方形/圆形色块或单个重点词,一处足矣。
+- **indigo (#3D4A52)**:黛青,次级色,用于图案、山形、次标题。
+- **gold (#B08D46)**:泥金,极小面积点缀(一条细线、一个纹样),可整张不用。
+
+## Typography
+
+- **标题用宋体**(思源宋体优先),36px / 字重 600 —— 字够大够重,宋体的骨相才立得住。
+- **正文与小标签用黑体**。⚠ 宋体横细竖粗,16px 的正文在屏幕上横画发虚,那不是文人气是糊;
+  书卷气靠的是留白、字距与朱砂一点,不靠把正文也压成宋体。拿不到思源宋的机器退黑体,
+  **不退中易宋体**。
+- 字距宽松是关键:标题字距 0.05-0.15em,竖排时更甚——挤密的宋体就俗了。
+- 拉丁与数字选衬线(与宋体骨相一致),别混无衬线拉丁。
+
+## Layout
+
+- 大留白 + 不对称:主体偏置一侧,留白处只放一枚小印或一行小字。
+- 竖排是可用的排版语汇(标题、短句),但一图内竖排只用一处。
+- 分隔用细墨线或什么都不用;不用西式粗分割条。
+
+## Elevation & Depth
+
+宣纸没有阴影。层级来自**墨色浓淡**与**位置经营**。
+
+1. **浓墨**:ink `#2B2620` 满浓度,主标题、主体线描。
+2. **淡墨**:同一个 ink 降到 **60% 浓度**(约 `#6E6862`),注文、次级信息、辅助线描——
+   这是这个风格唯一的「层级滑杆」,不要改用第二种颜色去做层级。
+3. **朱砂一处**:通常是钤印,或题名旁的一点。**它不是「上层」,是「焦点」**;
+   全图只有一处,位置定生死。
+4. **留白即层级**(计白当黑):空的地方越大,旁边那块越重。想让一个元素更重,
+   先把它周围清空,而不是给它加底色或加框。
+
+Don't:任何让宣纸看起来有厚度的效果(投影/渐变/高光);第二处朱砂。
+
+## Shapes
+
+形状语言 = **版框与印章**:方、直、素。
+
+- **圆角恒 0**(`rounded.none`),包括图片与色块。纸上的东西是裁出来的,裁口是直的。
+- **版框**:`border.style: double` 是民国书籍的双线版框,外 2px 内 1px、两线间距 3px;
+  全图**最多一个**版框,不做嵌套框。
+- **线条**:1px 墨线实线,端点 butt。粗细变化交给线描本身的笔意(白描/木版线条),
+  不靠分档的 border-width 去模拟。
+- **印章形状**:正方或长方(阳文,朱砂底反白字)/ 正圆(阴文,朱砂线描)。二选一,不并用。
+- **允许的形状**:矩形、正圆、细直线。不用箭头、不用圆角标签、不用几何装饰件。
+- **图标**:走白描的路子——1px 墨线、端点 butt、转角直角,**不填实心**(实色朱砂只属于印章);
+  也不用圆头线条,那是屏幕的软,不是纸上的素。
+
+## Components
+
+组件语汇特殊,**不做 token 化**——这个风格里「卡片」「胶囊」这些词本身就不成立,
+以下按纸面元素描述:
+
+- **按钮**:直角方块,1px ink 描边 + 纸底 + ink 字;主操作把描边与字**一起换成 cinnabar**,
+  **不做实色填充**(实色朱砂块只属于印章)。
+- **卡片:不用卡片。** 要分区就用一条 1px 墨线,或直接留白;加底色的白盒子会立刻变成网页。
+- **输入框**:只画底部一条 1px 墨线(界画的格线),不封框、不加底色。
+- **导航/目录**:齐左或竖排的宋体条目,字距 0.12em;当前项用 cinnabar 标一个小方点或一个字,
+  不用底色条。
+- **落款区**:页脚固定一行小字 + 一枚印,是这个风格的「品牌区」,位置全站不变。
+
+## Do's and Don'ts
+
+- Don't:红金满铺、大红配明黄——那是年货,不是新中式。
+- Don't:龙凤/祥云/灯笼贴纸式元素;要用传统纹样就用细线一笔带过。
+- Don't:书法字体当正文;书法只允许出现在单个大字或印章里。
+- Don't:纯白底、冷灰底。
+- Do:印章思维——朱砂色块 + 反白小字,是全图的「落款」。
+- Do:材质感(纸纹、木版水印的边缘晕染)宁可淡到似有似无。
+
+## Composition
+
+- 一图一景:一个主体(器物/山形/植物),四周大片宣纸留白,题字与印章按书画落款位放置。
+- 插画走木版水印/白描线条,不走厚涂与 3D。
+
+## Image Prompt Templates
+
+- base: "modern Chinese literati aesthetic, warm rice-paper background (#F5F0E6), warm ink illustration (#2B2620) in fine woodblock-print linework, one small cinnabar red seal accent (#C03F2B), generous asymmetric negative space, elegant serif CJK typography with loose letter spacing, subtle paper texture, refined and restrained, Republic-era book design sensibility"
+- negative: "red and gold everywhere, dragon and phoenix clip art, lanterns, glossy 3D, thick paint, crowded layout, cold white background"
+- 注:中文字是这个风格的主角——版面里的字务必拼写正确、字距宽松;字错一处全图报废。

package/assets/design-styles/precision-mono.md

@@ -0,0 +1,156 @@
+---
+name: 精密仪表
+description: 开发者工具那种密而准的界面——发丝线分区、等宽数字对齐、4px 小圆角,没有一处多余装饰
+name_en: "Precision Mono"
+description_en: "The dense, exact interface of developer tools: hairline dividers, aligned monospaced numbers and 4px corners, with not one ornament to spare."
+suits: "工具产品"
+colors:
+  bg: "#FAFAFA"
+  surface: "#FFFFFF"
+  ink: "#0A0A0A"
+  muted: "#737373"
+  line: "#E6E6E6"
+  accent: "#2B5AE1"
+fonts:
+  latin: "'Geist', 'Schibsted Grotesk'"
+  cjk: sans
+typography:
+  headline:
+    fontSize: "24px"
+    fontWeight: 600
+    lineHeight: 1.25
+    letterSpacing: "-0.02em"
+  body:
+    fontSize: "14px"
+    fontWeight: 400
+    lineHeight: 1.55
+    measure: "76ch"
+  data:
+    latin: "'Geist Mono', 'Martian Mono'"
+    generic: "ui-monospace, monospace"
+    fontSize: "13px"
+    fontWeight: 500
+    letterSpacing: "0.06em"
+border:
+  width: "1px"
+  style: solid
+  emphasis: "1px"
+rounded:
+  sm: 4px
+  md: 6px
+spacing:
+  unit: "4px"
+  maxWidth: "1200px"
+elevation:
+  mode: flat
+  levels: "1"
+status:
+  success: "#0B7A46"
+imagery:
+  ratio: "16:9"
+  treatment: none
+  crop: hard
+icon:
+  style: line
+  strokeWidth: "1.5px"
+  linecap: butt
+  corner: sharp
+components:
+  button-primary:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.surface}"
+    typography: "{typography.body}"
+    rounded: "{rounded.sm}"
+    height: "32px"
+    padding: "12px"
+  card:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.md}"
+    padding: "16px"
+  input-field:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.sm}"
+    height: "32px"
+    padding: "8px"
+  tag:
+    backgroundColor: "{colors.bg}"
+    textColor: "{colors.muted}"
+    typography: "{typography.data}"
+    rounded: "{rounded.sm}"
+    height: "20px"
+    padding: "6px"
+---
+
+## Overview
+
+参照物(均实测过 CSS):Linear `linear.app`、Vercel `vercel.com`(Geist Sans + Geist Mono,`#FAFAFA` / `#EAEAEA` / `#0070F3`)、2xA Studio `2xa.studio`、Resend `resend.com`。
+气质是**仪表**:每个数对得齐,每条线只有 1px,信息密而不乱。它不追求好看,追求「一眼看清十二个数」——装饰预算全花在对齐和字距上。
+
+**与「瑞士网格」的分界**:瑞士是**招贴逻辑**(Helvetica、唯一的红、圆角 0、留白 40%、根本没有组件);这一套是**屏幕产品逻辑**(等宽是主音而非数据配角、发丝线到处都是、4px 圆角、表格密排、tabular 数字、状态点)。瑞士留白,它留密度。
+
+## Colors
+
+- **bg (#FAFAFA) / surface (#FFFFFF)**:近白与纯白两级,卡片浮起靠这一档差 + 一条 1px 线,不靠投影。
+- **ink (#0A0A0A)**:文字与主按钮底(bg 上 19.0:1),这套里唯一的重色。
+- **muted (#737373)**:标签、单位、次级信息(bg 上 4.54:1,刚过线)。⚠ 别再往浅调,4.5 是底不是目标。
+- **line (#E6E6E6)**:发丝线 —— 这个风格的骨架。**分区一律用它,不用底色块**。
+- **accent (#2B5AE1)**:蓝,给链接、激活态、聚焦环、图表主线(白底 5.75:1,可作文字)。⚠ **不做按钮填充面**。
+- **success (#0B7A46,在顶层 `status:` 段)**:同一支绿(色相 151°)取到可读深度(bg 上 5.2:1),状态词与 6px 圆点都用它。⚠ **不做底色块** —— 这套的分区只有 1px 线;且圆点旁永远配一个状态词,颜色不单独承担语义。
+
+## Typography
+
+- 界面文字 Geist / Schibsted Grotesk + 系统黑体(苹方 / 微软雅黑,思源黑体兜底);**所有数值一律等宽**(Geist Mono)且必须 `font-variant-numeric: tabular-nums` —— 数字会跳,定宽数位是专业感的一半。
+- 标题 24 / 正文 14,反差只有 1.7 倍。**密度就是这个风格的性格**,别把标题拉大。
+- 等宽小字 `0.06em`、字重 500,用于 ID、时间戳、版本号、指标值;字重全站封顶 600。中文没有真正的等宽族,夹在数据里的汉字兜到系统黑体(与界面文字同一套)。
+
+## Layout
+
+- **spacing 单位 4px**,阶梯 4/8/12/16/24 —— 间距值只能从这五个里选;表格行高 32-36px,单元格内边距 8/12,列宽按内容定,**数值列一律右对齐**。
+- 分区靠 1px `line` 横贯到底(整条不留边距),不靠留白也不靠色块;内容最大宽 1200px,正文行长 76ch(字号小,容得下长行)。
+
+## Elevation & Depth
+
+默认**没有层**(`flat`)。纵深靠三样替代手段,按优先级用:
+
+1. **1px 描边**:卡片、输入框、表格容器一律 `1px solid #E6E6E6`。第一手段,占九成。
+2. **明度分级**:页面 `#FAFAFA`、卡片 `#FFFFFF`。只有这两级,不设第三级。
+3. **浮层例外**:只有真正脱离文档流的东西(下拉菜单、命令面板、toast)允许 `0 1px 2px rgba(0,0,0,.04), 0 8px 16px rgba(0,0,0,.06)` —— 两段式、极淡、无扩散。
+
+Don't:给卡片加阴影。柔和大阴影卡片是 AI 模板的第一特征,一出现整套掉价;卡片的边界永远是那条 1px 线。
+
+## Shapes
+
+- **圆角上限 8px**,实际只用两档:控件 4px、卡片 6px。超过 8 就变成通用 SaaS 模板;圆角**全站统一**,同类元素不许一处 4 一处 6,写成变量别手写。
+- 线条 1px、平头、直角相交;虚线只表示「待定/占位」这一种语义。
+- 图标 1.5px 细线、方头、直角,16px 网格上绘制,与文字基线对齐。状态点 6px 正圆,是这套里唯一的圆形。
+
+## Components
+
+- **主按钮**:`ink` 实心 + 白字 + 4px 圆角 + 32px 高,一屏一个。
+- **次按钮**:白底 + 1px `line` 边 + ink 字;hover 边框换 `#0A0A0A`,**不换底色**。
+- **卡片**:白底 + 1px 边 + 6px 圆角 + 16px 内边距,**无阴影**。
+- **输入框**:与次按钮同规格;聚焦态 = 边框换 accent + 3px 外圈 `rgba(43,90,225,.14)`。
+- **标签**:bg 底 + 等宽小字 + 20px 高,密集成排,不用彩色底。
+
+## Do's and Don'ts
+
+- Do:数字全部 `tabular-nums`,**同一列必须对齐** —— 对不齐的数字表等于没做;每个数值带单位与时间口径,没有量纲的数字在这个风格里是缺陷。
+- Do:分区只用 1px `#E6E6E6`,不用底色块;圆角全站统一 4px(卡片 6px)。
+- Don't:柔和大阴影卡片(**AI 模板的第一特征**)。
+- Don't:把蓝色做成填充按钮的主色面积 —— 按钮用 `#0A0A0A` 实心,蓝留给链接、聚焦环与激活态。
+- Don't:圆角 > 8px、胶囊按钮、渐变、玻璃、emoji 图标。
+- Don't:用 `success` 色做背景块 —— 分区只有 1px 线,不用色块(见 Colors)。
+
+## Composition
+
+- 仪表盘:顶部一行关键指标(等宽大数 + 小标签),下面是表格或图表,左侧窄导航。
+- 一屏可以放很多东西,但**层级只有两级**(区块标题 + 内容),不做三级嵌套卡片。
+- 图表线 1.5px,网格线用 `line` 色且明显浅于数据线;图片硬裁 16:9,不加圆角不加边。数据要造真:量级合理、有单位、有时间戳。
+
+## Image Prompt Templates
+
+- base: "precise developer-tool interface, near-white background (#FAFAFA), white cards separated by 1px hairline borders (#E6E6E6), no shadows, small 4px corner radius, dense data table with tabular monospaced numerals, black solid primary button (#0A0A0A), blue only for links and focus states (#2B5AE1), tiny monospace labels, thin 1.5px line icons, high information density, flat and exact"
+- negative: "soft drop shadow cards, large rounded corners, pastel gradient, glassmorphism, blue filled hero buttons, decorative illustration, emoji icons, oversized whitespace"
+- 注:画面里要出现**真实的表格与数值**(带单位、带时间戳),这个风格的可信度全在数据像不像真的;中文界面补 "clean CJK sans-serif UI typography, 14px body"。

package/assets/design-styles/quiet-luxury.md

@@ -0,0 +1,163 @@
+---
+name: 静奢
+description: 巨大的衬线标题、微型全大写标签、一屏只说一件事——不装饰不发光,贵在敢空
+name_en: "Quiet Luxury"
+description_en: "Huge serif headlines, tiny all-caps labels and one idea per screen. No ornament and no glow: the luxury is in daring to leave space empty."
+suits: "品牌门面"
+colors:
+  bg: "#FFF8EF"
+  ink: "#0E0E0E"
+  accent: "#003933"
+  blush: "#EDCCBE"
+  muted: "#8E8A82"
+  line: "#E3DCD1"
+  gold: "#E2C373"
+fonts:
+  latin: "'Söhne', 'Neue Haas Grotesk', 'Host Grotesk'"
+  cjk: sans
+typography:
+  headline:
+    latin: "'Noe Display', 'Bodoni Moda'"
+    cjk: serif
+    fontSize: "72px"
+    fontWeight: 400
+    lineHeight: 1.02
+    letterSpacing: "-0.01em"
+  body:
+    fontSize: "16px"
+    fontWeight: 400
+    lineHeight: 1.65
+    measure: "52ch"
+  label:
+    fontSize: "11px"
+    fontWeight: 500
+    letterSpacing: "0.16em"
+border:
+  width: "0px"
+  style: solid
+  emphasis: "0px"
+rounded:
+  none: 0px
+spacing:
+  unit: "16px"
+  gutter: "32px"
+  margin: "64px"
+  maxWidth: "1280px"
+elevation:
+  mode: flat
+  levels: "0"
+imagery:
+  ratio: "3:4"
+  treatment: none
+  crop: full-bleed
+icon:
+  style: line
+  strokeWidth: "1px"
+  linecap: butt
+  corner: sharp
+components:
+  link-cta:
+    textColor: "{colors.ink}"
+    typography: "{typography.label}"
+    rounded: "{rounded.none}"
+    padding: "0px"
+  link-cta-hover:
+    textColor: "{colors.accent}"
+  card:
+    backgroundColor: "{colors.blush}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.none}"
+    padding: "64px"
+  input-field:
+    backgroundColor: "{colors.bg}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.none}"
+    height: "48px"
+  tag:
+    backgroundColor: "{colors.bg}"
+    textColor: "{colors.muted}"
+    typography: "{typography.label}"
+    rounded: "{rounded.none}"
+---
+
+## Overview
+
+参照物:House of Honey(houseofhoney.com,Noe Text + Neue Haas Grotesk)、Aimé Leon Dore(aimeleondore.com,Söhne + Financier Display + DIN)、Brunello Cucinelli、Cecilie Bahnsen。
+这是**品牌门面**的风格:一屏只有一张大图、一个五个字的标题、一行微型全大写标签,几乎没有段落。
+气质是「不解释」——不说服、不列卖点、不放按钮;贵不来自装饰,来自敢把六成版面留空。
+
+**与「杂志编辑」的分界**(两者最容易混):编辑风是**内容叙事**,牛皮纸底、砖红点缀、衬线排正文、长文分栏、图注与页码一应俱全,读者是来读的;静奢是**品牌门面**,衬线只出现在巨标题上、正文全部无衬线且极短、没有分栏也没有图注体系,观众是来看的。
+**判据一句话:这一屏有没有段落?有 ⇒ 用编辑风。**
+
+## Colors
+
+- **bg (#FFF8EF)**:奶白偏暖。暖来自扣掉的那点蓝,不是加黄——一偏黄就成了米色便签纸。
+- **ink (#0E0E0E)**:近黑,与 bg 18.3:1。**所有文字都用它**,没有第二种文字色。
+- **accent (#003933)**:深墨绿,**极小面积**——一条 1px 线、一个词、CTA 的 hover 色。与 bg 12.2:1 承载文字安全,但一屏最多 1-2 处。
+- **blush (#EDCCBE)**:胭脂。用法与 accent 相反,**它是拿来铺大面积的**:整块 section 底、整张图的衬底;ink 压上去 12.8:1 可读。
+- **muted (#8E8A82)**:暖灰,与 bg 只有 3.3:1,**够不上正文**——只给图注、年份、地点这类「看不清也不影响」的信息。11px 标签一律用 ink。
+- **line (#E3DCD1)**:1px 发丝线。存在感应接近于零,一屏里数得出几条线就已经多了。
+- **gold (#E2C373)**:与 bg 只有 1.6:1,**永远不能当文字色**;只做细节(一个 4px 的点、图片一角的压线),整站不用也完全成立。
+
+## Typography
+
+- **标题**:高对比现代衬线(Noe Display / Bodoni Moda,中文走系统宋体、思源宋体兜底),字重恒 400,字距 -0.01em。72px 起步,**敢上 120px**——音量全在字号,不在字重。
+- **正文**:无衬线(Söhne / Neue Haas Grotesk / Host Grotesk),16px 400。**正文永远不用衬线**,这是与编辑风分家的那一刀。
+- **label**:同正文字族、500、11px、字距 0.16em、全大写——**这是这个风格的签名**。分类、季度、产地、材质全走这一档;中文没有大写,用 0.1em 以上字距代偿。
+- 一屏只允许一种衬线。两种衬线并置(哪怕一个做标题一个做引言)立刻变成排版练习。
+- 标题与正文 4.5 倍反差(72/16),中间**不存在任何字号**。
+
+## Layout
+
+- **spacing.unit 16px**,阶梯 16 / 32 / 64 / 128——留白要夸张到「像是没排完」。
+- 左右外边距 ≥ 版心的 8%;竖构图图片两侧的白比图本身更需要保护。
+- 一屏 = 一个标题 + 一个 label + 一张大图,三件套结束。第四个元素想出现时,先删掉一个。
+- 允许不对称(图偏右、字压左下),但**绝不居中堆成轴对称**。
+
+## Elevation & Depth
+
+`elevation.mode: flat`——**任何阴影都会立刻掉价**,包括 1px 的、包括 2% 透明度的。这个风格里没有「浮起来的卡片」这个概念,层次只靠三件事:
+
+1. **图片出血**:图压满一整块,它与 bg 的边界就是最强的一道层次。
+2. **blush 色块**:整段换 blush 底,与 bg 的明度差(0.95 : 0.65)自己就分了层。
+3. **留白量差**:密处紧到 16px、松处空到 128px,疏密比就是视觉层级。
+
+Don't:阴影、毛玻璃、半透明遮罩、hover 位移、任何「浮起 / 按下」的暗示。
+
+## Shapes
+
+- **圆角恒 0**。唯一例外是图片可以到 2px(印刷裁切的手感),再多就软了。
+- **边框恒 0px**。这个风格里没有描边卡片——要分区就换底色,不要画框。
+- **线**:1px、line 色、平头端点、只走水平垂直;不用虚线、不用斜线。
+- **图标**:1px 线性、平头、直角转角、无填充;高度与 label 齐,**永远不放进圆形底里**。
+
+## Components
+
+- **CTA 不是按钮**:它是一行 label 规格的小字加 1px 下划线(`link-cta`)。hover 时字色换 accent、下划线跟着换,**位置不动**。整站没有实心按钮这种东西。
+- **卡片**:blush 实底 + 64px 内边距 + 直角,无边框无阴影;卡片里不再套卡片。
+- **输入框**:只有底部一条 1px line,没有四边框、底色、圆角;聚焦时那条线换 ink。
+- **标签**:纯文字,无底色无边框——「标签」在这里是排版位置,不是一个色块。
+
+## Do's and Don'ts
+
+- Do:一屏只允许一个标题 + 一个 label + 一张大图。
+- Do:墨绿一屏只出现 1-2 处,金色出现 0-1 处。
+- Do:图片用 3:4 或 4:5 竖构图,左右留白 ≥8%。
+- Do:文案短到极限——五个字的标题比十五个字的贵。
+- Don't:**按钮化**(实心块、胶囊、大写粗字加箭头);CTA 就是一行带下划线的小字。
+- Don't:圆角、阴影、hover 位移、渐变、任何发光。
+- Don't:同一屏用两种衬线;正文用衬线。
+- Don't:拿 gold 或 blush 当文字色(1.6:1,见 Colors)。
+- Don't:堆 logo 墙、卖点图标、客户评价——那是转化页的语言,不是门面。
+
+## Composition
+
+- 竖幅优先:一张 3:4 的图占六成版面,标题压在图**外**的空白里,label 贴在标题上方 32px。
+- 文字与图**不重叠**(这是与巴黎高定的分界):这里的高级来自两者互不打扰。
+- 页脚只有一行 label:年份、城市、一个词。
+
+## Image Prompt Templates
+
+- base: "quiet luxury brand imagery, warm off-white background (#FFF8EF), soft natural daylight from one side, minimal composition with vast negative space, single subject, matte textures — raw linen, unglazed ceramic, brushed brass, muted blush drape (#EDCCBE), 3:4 vertical crop, editorial still life, restrained and expensive"
+- negative: "glossy reflection, gold gradient, sparkle, bokeh, busy background, multiple products, drop shadow, rounded corners, saturated colors, stock photo styling, text overlay, logo"
+- 注:出图只交代「材质 + 光」两件事——写清材质(亚麻 / 未上釉陶 / 黄铜 / 丝绒)与光的方向(单侧自然光),别写形容词(高级 / 奢华 / 优雅),那些词只会换来水晶和金色渐变。