@lark-apaas/coding-steering 0.1.70 → 0.1.71

package/steering/nestjs-react-fullstack/skills/design-guide/references/flowbite.md

@@ -1,179 +0,0 @@
----
-version: alpha
-name: flowbite
-name_zh: Flowbite
-description: "教科书式 Tailwind 营销/应用风 DSM:蓝色 CTA(blue-700,hover 800) + gray-900 大标题 + 规整 8px 圆角 + Inter 字体;组件用 Flowbite canonical class 组合书写,交互一律 data-attributes 声明式(不手写 JS);暗色模式全程 dark: 前缀成对;务实、快速、可深浅切换。"
-
-colors:
-  primary: "#1d4ed8"
-  primary-hover: "#1e40af"
-  heading: "#111827"
-  foreground: "#4b5563"
-  surface-50: "#f9fafb"
-  surface-100: "#f3f4f6"
-  border: "#e5e7eb"
-  input: "#d1d5db"
-  success: "#047857"
-  danger: "#be123c"
-  warning: "#f97316"
-  badge-bg: "#dbeafe"
-  badge-text: "#1e40af"
-
-typography:
-  heading:
-    fontFamily: 'Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif'
-    fontWeight: 800
-    letterSpacing: "-0.025em"
-  body:
-    fontFamily: 'Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif'
-    fontSize: 14px
-    fontWeight: 400
-
-rounded:
-  xs: 4px
-  sm: 6px
-  default: 8px
-  base: 12px
-  lg: 16px
-
-spacing:
-  section-y: 32px
-  section-y-lg: 64px
-  card-padding: 24px
-
-components:
-  button:
-    background: "{colors.primary}"
-    description: "主按钮 canonical class:text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5(bg-blue-700 = {colors.primary}、hover = {colors.primary-hover})。"
-  button-secondary:
-    description: "次按钮:白底 border border-gray-200 text-gray-900 hover:bg-gray-100(边 = {colors.border})。"
-  input:
-    background: "{colors.surface-50}"
-    description: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5(底 = {colors.surface-50}、边 = {colors.input})。"
-  badge:
-    background: "{colors.badge-bg}"
-    color: "{colors.badge-text}"
-    description: "bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-sm(底 = {colors.badge-bg}、字 = {colors.badge-text};状态换色族)。"
-  card:
-    border: "1px solid {colors.border}"
-    description: "bg-white border border-gray-200 rounded-lg shadow-sm p-6(边 = {colors.border}、内距见 spacing.card-padding)。"
-
-anchors:
-  - id: blue-cta
-    type: token
-    desc: "主按钮/链接用品牌蓝(见 colors.primary),hover 加深;不混用多个蓝"
-  - id: tailwind-canonical-classes
-    type: pattern
-    desc: "组件用 Flowbite canonical class 组合书写,不自造与之重复的组件样式"
-  - id: rounded-language
-    type: token
-    desc: "规整圆角语言,按钮/输入/卡片统一中圆角(见 rounded.default)"
-  - id: dark-mode-pairs
-    type: pattern
-    desc: "暗色模式全程 dark: 前缀成对书写,浅深两态同时给出"
-  - id: data-attribute-interactions
-    type: component
-    desc: "Modal/Dropdown/Drawer/Tooltip 用 data-attributes 声明式,不手写 JS"
-  - id: adaptable-page-composition
-    type: pattern
-    desc: "按产品需求组合 Flowbite 组件，营销页和后台示例只提供组件用法，不固定页面骨架"
-
-gaps:
-  - "Pro 付费区块:不纳入(许可限制),开源项目禁止复制 Pro 代码"
-  - "官方另有 minimal/enterprise/playful/mono 四套主题,换主题 = 换语义变量映射;此处只给 default 主题的映射值"
-  - "暗色映射:heading dark:white、foreground dark:gray-400、边框 dark:gray-800 等 dark 侧值源以 Tailwind scale 给出,此处未逐一展开为 hex"
----
-
-## Overview
-
-教科书式的 Tailwind 营销/应用风:蓝色 CTA、gray-900 大标题、规整 8px 圆角。务实、快速、可深浅切换,单文件 HTML 原型到工程化 admin dashboard 都能覆盖。
-
-**One-liner:** 蓝 CTA + Inter 大标题 + 规整圆角的 Tailwind 教科书风。
-**Keywords:** Tailwind · 营销页 · CTA · 暗色模式 · 声明式交互
-**Analogy:** 一套 Flowbite 官方落地页 + admin dashboard:蓝按钮 + 特性卡 + 定价表。
-
-## Colors
-
-default 主题的语义层,映射到 Tailwind 调色板;换主题即换映射。
-
-- **品牌 `colors.primary` `#1d4ed8`(blue-700)** / **hover `colors.primary-hover` `#1e40af`(blue-800)** — 主按钮/链接。
-- **标题 `colors.heading` `#111827`(gray-900,dark: white)** — 大标题。
-- **正文 `colors.foreground` `#4b5563`(gray-600,dark: gray-400)** — 正文。
-- **次要底 `colors.surface-50` `#f9fafb`(gray-50)** / **`colors.surface-100` `#f3f4f6`(gray-100)** — 区块/输入底。
-- **边框 `colors.border` `#e5e7eb`(gray-200,dark: gray-800)** / **输入边 `colors.input` `#d1d5db`(gray-300)** — 结构线。
-- **成功 `colors.success` `#047857`(emerald-700)** / **危险 `colors.danger` `#be123c`(rose-700)** / **警告 `colors.warning` `#f97316`(orange-500)** — 状态色(各配 50 淡底)。
-- **徽章 `colors.badge-bg` `#dbeafe`(blue-100)** / **`colors.badge-text` `#1e40af`(blue-800)** — 状态徽章。
-
-**用色原则:** 不混用多个蓝;暗色模式全程 `dark:` 前缀成对写,浅深两态同时给出。
-
-## Typography
-
-Inter 承载全部角色,大标题 font-extrabold + tracking-tight,中文用 Noto Sans SC 兜底。
-
-- **@import(HARD REQUIREMENT / 禁止替换,原样写入全局样式首行):**
-  `@import url('https://miaoda.feishu.cn/fonts/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');`
-- **字体栈:** `Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif` —— 拉丁用 Inter(几何无衬线),中文用 Noto Sans SC(气质相近),系统字体末位保底。
-
-| 角色 | Size | Weight | Letter-spacing | 用法 |
-|---|---|---|---|---|
-| heading | text-4xl~5xl | 800(extrabold) | -0.025em(tracking-tight) | Hero 大标题 |
-| body | 14px(text-sm) | 400 | — | 正文 |
-
-**字体规则:**
-- Hero 标题用 `text-4xl~5xl font-extrabold tracking-tight`。
-- 中文标题回退到 Noto Sans SC 900 时 line-height ≥1.05、正文 ≥1.5,中文场景负字距清零(tracking-tight 仅作用于拉丁)。
-
-## Layout
-
-按实际任务组合 Flowbite 组件，节区纵向留白规整。
-
-- **营销页与后台:** Navbar、Hero、特性卡、定价、FAQ、Footer、侧栏和卡片栅格都是可选组件，不要求成套出现或保持示例顺序。
-- **节区间距:** 纵向 `py-8 lg:py-16`(见 spacing.section-y / spacing.section-y-lg)。
-- **卡片内距:** `p-6`(见 spacing.card-padding)。
-
-## Elevation & Depth
-
-层级靠卡片 `shadow-sm` 轻投影 + `colors.border` 1px 描边 + `colors.surface-50/100` 浅底分区;不堆叠重投影,深度克制。
-
-## Shapes
-
-规整圆角语言,按钮/输入/卡片统一中圆角。
-
-- **Radius:** xs 4px(rounded.xs) · sm 6px(rounded.sm) · default 8px(rounded.default) · base 12px(rounded.base) · lg 16px(rounded.lg)。
-- **Borders:** 1px `colors.border`(卡片/次按钮),输入用 `colors.input`。
-
-## Components
-
-canonical class 写法,原样保留:
-
-- **button(主):** `text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5`(bg-blue-700 = {colors.primary}、hover = {colors.primary-hover})。
-- **button-secondary(次):** 白底 `border border-gray-200 text-gray-900 hover:bg-gray-100`(边 = {colors.border})。
-- **input:** `bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5`(底 = {colors.surface-50}、边 = {colors.input})。
-- **badge:** `bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-sm`(底 = {colors.badge-bg}、字 = {colors.badge-text};状态换色族)。
-- **card:** `bg-white border border-gray-200 rounded-lg shadow-sm p-6`(边 = {colors.border}、内距见 spacing.card-padding)。
-- **交互组件(Modal/Dropdown/Drawer/Tooltip):** 用 data-attributes(`data-modal-target` 等)声明式驱动,不手写 JS。
-
-## Do's and Don'ts
-
-**Do:**
-- 暗色模式全程 `dark:` 前缀成对写。
-- 节区纵向 `py-16`。
-- 图标用 Flowbite Icons / Heroicons。
-
-**Don't:**
-- 别自造与 Flowbite 重复的组件样式。
-- 别把 Pro 区块代码复制进开源项目(付费许可)。
-- 别混用多个蓝。
-
-## Hard Rules
-
-- 组件优先用 Flowbite canonical class 组合,禁止自造与之重复的组件样式。
-- 交互组件(Modal/Dropdown/Drawer/Tooltip)一律 data-attributes 声明式,禁止手写 JS。
-- 暗色模式必须 `dark:` 前缀成对书写,浅深两态齐全。
-- 品牌蓝只用 `colors.primary` 一种,禁止一页混用多个蓝。
-- 禁止把 Pro 付费区块代码复制进开源(MIT)项目。
-
-## Exceptions
-
-- 官方另有 minimal / enterprise / playful / mono 四套主题:切换主题即整体替换 `colors` 语义映射,不视为对 default 主题的违例。
-- 单文件 HTML 原型允许直接用 CDN 两行(jsdelivr flowbite.min.css + flowbite.min.js)运行,免 npm 构建。

package/steering/nestjs-react-fullstack/skills/design-guide/references/frontend-design.md

@@ -1,66 +0,0 @@
-# 从零定方向的方法（分支 C）
-
-预置风格里没有合适的，自己想一个方向时读本文。定位与交付标准、「让设计扎根于主题」在 `SKILL.md` 正文里，本文接着往下讲怎么把方向想出来并落地。
-
-**已有更具体的视觉权威时，以那个权威为准**——用户点名的风格、附件里的设计稿、匹配上的预置风格，都优先于本文的方法。
-
-## 视觉方向
-
-在选定颜色或组件之前，先在思考中定下方向。填满四个槽位——每一个都要取自*这个*主题：
-
-- **世界（World）**——这个应用属于哪个世界？去主题自己的世界里找：它的材质、工具与仪器、特有的器物、行话与语汇。
-- **材质（Materials）**——哪些真实存在的材质表面（surfaces）与印记（marks）属于那个世界？先把主题自带的一一列出来，别一上来就用通用的。
-- **配色（Palette）**——哪些颜色承担语义或品牌职责，哪些是中性的支撑色，哪一个唯一的强调色赢得注意力？
-- **签名元素（Signature）**——整个应用靠它被记住的那一个手法。它必须只可能属于这个主题；一个换到下份 brief 也能复用的签名元素，是默认值，不是选择。
-
-风格不是版式排完后再涂上去的装饰。这个方向决定字体排印、间距、图表处理、图像质感、章节节奏、边框、图标风格，以及哪些组件值得强调。
-
-## 设计原则
-
-对于应用设计，首屏或核心工作区就是整个应用的论点。开场就亮出主题世界里最具特征的东西，形式因主题而定：一句大标题、一组关键数据、一张图、一段动画、一个实时 demo、一个核心操作或一个交互瞬间。选择要经过深思：「大数字 + 小标签 + 辅助统计数据 + 渐变点缀」是模板答案，只有当它确实是最佳选项时才用。
-
-字体排印承载应用的性格。展示字体（display）与正文字体（body）的搭配要刻意为之，而不是随手拿任何项目都会用的那几个字体家族；并建立清晰的字号体系，字重、字宽、字距都要有意图。让字体处理本身成为设计中令人记住的一部分，而不是承载内容的中性载体。替换 `client/src/tailwind-theme.css` 的 `--font-sans` / `--font-serif` 时，**保留模板原有的中文与 emoji 回退链**（`PingFang SC`、`Microsoft Yahei`、`Apple Color Emoji` 那串），只在最前面插入选定的字体——删掉回退链会让中文掉字形。
-
-结构即信息。结构件——编号、眉标、分隔线、标签——应当编码内容中真实存在的信息，而不是装饰内容。很多千篇一律的设计都用编号标记（01 / 02 / 03），但只有当内容真的是一个序列时——比如真实的流程、或顺序本身携带用户所需信息的类型化时间线——编号才成立。在采用编号标记这类选择之前，先质疑它们是否真的说得通。
-
-有意识地运用动效。想清楚动画是否、以及在哪里能服务主题：页面加载序列、滚动触发的揭示、hover 微交互、环境氛围。一个经过编排的时刻通常比散落的零星特效更有力；按视觉方向的需要来选。但有时少即是多——多余的动画会加重「这个设计是 AI 生成的」的观感。
-
-让复杂度匹配愿景。极繁方向需要精雕细琢的执行；极简方向需要间距、字体与细节上的精准。优雅就是把选定的愿景执行到位。
-
-认真对待文字内容。设计 brief 往往不含真实内容，文案要由你来写。文案带来的模板感不亚于设计本身。更多指引见下文关于写作的章节。
-
-## 流程：头脑风暴、探索、规划、评审、构建、再评审
-
-先校准现状：当下的 AI 生成设计集中在四种长相上：(1) 暖奶油色背景（接近 #F4F1EA）+ 高对比衬线展示字体 + 陶土色（terracotta）强调色；(2) 近黑背景 + 单一亮色强调——酸性绿（acid green）或朱红（vermilion）；(3) 大报（broadsheet）式版面——发丝线（hairline rules）、零 border-radius、报纸般的密集分栏；(4) 深色底「科技感」版面——紫蓝渐变、发光光晕（glow）、半透明玻璃拟态（glassmorphism）卡片，科技 / AI / 数据类 brief 上尤其高发。四者对某些 brief 都站得住脚，但它们是默认值而非选择，而且不看主题就冒出来。凡是 brief 钉死了视觉方向的地方，严格照办——brief 自己的话始终优先，包括它点名要这四种长相之一的时候。凡是 brief 留出自由度的维度，别把这份自由花在这四个默认值上。就像受雇的人类设计师一样，往往要在「做自己擅长的」与「把每个项目当作试验和学习的机会」之间小心权衡。
-
-> 这份校准清单**只在你自己从零想方向时用**。预置风格里有几个正落在这四种长相里（陶色书卷、酸性暗黑与翡翠光晕、雅致纪事、紫夜星轨与暗黑毛玻璃）——那是从候选里挑出来、写成完整规格的外部权威，不是下意识输出。匹配上了就照规格执行，不适用本清单。
-
-分两遍做。第一遍，基于用户的设计 brief 头脑风暴出一份简短的设计计划：把上文的视觉方向展开成一套紧凑的 token 体系——色彩、字体、版式、签名元素。色彩：用 4–6 个命名的 hex 值描述配色。字体：至少两种角色的字体（一款有性格、克制使用的展示字体，一款与之互补的正文字体，必要时再加一款用于图注或数据的功能字体）。版式：一个版式概念，用一句话的文字描述加 ASCII 线框图来构思和比较。签名元素：这个应用将被记住的那个唯一独特元素，以恰当的方式体现 brief。
-
-然后在动手构建前，对照 brief 复查这份计划：如果其中任何部分读起来像你对任何同类应用都会产出的通用默认（在心里过一遍相似的 prompt，看你是否会落到差不多的地方），而不是为这份 brief 专门做出的选择——就修订那部分，说明你改了什么、为什么改。只有在确认设计计划具备相对独特性之后，才开始写代码，严格遵循修订后的计划，让每一个颜色和字体决策都从计划中推导出来。
-
-写代码时，注意组织好 CSS 选择器的优先级（specificity）。很容易写出相互抵消的 CSS 类（尤其是 `.section` 这类分区级选择器与 `.cta` 这类元素级选择器之间）。区块之间的 padding/margin 上经常出这种问题。
-
-尽量把这些规划与迭代放在思考中完成，只在你有较高把握能让用户眼前一亮时，才把想法拿给用户看。
-
-## 克制与自我评审
-
-把大胆花在一个地方。让签名元素成为唯一被记住的东西，它周围的一切保持安静、克制，砍掉任何不服务于 brief 的装饰。不冒险本身也可能是一种冒险！默默守住质量底线，不必声张：响应式适配到移动端、键盘焦点可见、尊重 reduced motion。边构建边评审自己的作品——读你写出的代码，在脑子里过一遍它渲染成什么样。想想香奈儿的忠告：出门前照照镜子，摘掉一件配饰。人类创作者有记忆，总在尝试新东西；如果你有地方快速记下自己试过什么，会对后续迭代有帮助。
-
-## 再谈设计中的写作
-
-文字出现在设计里只有一个理由：让设计更易理解，从而更易使用。文字是设计材料，不是装饰。对文案投入的心思，要和对间距、色彩投入的一样多。落笔之前，先问这个设计需要说什么、怎么说最能帮人在这段体验里找到方向。
-
-站在屏幕另一侧的最终用户角度来写。以人们能控制、能认出的东西命名，绝不以系统的实现方式命名。用户管理的是「通知」，不是「webhook 配置」。用平实的语言描述某物做什么，而不是推销它。具体始终胜过抖机灵。
-
-默认使用主动语态。一个控件应当准确说明使用它时会发生什么：说 "Save changes"，而不是 "Submit"。同一个动作在整条流程中保持同名：写着 "Publish" 的按钮，产生的 toast 就写 "Published"。界面的词汇表就是用户穿行产品时的路标。连贯与一致是人们认路的方式。
-
-把失败与空态当作指路的时机，而不是渲染情绪的时机。解释出了什么问题、怎么修复，用界面的口吻而非某个人的口吻。错误提示不道歉，也绝不对发生了什么含糊其辞。空屏是一份行动邀请。
-
-语域要像对话一样自然，并经过调校：动词平实、sentence case（句首大写）、没有废话，语气与品牌和受众匹配。让每个元素只做一件事：标签就是标注，示例就是演示，没有元素悄悄身兼二职。
-
-## 落盘
-
-把实际色值、字体与签名元素所需的 token 落入 `client/src/tailwind-theme.css`，并让后续组件真实消费这些选择。同时按 `SKILL.md` 定义的格式在 `AGENTS.md` 写一行「自定义」。
-
-**不要把本文的方法、槽位名或流程整段抄进产出文件。** 产出里只应出现为这个应用做出的具体选择。

package/steering/nestjs-react-fullstack/skills/design-guide/references/handwritten-sketch.md

@@ -1,215 +0,0 @@
----
-version: alpha
-name: handwritten-sketch
-name_zh: 手绘草稿
-description: 手绘白板笔记风——米黄纸张底(圆点网格纹理)上散落白色卡片,卡片一律有机不规则 wobbly 圆角+3px 墨黑粗边框+纯偏移硬阴影(无模糊),配 Kalam(标题)/Patrick Hand(正文)手写体、透明胶带/图钉/别针物理装饰与卡片微旋转(±0.5~2deg 奇偶交替);标记笔红/钢笔蓝/便利贴黄点缀,黑板反色区块作全页唯一对比锚点。亲和、创意、手工感。
-colors:
-  background: "#fdfbf7"
-  card: "#ffffff"
-  muted: "#e5e0d8"
-  foreground: "#2d2d2d"
-  border: "#2d2d2d"
-  muted-foreground: "rgba(45,45,45,0.6)"
-  primary: "#ff4d4d"
-  primary-foreground: "#ffffff"
-  pen-blue: "#2d5da1"
-  postit-yellow: "#fff9c4"
-  highlight-bg: "#fef9c3"
-  success: "#16a34a"
-typography:
-  marker:
-    fontFamily: 'Kalam, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", cursive'
-    fontWeight: 700
-    usage: 标题/强调标记(Tailwind font-marker)
-  hand:
-    fontFamily: '"Patrick Hand", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", cursive'
-    usage: 正文/描述/列表(Tailwind font-hand)
-rounded:
-  wobbly-1: "255px 15px 225px 15px / 15px 225px 15px 255px"
-  wobbly-2: "20px 225px 15px 255px / 255px 15px 225px 15px"
-  wobbly-3: "15px 225px 15px 255px / 255px 15px 225px 15px"
-  wobbly-4: "225px 15px 225px 15px / 15px 225px 15px 255px"
-  badge: 9999px
-  postit: 8px
-spacing:
-  section-gap: 80px
-  grid-gap: 24px~32px
-  grid-gap-lg: 48px
-  container-max: 1024px
-  container-px: 24px
-  card-padding: 24px~48px
-  page-bottom: 80px
-components:
-  wobbly-card:
-    border: "3px solid {colors.border}"
-    borderRadius: "{rounded.wobbly-1}(四组预设按 index 轮换)"
-    boxShadow: "4px 4px 0px 0px {colors.foreground}"
-    transform: rotate(±0.5~2deg,index 奇偶交替)
-    variants: "white={colors.card}底 | yellow={colors.postit-yellow}底 | black={colors.foreground}底白字 | blue={colors.pen-blue}底白字"
-    decoration: tape(透明胶带)/tack(红图钉)/none
-  section-header:
-    layout: flex items-center gap-3 mb-8
-    badge: "{colors.primary} 或 {colors.pen-blue} 底白字图标,border-2 {colors.border},rounded-full,shadow 2px 2px 0 {colors.foreground},rotate(±1~3deg)"
-    title: "text-4xl font-marker,波浪下划线 decoration-wavy decoration-2 underline-offset-4,{colors.primary} / {colors.pen-blue} 交替"
-  kpi-card:
-    base: "wobbly-card p-6,hover:-translate-y-1 hover:shadow(8px 8px 0 {colors.foreground})"
-    value: "text-5xl font-marker {colors.primary}"
-    old-value: "text-lg font-hand line-through,foreground 40% 透明度"
-    mini-chart: "底部迷你水平条形图,border-t-2 dashed 分隔,h-24"
-  feature-card:
-    header: "muted/30 底 p-4,border-b-2 dashed {colors.border},圆形图标徽章"
-    keyword-highlight: "{colors.highlight-bg} px-1"
-    tag: "bg-white border-2 {colors.border} wobbly 圆角,hover:-rotate-2"
-  roadmap-card:
-    connector: "阶段间垂直连接线 w-1 {colors.foreground}"
-    priority: "P0={colors.primary}底白字 | P1={colors.postit-yellow}底墨字,rounded-full rotate-2"
-    deadline: "font-hand {colors.pen-blue},bg-white border-2 {colors.border} -rotate-1"
-  chalkboard-block:
-    base: "wobbly-card variant=black,p-8~12,rotate(1deg),圆点 SVG 纹理 opacity 0.10 叠加"
-    keyword: "{colors.postit-yellow} 波浪下划线"
-    note: 每页最多一处
-  charts:
-    palette: "{colors.primary} {colors.muted} {colors.pen-blue} {colors.postit-yellow}"
-    container: "透明背景继承卡片底色,border-t-2 dashed 分隔,迷你内嵌 h-24(96px)"
-    tooltip: "{colors.postit-yellow}底,2px {colors.border}边框,硬阴影 4px 4px 0 {colors.foreground},圆角 10px"
-    axis: "轴标签 Patrick Hand 14px {colors.muted-foreground},网格线 {colors.muted} 虚线,轴刻度隐藏"
-    legend: "Patrick Hand 14px {colors.foreground},icon=roundRect 14×10,itemGap 16"
-anchors:
-  - id: wobbly-radius
-    type: pattern
-    desc: 全部卡片有机不规则圆角(rounded 四组 wobbly 预设按 index 轮换),每张卡片形态各异如手撕纸片
-  - id: hard-shadow-ink-border
-    type: token
-    desc: 纯偏移无模糊硬阴影(见 components.wobbly-card.boxShadow)配粗墨线边框(colors.border),平面插画式深度
-  - id: handwriting-type
-    type: token
-    desc: 标题 Kalam+正文 Patrick Hand 全页手写体(见 typography),无任何无衬线体
-  - id: physical-decorations
-    type: component
-    desc: 透明胶带/红图钉/别针装饰散布卡片顶部,每 Section 一至两处
-  - id: micro-rotation
-    type: pattern
-    desc: 所有卡片微旋转,index 奇偶交替正负方向,白板随意粘贴感
-  - id: dot-grid-paper
-    type: pattern
-    desc: 米黄纸张底色(colors.background)叠加圆点网格纹理(radial-gradient,间距见正文),整页如牛皮纸白板
-  - id: chalkboard-contrast
-    type: component
-    desc: 深色黑板反色区块(components.chalkboard-block)作全页唯一视觉对比锚点
-gaps:
-  - 无 deck 画布/幻灯片专属排版规格(源为单页纵向滚动白板布局,幻灯片场景沿用同一体系)
-  - 无暗色模式定义
-  - 无表单控件(input/select 等)规范
-exceptions:
-  - 痛点便签用常规 8px 圆角(rounded.postit)与虚线边框,是唯一非 wobbly 圆角的卡片
-  - 圆形徽章/优先级标签用全圆(rounded.badge)
-  - 语义色 colors.success 仅用于成功状态图标,不入主色板
----
-
-## Overview
-
-手绘白板笔记 × 便利贴质感 × 有机不规则形态。模拟在大白板/牛皮纸上自由排列的笔记卡片，各内容组可用「图标徽章+波浪下划线大字标题」划分，并以宽松间距营造自然散落的节奏。情绪基调:亲和、创意、手工感、轻松自由。
-
-## Colors
-
-| 角色 | 值 | 用法 |
-|-----|-----|-----|
-| background | {colors.background} | 页面纸张背景,叠加圆点网格纹理 |
-| card | {colors.card} | 卡片白色底;黑板区块上的粉笔白文字也用这个白色值 |
-| muted | {colors.muted} | 次级背景、网格点、分隔区域、灰底标签 |
-| foreground | {colors.foreground} | 墨水黑:主要文字、硬阴影;黑板区块反转为底色 |
-| border | {colors.border} | 墨水黑粗边框与描边(与 foreground 同值) |
-| muted-foreground | {colors.muted-foreground} | 次要文字、描述、坐标轴标签 |
-| primary | {colors.primary} | 标记笔红:强调数值、重点标记、图钉;每屏 1-2 处 |
-| primary-foreground | {colors.primary-foreground} | 压在 primary 红底上的白字(P0 标签、文字选中) |
-| pen-blue | {colors.pen-blue} | 钢笔蓝:链接、标签、辅助强调、工时数值 |
-| postit-yellow | {colors.postit-yellow} | 便利贴黄:高亮卡片背景、Tooltip 背景 |
-| highlight-bg | {colors.highlight-bg} | 行内关键词底色标记 |
-| success | {colors.success} | 成功状态图标(仅此用途) |
-
-文字选中色:`selection:bg-primary selection:text-white`。
-
-## Typography
-
-全局样式首行原样写入(HARD REQUIREMENT,禁止替换):
-
-```css
-@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&family=Patrick+Hand&display=swap');
-```
-
-Kalam/Patrick Hand 为拉丁手写体,无中文字形,fontFamily 已含 CJK 兜底(PingFang SC/Microsoft YaHei/Noto Sans SC,系统字体无需 @import)。
-
-| 层级 | 样式(Tailwind) | 颜色 |
-|-----|-----|-----|
-| 页面主标题 | text-3xl font-marker font-bold tracking-wide | foreground |
-| Section 标题 | text-4xl font-marker font-bold + 波浪下划线(decoration-wavy decoration-2 underline-offset-4,{colors.primary} / {colors.pen-blue} 交替) | foreground |
-| 卡片标题 | text-2xl font-marker font-bold | foreground |
-| 列表项标题 | text-xl font-marker font-bold | foreground |
-| KPI 数值 | text-5xl font-marker font-bold | primary |
-| KPI 旧值 | text-lg font-hand line-through decoration-2 | foreground 40% |
-| 正文描述 | text-lg font-hand leading-relaxed | foreground 70% |
-| 标签/分类 | text-sm font-bold uppercase tracking-widest | foreground 50% |
-| 副标题 | text-lg font-hand | foreground 60% |
-| 辅助小字 | text-sm font-hand | foreground 50% |
-
-## Layout
-
-- 内容容器:max-w-5xl(1024px),px-6;Section 间 space-y-20(80px);页底 pb-20。
-- 网格 gap-6~gap-8(24~32px),大组件 gap-12(48px);卡片内边距 p-6 或 p-8 md:p-12。
-- 标题、导航或状态区若存在，可使用白色 wobbly 卡片、胶带装饰和轻微旋转；是否固定以及放置位置由实际交互决定。
-- 痛点便签、指标卡、功能卡、路线图和黑板区块均是可选视觉组件，不构成固定页面顺序，也不要求为无关内容补齐。
-- 响应式按卡片内容和任务优先级减少列数；窄屏避免装饰遮挡文字，并适当缩小内边距。
-- 滚动条:宽 12px,轨道 background 色,滑块 foreground 色+3px background 色边框+20px 圆角。
-
-## Elevation & Depth
-
-硬阴影三档,全部纯偏移 0 模糊,颜色一律 foreground:
-
-| 档位 | 值 |
-|-----|-----|
-| small | 2px 2px 0px 0px |
-| 标准(hard) | 4px 4px 0px 0px |
-| extra-large | 8px 8px 0px 0px |
-
-层次感 = 粗墨线边框 + 硬阴影 + 微旋转,不用模糊阴影/渐变。Hover 交互:KPI 卡片上浮(-translate-y-1 → xl 阴影,300ms);列表项右移(translate-x-1,阴影消失,边框变 primary);标签 hover:-rotate-2;图标 group-hover rotate-12 或 scale-110;分组标题 hover 变 pen-blue 或 primary。
-
-## Shapes
-
-- 卡片圆角一律 wobbly 四组预设轮换(见 frontmatter rounded);标签/tag 同 wobbly-1;圆形徽章全圆;痛点便签 8px(唯一例外)。
-- 边框语言:全局卡片 3px 实线 border;卡片内分区 2px 虚线;列表项 2px 实线;表格行分隔 1px 浅虚线(border 20%);页脚 4px 粗虚线;痛点便签 2px 虚线(primary 或 border)。
-- 装饰元素:透明胶带(absolute -top-3 居中,w-24 h-6,灰 30% 透明+backdrop-blur,rotate-1)、图钉(w-4 h-4 圆点,primary 底+2px border 边)、别针(lucide Pin 图标,fill primary,rotate-12,卡片右上角)、圆点背景纹理(radial-gradient,muted 色 1px 点,24px 间距)、黑板纹理(SVG 圆点 pattern,opacity 0.10)、波浪下划线(Section 标题)。
-- 动画:transition-all duration-300(卡片)/transition-transform(标签、图标),无入场动画定义。
-
-## Components
-
-核心组件规格见 frontmatter components(wobbly-card / section-header / kpi-card / feature-card / roadmap-card / chalkboard-block / charts)。补充细节:
-
-- **WobblyCard**:所有卡片的基座。variant=black 时阴影升级为 extra-large 档。
-- **KPI 卡片**:顶部标题(左)+归属标签(右,-rotate-2 白底小标签),中部大数值+单位+删除线旧值+描述,底部虚线分隔迷你条形图。
-- **功能卡片**:卡片头 muted 30% 底+虚线下边框,卡片体 p-6 space-y-6,小标题带左侧 {colors.primary} 圆点标记,列表项左侧 ArrowRight 图标(primary,strokeWidth=3)。
-- **路线图表格**:表头 font-marker foreground 60% 下边框 2px;行 font-hand text-lg,hover 淡黄底;复选框 w-5 h-5 2px border 边框;负责人标签 muted 30% 底;工时 pen-blue 加粗右对齐。
-- **图表(ECharts)**:序列色按 charts.palette 顺序;水平条形用 yAxis category+xAxis value(符合手绘阅读习惯);折线 smooth+areaStyle opacity 0.08;柱状 barWidth 32+不对称圆角(4/10/10/4)+2px border 描边;饼图环形 40%~65%+2px border 描边;雷达/散点同样 muted 网格+border 描边。
-- **页脚**:4px 粗虚线上边框,居中引言(font-marker text-3xl,hover:rotate-2),primary 20% 圆条下划线装饰,副文字 hand 体 foreground 50%。
-
-## Do's and Don'ts
-
-- 微旋转通过 index 奇偶切换正负方向,保持视觉韵律;幅度 ±0.5~2deg,不要超过 3deg。
-- 装饰元素(胶带/图钉/别针)是点睛之笔:每个 Section 1~2 处,过度堆砌会削弱自然随意感。
-- 扩展新组件时延续 wobbly 圆角预设轮换模式。
-- 大面积暖白底中插入黑板反色区块可打断视觉疲劳,建议作对比锚点使用。
-
-## Hard Rules
-
-- 全部文字使用 Kalam(标题)/Patrick Hand(正文)手写体,禁止混入其他无衬线/衬线体(CJK 兜底字体除外)。
-- 字体 @import 必须原样写入全局样式首行,禁止替换或省略(HARD REQUIREMENT)。
-- 所有阴影必须纯偏移硬阴影(0 模糊,foreground 色),禁止 blur 阴影。
-- 卡片圆角必须使用 wobbly 四组预设(rounded.wobbly-1~4)轮换,禁止常规 rounded-* 类(Exceptions 列明的除外)。
-- 黑板反色区块每页最多一处。
-- 卡片必须带 3px border 实线边框,禁止无边框卡片。
-
-## Exceptions
-
-- 痛点便签:常规 8px 圆角+2px 虚线边框(primary 或 border),是唯一非 wobbly 圆角卡片。
-- 圆形图标徽章/优先级标签/滚动条滑块:全圆或 20px 常规圆角。
-- success 绿仅限成功状态图标,不得用于装饰或强调。
-- 透明胶带装饰自带 backdrop-blur,是唯一允许的模糊效果(不属于阴影)。