@bovinphang/frontend-craft 2.6.0 → 2.7.0

package/skills/fec-ui-design/SKILL.md

@@ -20,33 +20,44 @@ description: Use when building, reviewing, or improving frontend UI that needs p
    - 判断这是日常高频工具、营销展示、内容阅读、可视化探索、游戏，还是配置/管理后台。
    - 如果已有 Figma、Sketch、MasterGo、Pixso、墨刀、摹客或截图是事实来源，优先还原设计上下文，不自行发明方向。
 
-2. 定义审美主张
+2. 读取设计语境
+   - 在决定布局、色彩、字体或动效前，先写出一行设计读取：页面类型、目标受众、主要任务、品牌约束和可信赖感来源。
+   - 判断当前界面是视觉型网站、作品/品牌展示、产品营销、工具工作区、数据密集界面、移动原生流程，还是设计稿还原任务。
+   - 如果 brief 有明显分歧，例如“极简但强烈实验性”，只问一个会改变方向的问题；否则基于上下文做出明确选择。
+   - 受监管、公共服务、医疗、金融、儿童或强可访问性场景优先稳定、清晰和可恢复，不为审美冒险牺牲可用性。
+
+3. 定义审美主张
    - 写出目标用户、使用场景、可信赖感来源和一个可被记住的视觉锚点。
    - 视觉锚点可以来自信息结构、真实媒体、数据形态、行业材质、字体性格、交互节奏或空间组织，而不是空泛装饰。
    - 表现力必须服务业务语境：工具型界面重效率和稳定，展示型页面重主体识别和记忆点。
-   - 为页面类型设定设计拨盘：信息密度、视觉张力、动效强度、内容说服力和媒体真实性；这些拨盘必须随任务变化，而不是沿用同一套模板。
+   - 为页面类型设定设计拨盘：视觉张力、动效强度、信息密度、媒体真实性和内容说服力；这些拨盘必须随任务变化，而不是沿用同一套模板。
+   - 工具型和数据型界面默认提高信息密度、降低装饰动效；营销、作品集和品牌页可以提高视觉张力，但仍要保证首屏任务、主体和 CTA 可见。
+   - 设计拨盘用于约束实现选择：高视觉张力不等于混乱排版，高动效强度不等于滚动劫持，高媒体真实性不等于堆 stock 氛围图。
 
-3. 生成或读取设计系统
+4. 生成或读取设计系统
    - 若项目还没有设计系统，可运行 `node skills/fec-ui-design/scripts/design-system.mjs "<product audience tone>" --project "<name>"` 生成建议。
    - 若需要跨会话复用，使用 `--persist` 生成 `design-system/<project>/MASTER.md`；页面差异用 `--page <page>` 写入 `pages/<page>.md`。
    - 构建具体页面时先读页面 override，再读 Master；页面规则只覆盖差异，不复制全量设计系统。
 
-4. 建立首屏与视觉层级
+5. 建立首屏与视觉层级
    - 工具型界面：首屏直接呈现核心工作区、列表、表格、画布或编辑器。
    - 落地页：H1 使用品牌、产品、地点、人名或明确品类，价值说明放在辅助文案。
    - 产品/对象页：首屏必须可见真实产品、对象、状态或可检查媒体。
    - 首屏应留下一个明确记忆点，但不能遮挡核心任务、导航和状态反馈。
    - 营销和产品页需要先写清受众、痛点、承诺、证据和行动入口；文案结构服务转化，但不使用夸张、空泛或不可验证的声明。
+   - 视觉型页面的首屏不能只是文字、渐变和装饰物；需要真实产品、人物、空间、品牌应用、数据状态或可检查的生成资产承担主体信息。
+   - 导航在桌面端应保持单行且高度克制；CTA 文案保持短而清楚，桌面端不应换成多行按钮。
 
-5. 组织视觉语言
+6. 组织视觉语言
    - 字体：优先沿用项目字体体系；若任务允许建立新方向，选择能表达产品性格的标题/正文字体组合，并保证可读性。
    - 色彩：明确主色、功能色、中性色和强调色的角色，避免所有元素平均用力。
    - 空间：根据任务选择高密度、留白、非对称、分栏、画布式或编辑器式布局，不套用固定卡片模板。
    - 动效：只为页面入场、层级展开、状态确认、错误反馈和重点引导建立节奏，并尊重 `prefers-reduced-motion`。
    - 媒体：优先使用真实产品、真实状态、真实图表、可检查截图或本地生成资产；不要用模糊氛围图、占位 URL 或无关插画替代主体信息。
    - 图表：先判断数据任务是趋势、比较、构成、分布还是流程，再选择图表，不把所有数据都做成卡片或饼图。
+   - 视觉参考：没有权威设计稿且页面视觉质量是核心目标时，可先生成或收集分区级参考图，再从图中提取布局、层级、色彩和媒体策略；不要把整站压成一个不可读长图。
 
-6. 对齐设计系统、组件与 token
+7. 对齐设计系统、组件与 token
    - 先复用项目已有组件、token、图标库、路由和布局约定。
    - 缺少 token 时集中补齐或明确记录，不要在多个组件里散落硬编码。
    - 复杂 UI 在实现前写出复用组件、新建组件、响应式策略和状态覆盖。
@@ -54,15 +65,18 @@ description: Use when building, reviewing, or improving frontend UI that needs p
    - Tailwind 专项 token、variant、dark mode 和 class 治理分流到 Tailwind 设计系统工作流；跨设备布局、容器查询和触摸目标分流到响应式布局工作流。
    - 组件 API 应区分基础组件、业务组件和页面私有组件；避免让单个 `variant` 同时承担语义、尺寸、密度和权限含义。
 
-7. 打磨几何、文本和状态
+8. 打磨几何、文本和状态
    - 嵌套圆角遵循“外层圆角约等于内层圆角 + 间距”的光学关系。
    - 非对称图标、播放三角、箭头、星标等需要按视觉中心微调。
    - 标题和短文本可使用 `text-wrap: balance` 或 `text-wrap: pretty`。
    - 表格、价格、计数器、计时器使用 `font-variant-numeric: tabular-nums`。
    - 小控件点击区域至少 40x40px，空间允许时优先 44x44px。
    - focus ring 用于键盘定位，hover/active 用于鼠标反馈，disabled 不只靠透明度表达。
+   - 不在连续多个区块重复同一种三卡片、左右交错或大标题加右侧说明段落；每个区块的布局服务该区块的具体信息任务。
+   - Bento 和 feature grid 的格子数量必须由真实内容决定，不用空格子补构图；多格网格至少有明确主次、媒体或状态差异。
+   - 小型 uppercase eyebrow 要克制使用，不能成为每个区块的节奏拐杖。
 
-8. 验证设计结果
+9. 验证设计结果
    - 检查 loading、empty、error、disabled、hover、focus、selected 状态。
    - 在 mobile(375px)、tablet(768px)、desktop(1440px) 检查文案是否溢出或遮挡。
    - 对依赖图片、图表、画布或 3D 的界面，确认资源真实渲染且承担主体信息。
@@ -70,11 +84,14 @@ description: Use when building, reviewing, or improving frontend UI that needs p
    - 检查首屏是否同时具备任务入口、主体识别、可信证据和下一屏内容线索；若只剩装饰，应回到信息架构重做。
    - 对生产级控件补齐 hover、active、focus-visible、disabled、loading、selected、invalid 和 skeleton 状态。
    - 对仪表盘、表格、编辑器和配置台检查扫描路径、密度、固定尺寸和重复使用时的疲劳感。
+   - 对营销页、作品集和品牌页检查首屏是否适配常见小笔记本高度，导航是否单行，CTA 是否对比合格且不换行。
+   - 复核是否存在连续三段以上相同 section 结构、重复 zigzag、重复三卡片、卡片套卡片、假截图或没有主体信息的视觉资产。
 
 ## Constraints
 
 - 不把工具型应用做成营销落地页；首屏应是可用工作区。
 - 不用通用紫色渐变、装饰光斑、堆叠卡片或空泛 hero 作为默认方案。
+- 不用三等分 feature cards、连续 zigzag、重复 eyebrow、假产品截图或不可检查媒体作为默认页面节奏。
 - 不使用无语境默认字体、均匀无重点配色、重复圆角卡片和模板化双栏 hero 来替代真实设计判断。
 - 不在卡片里再套大卡片；页面分区优先用全宽区域或无框布局。
 - 不用可见文案解释控件本该表达的功能，常见动作优先用图标和 tooltip。
@@ -84,6 +101,7 @@ description: Use when building, reviewing, or improving frontend UI that needs p
 - 不用不可检查的远程占位图、通用 stock 氛围图或 lorem 文案作为交付主体；缺素材时明确生成、制作或降级为真实结构化内容。
 - 不让视觉 polish 破坏键盘路径、触摸目标、文本可读性或低端设备性能。
 - 不把 Tailwind、组件库或 Storybook 文档等实现载体当成设计方向本身；它们应承接已经明确的产品语境和 token 边界。
+- 不因参考系统偏好而强制某个框架、图标库、动效库或 CSS 工具；始终优先遵循当前项目依赖和设计系统。
 
 ## Expected Output
 

package/skills/fec-ui-design/data/style-archetypes.json

@@ -70,5 +70,45 @@
     "tokens": { "radius": "8-16px", "shadow": "soft", "density": "low-medium" },
     "bestFor": ["wellness", "beauty", "lifestyle", "care services"],
     "avoid": ["pastel contrast failures", "vague atmospheric imagery over real services"]
+  },
+  {
+    "id": "editorial-premium",
+    "keywords": ["premium", "luxury", "fashion", "magazine", "launch", "campaign"],
+    "description": "Image-led composition, restrained copy, high-contrast typography, and deliberate negative space.",
+    "tokens": { "radius": "0-8px", "shadow": "minimal", "density": "low-medium" },
+    "bestFor": ["brand launches", "premium ecommerce", "editorial landing pages", "portfolio features"],
+    "avoid": ["beige luxury defaults without brand evidence", "serif decoration that weakens readability", "hero copy that pushes the CTA below the first viewport"]
+  },
+  {
+    "id": "industrial-brutalist",
+    "keywords": ["industrial", "brutalist", "mechanical", "terminal", "tactical", "blueprint"],
+    "description": "Visible grids, hard edges, strong type scale contrast, and utilitarian metadata used with clear purpose.",
+    "tokens": { "radius": "0-2px", "shadow": "none", "density": "medium-high" },
+    "bestFor": ["technical portfolios", "developer tools", "editorial experiments", "telemetry interfaces"],
+    "avoid": ["regulated consumer flows", "tiny all-caps body copy", "decorative terminal chrome without real information"]
+  },
+  {
+    "id": "minimal-utilitarian",
+    "keywords": ["utilitarian", "document", "linear", "notion", "workspace", "minimalist"],
+    "description": "Quiet document-like surfaces, precise structure, low ornament, and typography doing most of the hierarchy work.",
+    "tokens": { "radius": "4-8px", "shadow": "none-low", "density": "medium" },
+    "bestFor": ["SaaS settings", "docs", "team workspaces", "productivity tools"],
+    "avoid": ["empty white expanses with no task priority", "low-contrast gray on gray", "identical flat cards for every section"]
+  },
+  {
+    "id": "image-led-landing",
+    "keywords": ["landing", "website", "hero", "visual", "image-led", "marketing"],
+    "description": "A clear conversion path carried by real or generated media, varied section structure, and inspectable visual assets.",
+    "tokens": { "radius": "contextual", "shadow": "media-dependent", "density": "low-medium" },
+    "bestFor": ["marketing sites", "product pages", "event pages", "agency sites"],
+    "avoid": ["text plus gradient-only hero", "fake screenshots", "repeating left-text/right-image sections", "CTA labels that wrap on desktop"]
+  },
+  {
+    "id": "brand-system-board",
+    "keywords": ["brand", "brandkit", "identity", "logo", "guidelines", "visual system"],
+    "description": "Presentation-grid identity boards that show logo logic, palette, typography, applications, and visual world coherently.",
+    "tokens": { "radius": "system-defined", "shadow": "presentation-dependent", "density": "medium" },
+    "bestFor": ["brand exploration", "identity systems", "design direction handoff", "visual language proposals"],
+    "avoid": ["random moodboards", "generic logos", "panels that do not explain the brand idea"]
   }
 ]

package/skills/fec-ui-design/data/ux-quality-rules.json

@@ -52,5 +52,40 @@
     "priority": "medium",
     "checks": ["Chart type matches data question", "Units and legends are visible", "Data has text/table fallback", "Color is supplemented by shape or labels"],
     "avoid": ["Pie charts for many categories", "Color-only series distinction"]
+  },
+  {
+    "category": "first-viewport",
+    "label": "First viewport",
+    "priority": "high",
+    "checks": ["Hero or workspace fits common laptop heights", "Primary CTA or task entry is visible without scrolling", "Desktop navigation stays on one line", "The next section leaves a readable cue when the page is promotional"],
+    "avoid": ["Oversized top padding", "Hero copy pushing actions below the fold", "Two-line desktop nav"]
+  },
+  {
+    "category": "cta-quality",
+    "label": "CTA quality",
+    "priority": "high",
+    "checks": ["CTA text contrast meets WCAG AA", "Primary CTA label stays on one line at desktop", "Each CTA intent uses one consistent label", "Ghost buttons remain visible over media backgrounds"],
+    "avoid": ["White text on light buttons", "Multiple contact labels for the same action", "Transparent buttons over busy imagery"]
+  },
+  {
+    "category": "section-variety",
+    "label": "Section variety",
+    "priority": "medium",
+    "checks": ["Adjacent sections use distinct layout jobs", "Bento cell count matches real content", "Feature grids have clear visual priority", "Small uppercase eyebrow labels are used sparingly"],
+    "avoid": ["Three equal cards as the default rhythm", "Three or more zigzag sections in a row", "Empty bento cells for decoration"]
+  },
+  {
+    "category": "media-authenticity",
+    "label": "Media authenticity",
+    "priority": "high",
+    "checks": ["Visual pages use real or generated assets with a clear role", "Product pages show inspectable product or state", "Screenshots represent real UI or are labeled as concepts", "Images reserve aspect ratio and have meaningful alt text when informative"],
+    "avoid": ["Text-only promotional pages", "Fake dashboard rectangles", "Blurred stock atmosphere as the main subject"]
+  },
+  {
+    "category": "state-completeness",
+    "label": "State completeness",
+    "priority": "critical",
+    "checks": ["Loading shape matches final layout", "Empty states include a useful next action", "Errors are recoverable and close to the source", "Selected, invalid, disabled, hover, focus, and reduced-motion states are covered"],
+    "avoid": ["Generic spinners everywhere", "Empty states that only say no data", "Disabled controls communicated only by opacity"]
   }
 ]

package/skills/fec-ui-design/references/design-intelligence.md

@@ -5,12 +5,71 @@
 ## 决策流程
 
 1. 提取关键词：产品类型、用户、场景、主要任务、内容密度、品牌语气、技术栈。
-2. 匹配产品规则：从 `data/product-rules.json` 选择最接近的类别，记录推荐结构、风险和反模式。
-3. 选择风格原型：从 `data/style-archetypes.json` 选择 1 个主风格和最多 1 个辅助风格，避免风格拼贴。
-4. 建立 token 方向：定义主色、强调色、背景、前景、边框、危险色和 focus ring 的语义角色。
-5. 选择字体情绪：不要只选“好看的字体”，要说明标题和正文各自承担的语气与可读性。
-6. 判断数据表达：趋势用折线/面积，比较用柱状，构成少量类别可用环图，流程用漏斗/步骤，明细必须保留表格替代。
-7. 输出反模式：每个设计建议必须附带“不要做什么”，避免落入通用模板。
+2. 写出设计读取：页面类型、受众、主任务、品牌约束和可信赖感来源。
+3. 匹配产品规则：从 `data/product-rules.json` 选择最接近的类别，记录推荐结构、风险和反模式。
+4. 选择风格原型：从 `data/style-archetypes.json` 选择 1 个主风格和最多 1 个辅助风格，避免风格拼贴。
+5. 设定设计拨盘：视觉张力、动效强度、信息密度、媒体真实性、内容说服力都用 1-10 表达，并随页面类型变化。
+6. 建立 token 方向：定义主色、强调色、背景、前景、边框、危险色和 focus ring 的语义角色。
+7. 选择字体情绪：不要只选“好看的字体”，要说明标题和正文各自承担的语气与可读性。
+8. 判断数据表达：趋势用折线/面积，比较用柱状，构成少量类别可用环图，流程用漏斗/步骤，明细必须保留表格替代。
+9. 输出反模式和质量门禁：每个设计建议必须附带“不要做什么”，并根据页面类型补充首屏、CTA、媒体真实性、section 变化和状态完整度检查。
+
+## 方向 Advisor
+
+当用户只说“好看一点”“给几个方向”“我也不知道什么风格”且没有权威设计稿时，不要连续追问泛泛口味问题。先给 3 个差异明显的方向，让用户能判断取舍。
+
+每个方向必须包含：
+
+- 适用场景：为什么适合当前产品、受众和任务。
+- 视觉锚点：信息结构、真实媒体、数据形态、材质、字体性格、空间组织或交互节奏。
+- 关键 token：主色、强调色、背景、字体情绪、圆角/边框/阴影倾向。
+- 避免项：这个方向最容易滑向的模板化错误。
+
+三个方向应来自不同设计逻辑，例如：
+
+- 信息架构型：高密度、理性、数据优先，适合 B2B、运营、金融、工程工具。
+- 编辑叙事型：版式、留白、强文字层级，适合品牌故事、内容产品、作品集。
+- 产品实证型：真实截图、对象、状态、流程证据优先，适合 SaaS、硬件、开发者工具。
+- 表现实验型：强动效、空间感、生成视觉，适合发布页、活动页、艺术/创意项目。
+- 温暖人本型：低攻击性色彩、可亲近插画或真实人物，适合教育、健康、生活方式。
+
+用户选择方向后，再把它落成设计系统和页面结构；不要把 3 个方向拼贴成一个混杂系统。
+
+## 真实资产优先
+
+品牌或产品相关 UI 的识别度来自真实资产，而不是颜色猜测。优先级：
+
+1. Logo、产品图、真实 UI 截图、实体照片、品牌应用图。
+2. 项目内已有 icon、组件、数据状态、图表和截图。
+3. 为当前任务生成的专用资产。
+4. 明确标记的结构化 placeholder。
+
+不要用 CSS 轮廓、通用插画、假截图或远程占位图替代用户需要识别的主体。缺少关键资产时，先标记资产缺口并给替代路线；若 logo 或主体产品是首屏识别核心，应暂停确认或改为不依赖品牌识别的结构方案。
+
+## v0 校准
+
+视觉风险高、方向不明确或页面影响面较大时，先交付一个可看的 v0，而不是一次性做完整页面。
+
+v0 应包含：
+
+- 核心布局、首屏层级、主要 token 和一个关键模块。
+- 明确 placeholder 和资产缺口。
+- 1-2 个可替换方向点，例如密度、色彩温度或媒体策略。
+- 不包含完整状态矩阵、所有内容细节或生产级动效。
+
+v0 通过后再补齐组件、状态、响应式和交互动效。
+
+## 设计 Critique
+
+当用户要求“评审 UI”“好不好看”“再高级一点”或交付前需要自检时，按 5 个维度输出具体问题，而不是只给主观形容：
+
+- 方向一致性：视觉选择是否服务设计读取和产品任务。
+- 层级与扫描：首屏、标题、CTA、数据、状态是否有清楚主次。
+- 工艺质量：间距、对齐、色彩数量、文字换行、圆角/边框/阴影是否稳定。
+- 功能完整度：loading、empty、error、disabled、hover、focus、selected 是否覆盖。
+- 原创性与识别度：是否摆脱通用渐变、三卡片、假截图、无主体 hero。
+
+输出应按严重程度给出可执行修复，不评价设计者本人。
 
 ## 何时运行生成器
 
@@ -29,6 +88,7 @@ node skills/fec-ui-design/scripts/design-system.mjs "fintech analytics dashboard
 ## 输出必须回答
 
 - 这个界面的主任务是什么？
+- 设计读取和五个设计拨盘分别是什么？
 - 推荐哪种页面结构或工作区结构？
 - 视觉锚点是什么，为什么贴合业务？
 - 主风格、字体、色彩、动效分别服务什么目标？

package/skills/fec-ui-design/references/pre-delivery-checklist.md

@@ -11,6 +11,9 @@
 ## 高优先级
 
 - 首屏：工具型界面直接展示核心工作区，不用营销 hero 替代功能。
+- 首屏：营销、作品集和品牌页在常见小笔记本高度内显示主体、CTA 和下一屏线索。
+- CTA：按钮文案在桌面端不换行，对比度合格，同一意图使用一致标签。
+- 导航：桌面端保持单行，移动端折叠后仍能到达主要路径。
 - 响应式：375px、768px、1024px、1440px 无水平溢出、遮挡或文本截断。
 - 性能：图片有尺寸或 aspect-ratio；非首屏图片懒加载；列表过大时虚拟化。
 - 动效：只动画 transform/opacity，尊重 `prefers-reduced-motion`。
@@ -27,6 +30,9 @@
 ## 反模式
 
 - 用装饰光斑、紫色渐变、卡片堆叠掩盖信息结构不足。
+- 连续三段以上复用三卡片、左右交错、split header 或同一种 reveal 动效。
+- 视觉型页面只有文字和渐变，没有真实产品、真实状态、品牌应用或可检查媒体。
+- Bento 用空格子补构图，或 feature grid 每个格子同权重、同背景、同节奏。
 - hover 导致布局位移。
 - `transition: all`、`will-change: all`。
 - 低对比灰字、无意义透明度、单一色相界面。

package/skills/fec-ui-design/scripts/design-system.mjs

@@ -67,6 +67,14 @@ import { fileURLToPath } from "node:url";
  *   project: string;
  *   page: string;
  *   query: string;
+ *   designRead: string;
+ *   designDials: {
+ *     visualTension: number;
+ *     motionIntensity: number;
+ *     informationDensity: number;
+ *     mediaAuthenticity: number;
+ *     contentPersuasion: number;
+ *   };
  *   product: { id: string; label: string; pattern: string; risks: string[] };
  *   style: { id: string; label: string; usage: string | undefined; risks: string[] };
  *   tokens: { color: string; typography: string; space: string; components: string[] };
@@ -230,6 +238,7 @@ function buildRecommendation(args) {
   const tokens = tokenize([query, args.project, args.page, args.stack].filter(Boolean).join(" "));
   const product = chooseProduct(tokens);
   const style = chooseStyle(tokens, product);
+  const designDials = deriveDesignDials(tokens, product, style);
   const checklist = chooseChecklist(tokens, product);
   const stackGuidance = chooseStack(args.stack, tokens);
   const pattern = product.pattern ?? product.patterns?.[0] ?? "Task-first interface with explicit states and durable visual hierarchy";
@@ -238,6 +247,8 @@ function buildRecommendation(args) {
     project: args.project || titleCase(query),
     page: args.page || "",
     query,
+    designRead: renderDesignRead(product, style, designDials),
+    designDials,
     product: {
       id: product.id,
       label: product.label ?? labelFromId(product.id),
@@ -312,11 +323,17 @@ function chooseStyle(tokens, product) {
  * @returns {ChecklistGroup[]}
  */
 function chooseChecklist(tokens, product) {
-  const priority = new Set(["accessibility", "interaction", "layout", "typography", "animation"]);
+  const priority = new Set(["accessibility", "interaction", "layout", "typography", "animation", "state-completeness"]);
   if (product.id === "data-dashboard" || tokens.has("dashboard") || tokens.has("chart")) priority.add("charts");
   if (tokens.has("form") || tokens.has("booking") || tokens.has("checkout")) priority.add("forms");
   if (tokens.has("mobile") || tokens.has("app")) priority.add("navigation");
   if (tokens.has("performance") || tokens.has("canvas") || tokens.has("three")) priority.add("performance");
+  if (isPromotional(tokens, product)) {
+    priority.add("first-viewport");
+    priority.add("cta-quality");
+    priority.add("section-variety");
+    priority.add("media-authenticity");
+  }
 
   return uxQualityRules
     .filter((rule) => {
@@ -333,6 +350,96 @@ function chooseChecklist(tokens, product) {
     });
 }
 
+/**
+ * @param {Set<string>} tokens
+ * @param {ProductRule} product
+ * @param {StyleArchetype} style
+ * @returns {Recommendation["designDials"]}
+ */
+function deriveDesignDials(tokens, product, style) {
+  /** @type {Recommendation["designDials"]} */
+  const dials = {
+    visualTension: 5,
+    motionIntensity: 3,
+    informationDensity: 5,
+    mediaAuthenticity: 5,
+    contentPersuasion: 5,
+  };
+
+  if (["data-dashboard", "saas", "fintech", "healthcare"].includes(product.id)) {
+    dials.visualTension = 3;
+    dials.motionIntensity = product.id === "saas" ? 3 : 2;
+    dials.informationDensity = product.id === "data-dashboard" ? 8 : 6;
+    dials.mediaAuthenticity = 4;
+    dials.contentPersuasion = 4;
+  }
+
+  if (["ecommerce", "creative", "wellness"].includes(product.id) || isPromotional(tokens, product)) {
+    dials.visualTension = product.id === "creative" ? 8 : 7;
+    dials.motionIntensity = product.id === "creative" ? 6 : 5;
+    dials.informationDensity = 4;
+    dials.mediaAuthenticity = 8;
+    dials.contentPersuasion = 8;
+  }
+
+  if (product.id === "gaming" || style.id === "immersive") {
+    dials.visualTension = 8;
+    dials.motionIntensity = 7;
+    dials.informationDensity = 6;
+    dials.mediaAuthenticity = 7;
+    dials.contentPersuasion = 5;
+  }
+
+  if (["minimal", "minimal-utilitarian"].includes(style.id)) {
+    dials.visualTension = Math.min(dials.visualTension, 4);
+    dials.motionIntensity = Math.min(dials.motionIntensity, 3);
+  }
+
+  if (["editorial-premium", "image-led-landing", "brand-system-board"].includes(style.id)) {
+    dials.visualTension = Math.max(dials.visualTension, 7);
+    dials.mediaAuthenticity = Math.max(dials.mediaAuthenticity, 8);
+    dials.contentPersuasion = Math.max(dials.contentPersuasion, 7);
+  }
+
+  if (tokens.has("regulated") || tokens.has("public") || tokens.has("government") || tokens.has("accessibility")) {
+    dials.visualTension = Math.min(dials.visualTension, 3);
+    dials.motionIntensity = Math.min(dials.motionIntensity, 2);
+    dials.informationDensity = Math.max(dials.informationDensity, 5);
+  }
+
+  return dials;
+}
+
+/**
+ * @param {ProductRule} product
+ * @param {StyleArchetype} style
+ * @param {Recommendation["designDials"]} dials
+ * @returns {string}
+ */
+function renderDesignRead(product, style, dials) {
+  return [
+    `Reading this as ${product.label ?? labelFromId(product.id)} work`,
+    `with a ${style.label ?? labelFromId(style.id)} visual direction`,
+    `and dial targets ${dials.visualTension}/${dials.motionIntensity}/${dials.informationDensity}/${dials.mediaAuthenticity}/${dials.contentPersuasion}`,
+  ].join(", ");
+}
+
+/**
+ * @param {Set<string>} tokens
+ * @param {ProductRule} product
+ * @returns {boolean}
+ */
+function isPromotional(tokens, product) {
+  return product.id === "creative"
+    || product.id === "ecommerce"
+    || tokens.has("landing")
+    || tokens.has("marketing")
+    || tokens.has("portfolio")
+    || tokens.has("brand")
+    || tokens.has("website")
+    || tokens.has("hero");
+}
+
 /**
  * @param {string} stack
  * @param {Set<string>} tokens
@@ -364,10 +471,19 @@ function renderMarkdown(model) {
   const lines = [
     `# Design System Recommendation: ${model.project}`,
     "",
+    `- Design read: ${model.designRead}`,
     `- Product category: ${model.product.label} (${model.product.id})`,
     `- Recommended pattern: ${model.product.pattern}`,
     `- Style archetype: ${model.style.label} (${model.style.id})`,
     "",
+    "## Design Dials",
+    "",
+    `- Visual tension: ${model.designDials.visualTension}/10`,
+    `- Motion intensity: ${model.designDials.motionIntensity}/10`,
+    `- Information density: ${model.designDials.informationDensity}/10`,
+    `- Media authenticity: ${model.designDials.mediaAuthenticity}/10`,
+    `- Content persuasion: ${model.designDials.contentPersuasion}/10`,
+    "",
     "## Token Direction",
     "",
     `- Color: ${model.tokens.color}`,
@@ -416,10 +532,12 @@ function renderPageOverride(model) {
     "## Page Intent",
     "",
     `Use the Master direction, then adapt layout and component density for ${pageName}. Keep overrides narrow and delete any rule that merely repeats the Master.`,
+    `Design read: ${model.designRead}.`,
     "",
     "## Override Strategy",
     "",
     `- Primary pattern: ${model.product.pattern}`,
+    `- Dials: visual ${model.designDials.visualTension}/10, motion ${model.designDials.motionIntensity}/10, density ${model.designDials.informationDensity}/10, media ${model.designDials.mediaAuthenticity}/10, persuasion ${model.designDials.contentPersuasion}/10`,
     `- Visual emphasis: ${model.style.usage}`,
     `- Chart behavior: ${model.chart}`,
     "",

package/skills/fec-vue3-project-standard/SKILL.md

@@ -19,11 +19,17 @@ description: Use when designing or reviewing Vue 3 + TypeScript project structur
 4. 输出时补齐状态归属、API 层、错误处理、样式隔离和专项 skill 分流。
 5. 页面和模块要有可恢复错误 UI；全局 `errorHandler`、`onErrorCaptured`、请求错误映射和路由错误页分工明确。
 6. Tailwind token/variant 或响应式布局需求应分流到对应专项 skill，避免把样式系统规则塞进 Vue 组件规范。
-5. 状态归属复杂时先做状态清单；DTO、公共 props 或泛型 composable 复杂时先收敛 TypeScript 类型契约。
+7. 状态归属复杂时先做状态清单；DTO、公共 props、泛型 composable 或 `tsconfig` 边界复杂时，先使用 TypeScript 项目规范流程收敛跨框架类型契约。
+8. 设计可复用 composable 时明确输入是否支持 plain value、ref、computed 或 getter；测试 Vue 组件时覆盖 Pinia、Router、Teleport、Suspense 和 async setup 的常见边界。
 
 ## 详细参考
 
-需要具体 Vue 3 项目结构、组件模式、Composables、slots、Provide/Inject、路由、Pinia、API 层、错误处理、指令、样式、TypeScript、测试、性能或审查清单时，加载 [references/vue3-project-details.md](references/vue3-project-details.md)。
+按需要加载更细的参考文件：
+
+- 项目目录、组件分层、组件规范、注释和 TypeScript：加载 [references/vue3-project-structure.md](references/vue3-project-structure.md)。
+- Composables、slots、Provide/Inject 和路由组织：加载 [references/vue3-composables-routing.md](references/vue3-composables-routing.md)。
+- Pinia、API 层、错误处理、指令、样式、测试、反模式和输出检查清单：加载 [references/vue3-state-api-quality.md](references/vue3-state-api-quality.md)。
+- Vue 项目规范层面的轻量性能约定：加载 [references/vue3-performance-patterns.md](references/vue3-performance-patterns.md)。
 
 ## Constraints
 
@@ -36,6 +42,8 @@ description: Use when designing or reviewing Vue 3 + TypeScript project structur
 - 避免在 `v-for` 中使用 `v-if`（提取为 computed 过滤）
 - 禁止直接从 feature 内部深层路径导入，绕过 `index.ts`
 - 不用全局错误处理吞掉组件内可恢复的 API、表单或权限错误。
+- 不把函数型参数误当 getter 自动调用；composable 参数若可能是回调，应避免使用 getter 型输入约定。
+- 不依赖快照作为 Vue 组件唯一断言；异步组件、Teleport 和 Pinia 场景要有用户可见行为断言。
 
 ## Expected Output
 
@@ -47,3 +55,4 @@ description: Use when designing or reviewing Vue 3 + TypeScript project structur
 - API 调用有类型约束和统一错误处理
 - 样式使用 scoped 隔离，关键行为有测试覆盖
 - 文件结构与项目约定一致（pages / features / components 分离）
+- 可复用 composable 的输入响应性、Pinia/Router 边界和异步组件测试策略已说明