Dog-Frontier — 前端设计综合技能

整合 18 个前端技能的元技能系统。通过结构化多轮对话,将模糊需求转化为高质量交付物。

触发条件

当用户请求涉及以下任一领域时,激活本技能:

设计阶段

• 从零设计新项目前端 → 走完整流程
• 重构现有界面 → 走审查流程
• 生成设计系统/令牌/品牌指南 → 走设计系统流程

开发阶段

• 创建页面(落地页/仪表盘/管理后台) → 走页面流程
• 开发组件(按钮/表单/表格/图表/导航) → 走组件流程
• 实现动画/视频 → 走动画流程

审查阶段

• UI/UX 审查 → 走审查流程
• 代码质量检查 → 走QA流程
• 文案去AI化 → 走文案流程
• 反「AI味」设计审查 → 走反AI味流程

流程总控

整个技能按以下 5 阶段流水线运行。每阶段完成后,必须通过该阶段的验收门(Gate)才能进入下一阶段。

Phase 1: Discovery          Phase 2: Design System        Phase 3: Implementation
┌──────────────┐           ┌──────────────────┐           ┌──────────────────┐
│ 需求勘探      │           │ 设计系统生成      │           │ 代码生成          │
│              │    →      │                  │    →     │                  │
│ 4个关键问题   │   Gate 1  │ 风格+配色+字体    │   Gate 2  │ 组件+布局+页面    │   Gate 3
│ 输出: 需求卡  │           │ +DESIGN.md参考库  │           │ 输出: 源代码      │
└──────────────┘           │ 输出: DESIGN.md   │           └──────────────────┘
                           └──────────────────┘
                                    │
         ┌──────────────────────────┘
         │ 风格选择优先级:
         │ 1. awesome-design-md (58品牌 DESIGN.md 即插即用)
         │ 2. ui-ux-pro-max (67风格 BM25搜索)
         │ 3. 内置设计知识 (兜底)
         │
Phase 5: Quality Review                            Phase 4: Handoff Check
┌──────────────────┐                              ┌──────────────────┐
│ 质量审查          │                              │ 交接检查          │
│                  │    ←                         │                  │
│ 6维度+design.md   │         Gate 4               │ 格式+完整性验证   │
│ lint自动化校验    │                              │ 输出: 交接包      │
│ 输出: QA报告      │                              │                  │
└──────────────────┘                              └──────────────────┘

阶段门控 (Gates)

核心规则

1. 必须走完 5 阶段

不允许跳过任何阶段。但可以根据任务类型调整各阶段的深度:

• 轻量任务(如单个组件): 每阶段压缩至 1-2 轮对话
• 完整项目(如全新设计): 每阶段展开完整对话

2. 每个阶段输出物必须结构化

使用 handoff-format.md 定义的格式进行阶段间交接。

3. 技能调度优先级

当多个上游技能可完成同一任务时,按以下优先级选择:

1. 用户已安装的本地技能(零延迟)
2. 安装量 ≥ 1K 的社区技能(稳定性优先)
3. 本技能内置的参考知识(作为兜底)

4. 归属透明

每次使用上游技能时,在输出中标注 [来源: skill-name]。 完整归属见 ATTRIBUTIONS.md。

验收标准

所有交付物必须通过 qa-checklist.md 的全部检查项。

最低通过线

阻断性缺陷 (一票否决)

以下任一情况出现,直接判定不通过:

• 移动端(375px)有水平滚动条
• 文字对比度 < 3:1
• 表单无可见 label
• 交互元素无键盘支持
• 输出包含未标注归属的上游技能内容

快速路由

根据用户输入的关键词,直接跳转到对应阶段:

用户说:                           → 从哪开始
"设计一个XX落地页"                 → Phase 1 (完整流程)
"给我做一个 Stripe 风格的管理后台"  → Phase 2 DESIGN.md 匹配 → Phase 3
"按 Notion 的配色重构这个页面"      → Phase 2 awesome-design-md → Phase 3
"这个页面的配色帮我优化一下"        → Phase 2 (只走设计系统)
"帮我写一个Vue表格组件"            → Phase 3 (只走代码生成)
"审查一下这个页面的UX"             → Phase 5 (只走质量审查)
"把这个设计的文案改得更自然"        → Phase 5 文案流程
"生成设计令牌/design tokens"       → Phase 2 令牌生成
"lint一下我的DESIGN.md"            → Phase 5 design.md CLI校验
"导出设计令牌到 Tailwind config"    → Phase 4 @google/design.md export
"做一个产品介绍视频"               → Phase 3 动画流程
"反AI味设计/去模板化/审美审查"     → Phase 5 反AI味流程

集成技能总览

完整归属声明: ATTRIBUTIONS.md

DESIGN.md 集成 (v2.0 新增)

Dog-Frontier v2.0 深度集成 Google 的 DESIGN.md 格式标准和 awesome-design-md 品牌库。

什么是 DESIGN.md？

DESIGN.md 是 Google Stitch 团队制定的纯文本设计系统格式标准（Apache 2.0），让 AI agent 能直接读懂设计系统。它由两层组成：

awesome-design-md：58 品牌即插即用

VoltAgent/awesome-design-md（MIT, 91K+ Stars）收集了 58 家知名公司的 DESIGN.md 反向工程文件：

Phase 2 集成：风格即插即用

当用户说"给我做一个 Stripe 风格的管理后台"时：

用户请求 "Stripe风格"
       │
       ▼
┌──────────────────────────────┐
│ Step 2.0: DESIGN.md 匹配     │
│ 从 awesome-design-md 检索    │
│ 匹配 "Stripe" → DESIGN.md   │
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Step 2.1: 令牌提取           │
│ 解析 YAML front matter       │
│ 提取颜色/字体/间距/圆角令牌   │
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Step 2.2: 用户微调(可选)      │
│ "但把主色换成蓝色"            │
│ 覆盖对应令牌值                │
└──────────┬───────────────────┘
           │
           ▼
      输出: DESIGN.md (标准格式)

风格选择优先级：

1. awesome-design-md 匹配（用户指定品牌名）→ 直接复用 DESIGN.md
2. ui-ux-pro-max BM25 搜索（用户描述风格特征）→ 从 67 风格中匹配
3. 内置设计知识（通用/兜底）→ 从零生成

Phase 5 集成：自动化令牌校验

在质量审查阶段，增加 @google/design.md CLI 自动校验：

# 校验 DESIGN.md 格式正确性
npx @google/design.md lint DESIGN.md

# 检查项:
# ✅ broken-ref: 令牌引用完整性 (error级)
# ✅ contrast-ratio: WCAG AA 对比度 ≥ 4.5:1 (warning级)
# ✅ orphaned-tokens: 未使用的孤岛令牌 (warning级)
# ✅ section-order: 章节顺序合规 (warning级)
# ✅ missing-typography: 字体令牌缺失 (warning级)

Phase 4 集成：导出到框架配置

# 导出 Tailwind v4 config
npx @google/design.md export DESIGN.md --format tailwind4

# 导出 W3C DTCG JSON
npx @google/design.md export DESIGN.md --format dtcg

MASTER.md → DESIGN.md 格式迁移

Anti-AI-Taste 审查

防止 AI 生成千篇一律的模板化 UI。在 Phase 5 质量审查时,额外执行反「AI味」设计审查。

AI味反模式清单

审查流程

1. 视觉扫描 → 对照9项反模式清单逐一检查
2. 辨识度测试 → 截图放到 Pinterest/Dribbble 中,能一眼认出吗?
3. 设计溯源 → 每个设计决策有理由,而非「AI习惯这么做」
4. 修复建议 → 对命中的模式给出1-2个替代方案
5. 重验证 → 修复后再次走审查流程,直到通过率 ≥ 80%

阻断性反模式

以下任一情况直接判定反AI味审查不通过:

• 出现 ≥ 5 项 AI 味反模式
• Hero 区域使用蓝紫渐变且无品牌理由
• 全站仅使用 Inter 字体(无品牌字体注入)
• 3 个以上 Glassmorphism 卡片相邻出现

文件导航

dog-frontier/
├── SKILL.md                     # 本文件 — 流程总控、触发条件、验收标准、DESIGN.md集成
├── ATTRIBUTIONS.md              # 21个集成技能+DESIGN.md生态的完整归属声明
├── README.md                    # 快速开始与 DESIGN.md 生态说明
├── references/
│   ├── workflow.md              # 5阶段详细说明,每阶段输入/输出/步骤/示例
│   ├── handoff-format.md        # 阶段间交接的结构化格式定义(DESIGN.md格式)
│   └── qa-checklist.md          # 最终验收清单(6维度35项+design.md lint)
├── scripts/
│   └── design-system.py         # 设计系统生成脚本(BM25搜索 + 反模式过滤)
├── assets/
│   ├── design-tokens.md         # 三阶令牌架构参考(DESIGN.md YAML格式)
│   ├── ui-styles-catalog.md     # 67种UI风格速查
│   ├── vue-patterns.md          # Vue 3组件设计模式
│   ├── css-expertise.md         # CSS高级技巧手册
│   ├── landing-patterns.md      # 12段式落地页结构
│   ├── design-brief.md          # 设计简报模板
│   └── output-formats.md        # 固定输出格式模板(DESIGN.md标准格式)