@bovinphang/frontend-craft 2.6.0 → 2.8.0

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

@@ -0,0 +1,373 @@
+[
+  {
+    "id": "minimal",
+    "keywords": [
+      "minimal",
+      "clean",
+      "enterprise",
+      "trust",
+      "calm"
+    ],
+    "description": "安静的界面表层、清晰的信息层级、克制的强调色，并支持快速扫读。",
+    "tokens": {
+      "radius": "4-8px",
+      "shadow": "低",
+      "density": "中高"
+    },
+    "bestFor": [
+      "企业级产品",
+      "金融",
+      "医疗健康",
+      "文档"
+    ],
+    "avoid": [
+      "没有信息优先级的空白区域",
+      "低对比度灰色文本"
+    ]
+  },
+  {
+    "id": "editorial",
+    "keywords": [
+      "editorial",
+      "magazine",
+      "portfolio",
+      "brand",
+      "luxury"
+    ],
+    "description": "表现力强的排版、明确的媒体主导、受控的不对称布局和叙事节奏。",
+    "tokens": {
+      "radius": "0-8px",
+      "shadow": "取决于内容",
+      "density": "中等"
+    },
+    "bestFor": [
+      "创意项目",
+      "电商",
+      "作品集",
+      "发布页"
+    ],
+    "avoid": [
+      "影响阅读的装饰性文字",
+      "遮挡真实产品的媒体素材"
+    ]
+  },
+  {
+    "id": "glass",
+    "keywords": [
+      "glass",
+      "modern",
+      "ai",
+      "overlay",
+      "depth"
+    ],
+    "description": "谨慎使用分层半透明表层，用于建立层级和聚焦。",
+    "tokens": {
+      "radius": "12-20px",
+      "shadow": "柔和深度",
+      "density": "中等"
+    },
+    "bestFor": [
+      "现代 SaaS",
+      "AI 工具",
+      "可视化"
+    ],
+    "avoid": [
+      "模糊且低对比度的文本",
+      "把 blur 当作纯装饰"
+    ]
+  },
+  {
+    "id": "brutalist",
+    "keywords": [
+      "brutalist",
+      "raw",
+      "bold",
+      "youth",
+      "experimental"
+    ],
+    "description": "硬边界、强对比、可见结构，以及刻意直接的构图。",
+    "tokens": {
+      "radius": "0-4px",
+      "shadow": "硬阴影或无阴影",
+      "density": "可变"
+    },
+    "bestFor": [
+      "创意活动",
+      "年轻品牌",
+      "实验性作品集"
+    ],
+    "avoid": [
+      "严肃的受监管工作流",
+      "不可访问的对比度或混乱导航"
+    ]
+  },
+  {
+    "id": "bento",
+    "keywords": [
+      "bento",
+      "cards",
+      "modular",
+      "features",
+      "education"
+    ],
+    "description": "模块化信息区块，尺度有变化，分组清晰。",
+    "tokens": {
+      "radius": "8px 或更小，除非设计系统不同",
+      "shadow": "轻微",
+      "density": "中等"
+    },
+    "bestFor": [
+      "功能概览",
+      "学习路径",
+      "产品摘要"
+    ],
+    "avoid": [
+      "card 内嵌 card 的布局",
+      "权重相同而掩盖优先级的模块"
+    ]
+  },
+  {
+    "id": "data-dense",
+    "keywords": [
+      "dashboard",
+      "analytics",
+      "table",
+      "monitoring",
+      "dense"
+    ],
+    "description": "面向运营的高信息密度，表格与图表对齐，语义化用色，控件稳定。",
+    "tokens": {
+      "radius": "4-8px",
+      "shadow": "极少",
+      "density": "高"
+    },
+    "bestFor": [
+      "仪表盘",
+      "管理后台",
+      "监控",
+      "分析"
+    ],
+    "avoid": [
+      "营销式 hero 首屏",
+      "大型装饰性 card"
+    ]
+  },
+  {
+    "id": "immersive",
+    "keywords": [
+      "immersive",
+      "game",
+      "3d",
+      "canvas",
+      "story",
+      "visualization"
+    ],
+    "description": "全出血视觉空间，同时保持控件可预测、可阅读。",
+    "tokens": {
+      "radius": "取决于上下文",
+      "shadow": "由场景驱动",
+      "density": "低到中等"
+    },
+    "bestFor": [
+      "游戏",
+      "3D 预览",
+      "交互式可视化"
+    ],
+    "avoid": [
+      "把主场景放进装饰性 card 中",
+      "被氛围遮住的控件"
+    ]
+  },
+  {
+    "id": "mobile-native",
+    "keywords": [
+      "mobile",
+      "app",
+      "native",
+      "touch",
+      "safe-area"
+    ],
+    "description": "触控优先布局，具备平台安全间距、清晰反馈和稳健的文本缩放。",
+    "tokens": {
+      "radius": "与平台一致",
+      "shadow": "原生层级阴影",
+      "density": "适合触控"
+    },
+    "bestFor": [
+      "移动应用",
+      "响应式工具",
+      "现场作业流程"
+    ],
+    "avoid": [
+      "仅 hover 可用的行为",
+      "被 safe area 遮挡的内容"
+    ]
+  },
+  {
+    "id": "soft",
+    "keywords": [
+      "soft",
+      "wellness",
+      "beauty",
+      "calm",
+      "organic"
+    ],
+    "description": "温暖表层、柔和对比、触感化间距，以及平静的交互节奏。",
+    "tokens": {
+      "radius": "8-16px",
+      "shadow": "柔和",
+      "density": "低到中等"
+    },
+    "bestFor": [
+      "身心健康",
+      "美妆",
+      "生活方式",
+      "照护服务"
+    ],
+    "avoid": [
+      "粉彩配色导致的对比度失败",
+      "用模糊氛围图替代真实服务"
+    ]
+  },
+  {
+    "id": "editorial-premium",
+    "keywords": [
+      "premium",
+      "luxury",
+      "fashion",
+      "magazine",
+      "launch",
+      "campaign"
+    ],
+    "description": "以图片驱动构图，文案克制，排版高对比，并有意保留负空间。",
+    "tokens": {
+      "radius": "0-8px",
+      "shadow": "极少",
+      "density": "低到中等"
+    },
+    "bestFor": [
+      "品牌发布",
+      "高端电商",
+      "编辑式落地页",
+      "作品集专题"
+    ],
+    "avoid": [
+      "没有品牌依据的米色奢华默认风格",
+      "削弱可读性的衬线装饰",
+      "把 CTA 推到首屏下方的 hero 文案"
+    ]
+  },
+  {
+    "id": "industrial-brutalist",
+    "keywords": [
+      "industrial",
+      "brutalist",
+      "mechanical",
+      "terminal",
+      "tactical",
+      "blueprint"
+    ],
+    "description": "可见网格、硬边界、强烈字号层级对比，以及有明确目的的实用型元数据。",
+    "tokens": {
+      "radius": "0-2px",
+      "shadow": "无",
+      "density": "中高"
+    },
+    "bestFor": [
+      "技术作品集",
+      "开发者工具",
+      "编辑式实验",
+      "遥测界面"
+    ],
+    "avoid": [
+      "受监管的消费流程",
+      "过小的全大写正文",
+      "没有真实信息的装饰性终端外壳"
+    ]
+  },
+  {
+    "id": "minimal-utilitarian",
+    "keywords": [
+      "utilitarian",
+      "document",
+      "linear",
+      "notion",
+      "workspace",
+      "minimalist"
+    ],
+    "description": "安静的文档式表层、精确结构、低装饰，并主要依靠排版建立层级。",
+    "tokens": {
+      "radius": "4-8px",
+      "shadow": "无到低",
+      "density": "中等"
+    },
+    "bestFor": [
+      "SaaS 设置页",
+      "文档",
+      "团队工作区",
+      "生产力工具"
+    ],
+    "avoid": [
+      "没有任务优先级的大片空白",
+      "灰底灰字的低对比",
+      "所有 section 都使用相同扁平 card"
+    ]
+  },
+  {
+    "id": "image-led-landing",
+    "keywords": [
+      "landing",
+      "website",
+      "hero",
+      "visual",
+      "image-led",
+      "marketing"
+    ],
+    "description": "由真实或生成媒体承载清晰转化路径，section 结构有变化，并提供可检查的视觉资产。",
+    "tokens": {
+      "radius": "取决于上下文",
+      "shadow": "取决于媒体",
+      "density": "低到中等"
+    },
+    "bestFor": [
+      "营销网站",
+      "产品页",
+      "活动页",
+      "代理商网站"
+    ],
+    "avoid": [
+      "只有文字加渐变的 hero",
+      "伪造截图",
+      "重复的左文右图 section",
+      "桌面端会换行的 CTA 标签"
+    ]
+  },
+  {
+    "id": "brand-system-board",
+    "keywords": [
+      "brand",
+      "brandkit",
+      "identity",
+      "logo",
+      "guidelines",
+      "visual system"
+    ],
+    "description": "以 presentation grid 呈现 identity board，连贯展示 logo 逻辑、色板、字体、应用场景和视觉世界。",
+    "tokens": {
+      "radius": "由系统定义",
+      "shadow": "取决于展示方式",
+      "density": "中等"
+    },
+    "bestFor": [
+      "品牌探索",
+      "识别系统",
+      "设计方向交接",
+      "视觉语言提案"
+    ],
+    "avoid": [
+      "随机 moodboard",
+      "通用 logo",
+      "无法解释品牌理念的面板"
+    ]
+  }
+]

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

@@ -0,0 +1,203 @@
+[
+  {
+    "category": "accessibility",
+    "priority": "critical",
+    "checks": [
+      "文本对比度满足 WCAG AA",
+      "焦点环可见",
+      "纯图标控件有可访问名称",
+      "键盘顺序遵循视觉顺序"
+    ],
+    "avoid": [
+      "全局移除 outline",
+      "仅用颜色表达错误或成功状态"
+    ]
+  },
+  {
+    "category": "interaction",
+    "priority": "critical",
+    "checks": [
+      "主控件在 100ms 内响应",
+      "触摸目标至少 44x44px",
+      "禁用状态具备语义且可见"
+    ],
+    "avoid": [
+      "主要操作只能 hover 触发",
+      "点击目标过密且缺少间距"
+    ]
+  },
+  {
+    "category": "performance",
+    "priority": "high",
+    "checks": [
+      "图片预留尺寸",
+      "大列表已虚拟化",
+      "动画使用 transform/opacity",
+      "重型视觉工作延后执行或移出主线程"
+    ],
+    "avoid": [
+      "动画驱动 layout 属性",
+      "无限制渲染图表或表格"
+    ]
+  },
+  {
+    "category": "layout",
+    "priority": "high",
+    "checks": [
+      "已检查 375/768/1024/1440px 布局",
+      "无水平溢出",
+      "固定 header/footer 为内容预留空间"
+    ],
+    "avoid": [
+      "desktop-first 的 max-width 补丁",
+      "无理由嵌套滚动区域"
+    ]
+  },
+  {
+    "category": "typography",
+    "priority": "medium",
+    "checks": [
+      "正文保持可读",
+      "行长受控",
+      "需要对齐时数字使用 tabular figures"
+    ],
+    "avoid": [
+      "低对比小标签",
+      "正文使用负字距"
+    ]
+  },
+  {
+    "category": "animation",
+    "priority": "medium",
+    "checks": [
+      "微交互时长为 150-300ms",
+      "退出动画快于进入动画",
+      "尊重 reduced motion"
+    ],
+    "avoid": [
+      "无原因的装饰性动效",
+      "转场期间阻塞输入"
+    ]
+  },
+  {
+    "category": "forms",
+    "priority": "medium",
+    "checks": [
+      "标签持久可见",
+      "错误显示在字段附近",
+      "提交包含 loading/success/error 反馈",
+      "首个无效字段获得焦点"
+    ],
+    "avoid": [
+      "仅使用 placeholder 作为标签",
+      "错误摘要无法引导字段恢复"
+    ]
+  },
+  {
+    "category": "navigation",
+    "priority": "high",
+    "checks": [
+      "当前位置可见",
+      "返回行为保留状态",
+      "主导航保持可达"
+    ],
+    "avoid": [
+      "混用多个主导航系统",
+      "用 modal 承载主导航"
+    ]
+  },
+  {
+    "category": "charts",
+    "priority": "medium",
+    "checks": [
+      "图表类型匹配数据问题",
+      "单位和图例可见",
+      "数据有文本/表格兜底",
+      "颜色由形状或标签补充"
+    ],
+    "avoid": [
+      "多类别使用饼图",
+      "仅用颜色区分系列"
+    ]
+  },
+  {
+    "category": "first-viewport",
+    "label": "First viewport",
+    "priority": "high",
+    "checks": [
+      "Hero 或工作区适配常见笔记本高度",
+      "主 CTA 或任务入口无需滚动即可看到",
+      "桌面导航保持单行",
+      "促销页面中下一屏内容留下可读提示"
+    ],
+    "avoid": [
+      "顶部 padding 过大",
+      "Hero 文案把操作推到首屏以下",
+      "桌面导航变成两行"
+    ]
+  },
+  {
+    "category": "cta-quality",
+    "label": "CTA quality",
+    "priority": "high",
+    "checks": [
+      "CTA 文本对比度满足 WCAG AA",
+      "桌面端主 CTA 标签保持单行",
+      "每种 CTA 意图使用一致标签",
+      "媒体背景上的 ghost button 仍可见"
+    ],
+    "avoid": [
+      "浅色按钮上使用白字",
+      "同一操作使用多个联系类标签",
+      "繁忙图像上叠透明按钮"
+    ]
+  },
+  {
+    "category": "section-variety",
+    "label": "Section variety",
+    "priority": "medium",
+    "checks": [
+      "相邻 section 承担不同布局职责",
+      "Bento 单元数量匹配真实内容",
+      "Feature grid 有清晰视觉优先级",
+      "少量使用小号大写 eyebrow 标签"
+    ],
+    "avoid": [
+      "默认节奏总是三个等权卡片",
+      "连续三个或更多 zigzag section",
+      "为空装饰而放置 bento 单元"
+    ]
+  },
+  {
+    "category": "media-authenticity",
+    "label": "Media authenticity",
+    "priority": "high",
+    "checks": [
+      "视觉页面使用有明确职责的真实或生成资产",
+      "产品页面展示可检查的产品或状态",
+      "截图代表真实 UI，或标记为概念稿",
+      "图片预留 aspect ratio，信息性图片有有意义 alt 文本"
+    ],
+    "avoid": [
+      "纯文本促销页",
+      "伪造 dashboard 矩形",
+      "用模糊 stock 氛围图作为主体"
+    ]
+  },
+  {
+    "category": "state-completeness",
+    "label": "State completeness",
+    "priority": "critical",
+    "checks": [
+      "Loading 形态匹配最终布局",
+      "空状态包含有用下一步",
+      "错误可恢复且靠近来源",
+      "覆盖 selected、invalid、disabled、hover、focus 和 reduced-motion 状态"
+    ],
+    "avoid": [
+      "到处使用通用 spinner",
+      "空状态只写 no data",
+      "禁用控件只靠透明度表达"
+    ]
+  }
+]

package/localized/zh-CN/skills/fec-ui-design/references/design-intelligence.md

@@ -0,0 +1,97 @@
+# 设计智能参考
+
+本参考用于把模糊的 UI 请求转成可执行设计系统。先识别产品类别，再组合风格原型、色彩角色、字体情绪、动效节奏、图表任务和 UX 风险。
+
+## 决策流程
+
+1. 提取关键词：产品类型、用户、场景、主要任务、内容密度、品牌语气、技术栈。
+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。
+
+输出应按严重程度给出可执行修复，不评价设计者本人。
+
+## 何时运行生成器
+
+使用以下命令生成设计系统建议：
+
+```bash
+node skills/fec-ui-design/scripts/design-system.mjs "beauty spa booking" --project "Serenity Spa"
+```
+
+输出 Markdown 适合贴入计划或 PR 描述；输出 JSON 适合测试或工具消费：
+
+```bash
+node skills/fec-ui-design/scripts/design-system.mjs "fintech analytics dashboard" --format json --stack next
+```
+
+## 输出必须回答
+
+- 这个界面的主任务是什么？
+- 设计读取和五个设计拨盘分别是什么？
+- 推荐哪种页面结构或工作区结构？
+- 视觉锚点是什么，为什么贴合业务？
+- 主风格、字体、色彩、动效分别服务什么目标？
+- 图表和数据密度如何处理？
+- 哪些反模式必须避免？
+- 上线前最小 QA 清单是什么？

package/localized/zh-CN/skills/fec-ui-design/references/master-page-overrides.md

@@ -0,0 +1,30 @@
+# 全局/页面级差异覆盖
+
+当项目需要长期保持 UI 一致性时，用 `design-system/MASTER.md` 存放全局设计系统，用 `design-system/pages/<page>.md` 存放页面级差异。
+
+## 读取顺序
+
+1. 先检查当前页面是否有 `design-system/<project>/pages/<page>.md`。
+2. 如果存在，页面文件里的规则覆盖 Master 中相同维度。
+3. 如果不存在，完全遵循 `design-system/<project>/MASTER.md`。
+4. 页面文件只记录差异，不复制 Master 全文。
+
+## 生成命令
+
+```bash
+node skills/fec-ui-design/scripts/design-system.mjs "saas analytics dashboard" --project "Acme Console" --persist --output-dir .
+```
+
+生成页面 overrides：
+
+```bash
+node skills/fec-ui-design/scripts/design-system.mjs "saas analytics dashboard" --project "Acme Console" --page dashboard --persist --output-dir .
+```
+
+## 页面 override 应包含
+
+- 页面任务和信息密度差异
+- 布局差异：工作区、表格、图表、表单、详情页或营销首屏
+- token 差异：只写需要覆盖的语义色、间距、状态或图表色
+- 组件差异：只写当前页面新增或改变的组件行为
+- QA 焦点：当前页面最容易出错的响应式、可访问性、性能或交互风险