design-complete

Verwendung

Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.

npx skills add https://github.com/kaikaishenshen/design-complete --skill design-complete

Vor dem Start

Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.

Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

Design Complete：统一前端设计质量系统

集成 [taste-skill](https://github.com/Leonxlnx/taste-skill)（审美品味）+ [impeccable](https://github.com/pbakaus/impeccable)（结构严谨性） 完整流水线：品（愿景）→ 建（工艺）→ 验（验证）→ 修（打磨）

架构总览

┌──────────────────────────────────────────────────────────────┐
│                    DESIGN COMPLETE SYSTEM                     │
│               Unified Command Interface (/design)             │
├────────────────────────────────┬─────────────────────────────┤
│                                │                             │
│   ┌─────────────────────┐    │    ┌───────────────────┐    │
│   │   taste-skill       │    │    │   impeccable       │    │
│   │   (THE ARTIST)      │◄───┼───►│   (THE ENGINEER)   │    │
│   │                     │    │    │                   │    │
│   │ Design Variance     │    │    │ 23 Commands       │    │
│   │ Motion Intensity    │    │    │ 7 Domain Refs     │    │
│   │ Visual Density      │    │    │ Anti-Patterns     │    │
│   │ Vibe Archetypes     │    │    │ CLI Detection     │    │
│   │ Layout Archetypes   │    │    │ Production Checks │    │
│   └─────────────────────┘    │    └───────────────────┘    │
│                                │                             │
│   ┌────────────────────────────────────────────────────┐    │
│   │            Bridge Layer (Shared Knowledge)          │    │
│   │  Typography System │ Color Tokens │ Spacing Grid   │    │
│   │  Design System Map │ Anti-Pattern Registry         │    │
│   └────────────────────────────────────────────────────┘    │
└──────────────────────────────────────────────────────────────┘

核心哲学: taste-skill 负责「好不好看」（灵魂/品味/视觉情感），impeccable 负责「能不能用」（骨架/规则/工程品质）。两者协作，不可偏废。

流水线：四阶段工作流

Phase 的顺序是固定的，但你可以从任意阶段切入（直接 /design audit 跳过前两阶段）。

请求
  │
  ▼
┌───────────────────────────────────────────────────┐
│ Phase 1: TASTE (品) — 设计品味诊断                │
│ 工具: taste-skill                                 │
│ 产出: Design Read + 3 Dials + 设计方向声明       │
└───────────────────┬───────────────────────────────┘
                    │
                    ▼
┌───────────────────────────────────────────────────┐
│ Phase 2: BUILD (建) — 结构实现                    │
│ 工具: impeccable (shape/craft)                    │
│ 产出: 生产级可交付代码                            │
└───────────────────┬───────────────────────────────┘
                    │
                    ▼
┌───────────────────────────────────────────────────┐
│ Phase 3: CHECK (验) — 质量审计                    │
│ 工具: impeccable (audit/critique)                 │
│ 产出: 审计报告 + 问题清单                         │
└───────────────────┬───────────────────────────────┘
                    │
                    ▼
┌───────────────────────────────────────────────────┐
│ Phase 4: REFINE (修) — 打磨完善                   │
│ 工具: taste-skill (tune knobs) + impeccable       │
│       (polish/bolder/quieter/distill)             │
│ 产出: 最终交付物                                  │
└───────────────────────────────────────────────────┘

统一命令参考

命令	阶段	说明	调用的子系统
`/design craft <target>`	全流水线	完整流程: 品味读盘 → 塑形构建 → 审计验收 → 打磨交付	taste + impeccable
`/design taste <target>`	Phase 1	设计品味诊断：读盘 → 设三旋钮 → 定设计方向	taste-skill
`/design build <target>`	Phase 2	带 taste 品味的 build：读取 taste 的 Design Read 后构建	impeccable(craft/shape)
`/design check <target>`	Phase 3	质量检查：audit + critique	impeccable(audit/critique)
`/design critique <target>`	Phase 3	UX 设计评审 + 启发式评分	impeccable(critique)
`/design audit <target>`	Phase 3	技术质量审计（a11y/性能/响应式）	impeccable(audit)
`/design refine <target>`	Phase 4	打磨完善：polish + anti-pattern 修复	taste + impeccable
`/design tune <knob>=<val>`	跨阶段	动态调整 taste-skill 三旋钮	taste-skill
`/design init`	设置	初始化项目设计上下文	taste + impeccable
`/design document`	设置	从现有代码生成 DESIGN.md	impeccable(document)
`/design extract <target>`	Phase 2	提取可复用组件到设计系统	impeccable(extract)
`/design bolder <target>`	Phase 4	放大设计胆量	impeccable(bolder) + taste
`/design quieter <target>`	Phase 4	降低设计音量	impeccable(quieter)
`/design distil <target>`	Phase 4	剥离到本质	impeccable(distill)
`/design animate <target>`	Phase 4	添加有目的性的动效	impeccable(animate) + taste
`/design colorize <target>`	Phase 4	引入战略性色彩	impeccable(colorize) + taste
`/design layout <target>`	Phase 4	修正布局与间距	impeccable(layout) + taste
`/design typeset <target>`	Phase 4	修正字体层级	impeccable(typeset) + taste
`/design adapt <target>`	Phase 4	适配不同设备	impeccable(adapt)
`/design harden <target>`	Phase 4	生产化：错误处理/边界情况	impeccable(harden)
`/design clarify <target>`	Phase 4	改进 UX 文案	impeccable(clarify)
`/design delight <target>`	Phase 4	增加令人愉悦的细节	impeccable(delight) + taste

执行协议

步骤 0：识别意图

判断用户需要哪一级支持：

用户说	执行
"帮我建个网站/页面/组件"	`/design craft <target>` — 全流水线
"看看这个页面设计怎么样"	`/design critique <target>` — Phase 3
"这个页面感觉不对"	`/design taste <target>` — Phase 1 诊断，按需推进
"帮我改改排版/配色"	`/design typeset <target>` 或 `/design colorize <target>`
"帮我检查质量"	`/design audit <target>`
"发布前过一遍"	`/design refine <target>` — Phase 4
"太保守了/太激进了"	`/design bolder <target>` 或 `/design quieter <target>`

步骤 1：加载子系统上下文

根据识别到的命令，加载对应的 Skill 指令文件：

当需要 taste-skill 时（/design taste, craft, tune, bolder, quieter, colorize, typeset, layout, delight, animate）：

markdown

加载 .workbuddy/skills/design-taste/SKILL.md 中的 taste-skill 规则。
重点关注：
- Section 0: BRIEF INFERENCE — 设计读盘
- Section 1: THE THREE DIALS — 三旋钮
- Section 2: BRIEF → DESIGN SYSTEM MAP — 设计系统映射
- Section 3: VIBE & TEXTURE ARCHETYPES — 氛围与质感原型
- 对应风格的预输出检查清单

当需要 impeccable 时（/design build, check, critique, audit, refine, adapt, harden, clarify, optimize）：

markdown

加载 .workbuddy/skills/impeccable/SKILL.md 中的 impeccable 规则。
- Setup 流程：运行 context.mjs → 读取 command reference → 读取 register reference
- Design guidance: 颜色/字体/布局/动效/交互规则
- Absolute bans: 27 条反模式规则
- 对应子命令的 reference 文件（.workbuddy/skills/impeccable/reference/<command>.md）

步骤 2：Bridge Layer — 数据桥接

两个子系统之间通过以下共享上下文协同：

yaml

# Shared Design Context (由 orchestator 维护)
design_context:
  # taste-skill 产出
  design_read: "<页面类型> for <受众>, <氛围词汇>"
  dials:
    design_variance: 1-10     # 设计方差
    motion_intensity: 1-10    # 动效强度
    visual_density: 1-10      # 视觉密度
  vibe_archetype: "Ethereal Glass | Editorial Luxury | Soft Structuralism"
  layout_archetype: "Asymmetrical Bento | Z-Axis Cascade | Editorial Split"
  banned_elements: []          # 已识别的反模式元素

  # impeccable 产出
  register: "brand | product"  # 设计寄存器
  anti_patterns_found: []      # 检测到的反模式
  audit_scores:
    accessibility: 0-10
    performance: 0-10
    responsive: 0-10
  critique_score: 0-10
  polish_status: "pending | in_progress | complete"

  # 共享知识
  typography_system:
    display_font: ""
    body_font: ""
    scale_ratio: 1.25
  color_tokens:
    primary: ""
    background: ""
    surface: ""
    ink: ""
    accent: ""

桥接规则：

taste-skill 的 Design Read 自动传给 impeccable 作为设计上下文
taste-skill 的 3 Dials 映射到 impeccable 的 register 选择：

高 VARIANCE (7-10) + 高 MOTION (7-10) → brand register（品牌/市场页）
低 VARIANCE (1-4) + 低 DENSITY (1-3) → product register（产品 UI）

impeccable 的 anti-pattern 检测结果回传给 taste-skill 用于下一轮调优
taste-skill 的 banned elements（Section 2 绝对禁令）与 impeccable 的 absolute bans 合并为统一的禁止清单

步骤 3：执行 Pipeline

完整流水线：`/design craft <target>`

Phase 1 (TASTE):
  ├─ 0.B: 输出 Design Read 声明
  ├─ 1: 设置三旋钮（默认 8/6/4，按 Scene 调）
  ├─ 2: 选择 Design System（设计系统映射）
  ├─ 3: 选择 Vibe + Layout 原型
  └─ 输出: 设计方向声明 + 三旋钮值
       │
       ▼
Phase 2 (BUILD):
  ├─ impeccable: Setup 步骤 (context.mjs → 读取参考)
  ├─ register 选择（taste 的 Design Read 决定 brand/product）
  ├─ shape → craft 流程
  └─ 输出: 生产级代码
       │
       ▼
Phase 3 (CHECK):
  ├─ critique: UX 设计评审
  ├─ audit: 技术质量检查（a11y/perf/responsive）
  ├─ anti-pattern 检测
  └─ 输出: 审计报告 + 问题清单
       │
       ▼
Phase 4 (REFINE):
  ├─ 根据审计结果确定 refine 方向
  ├─ polish: 最终质量 pass
  ├─ 可选: bolder/quieter/typeset/colorize
  ├─ 可选: 调整 taste-skill 三旋钮
  └─ 输出: 最终交付 + 预输出检查清单

单阶段命令

各单阶段命令执行对应 Phase 的规则，不跑完整流水线。

`/design taste <target>` — 只跑 Phase 1，输出 Design Read + 三旋钮 + 设计方向，不写代码。 `/design build <target>` — 如果已有 Design Read 上下文，直接 Phase 2 构建；否则先快速 Phase 1 读盘。 `/design check <target>` — Phase 3 审计，返回审计报告。 `/design refine <target>` — Phase 4，根据上下文或用户指出的问题打磨。 `/design tune <knob>=<val>` — 立即调整 taste-skill 三旋钮并重新输出设计方向。

步骤 4：输出规则

报告类输出（audit/critique/check）：

用结构化表格呈现结果
明确标出 P0/P1/P2 级别问题
给出具体的修复建议

代码类输出（craft/build/refine）：

必须通过 taste-skill 的预输出检查清单（Section 8）
必须遵守 impeccable 的 absolute bans
必须包含 responsive/mobile collapse
必须在完成时暗示下一步建议

设计诊断类输出（taste/tune）：

Design Read 一行声明
三旋钮取值及理由
Vibe + Layout 选择
1-2 个待确认的开放式问题

三旋钮 ↔ Impeccable Register 映射表

taste-skill Dial	低值 (1-3)	中值 (4-7)	高值 (8-10)
DESIGN_VARIANCE	product register	取决于场景	brand register
MOTION_INTENSITY	微交互动效	滚动触发动效	电影级物理动效
VISUAL_DENSITY	画廊式留白	标准信息密度	仪表盘级密度

taste 的 Vibe / Layout 原型 → impeccable 的 register 建议：

taste Vibe	taste Layout	推荐 impeccable Register	说明
Ethereal Glass	Asymmetrical Bento	brand	实验性布局适合品牌市场页
Editorial Luxury	Editorial Split	brand	编辑式排版适合内容页
Soft Structuralism	Z-Axis Cascade	brand or product	取决于受众
（无特殊 Vibe）	（标准布局）	product	产品 UI 走沉稳路线

桥接协议：跨系统通信协调机制

1. 上下文传播

taste-skill 产生的:
  ├─ Design Read → impeccable.Register 选择
  ├─ Three Dials → impeccable 设计规则强度（高 Variance 时放宽 layout 约束）
  ├─ Vibe Archetype → 影响 impeccable 的 color strategy 选择
  └─ Banned Elements → 合并到 impeccable 的 absolute bans

2. 冲突解决

当 taste-skill 的审美建议与 impeccable 的工程规范冲突时：

冲突场景	裁决规则
taste: "用夸张字体大小" vs impeccable: "heading ≤ 6rem"	遵循 impeccable（可访问性优先）
taste: "大胆渐变" vs impeccable: "禁止渐变文字"	遵循 impeccable（反模式）
taste: "密集布局" vs impeccable: "cap line length 75ch"	遵循 impeccable（可读性优先）
taste: "实验性布局" vs impeccable: "z-index scale"	遵循 taste + impeccable 工程实践
taste: "高 Motion" vs impeccable: "reduced-motion"	两者兼顾：提供 prefers-reduced-motion 降级

总原则：工程规范（impeccable）作为硬约束，审美方向（taste-skill）作为软变量。在硬约束内最大化审美自由。

3. 增量反馈循环

[taste] Design Read ─────────► [build] 代码实现
     ▲                              │
     │                              ▼
     │                      [check] 审计报告
     │                              │
     └──────────────────────────────┘
              (refine 回传审计结果以调整 taste 方向)

每次 refine 后，taste-skill 的三旋钮可基于 check 结果微调：

audit 发现 a11y 问题 → 降低 DESIGN_VARIANCE
critique 指出信息过载 → 降低 VISUAL_DENSITY
用户反馈"不够出彩" → 提高 DESIGNVARIANCE + MOTIONINTENSITY

配置

yaml

# 在用户项目根目录放置 .design-complete.yaml 或在工作区 memory 中记录
design_complete:
  default_pipeline: "full"          # full：完整 | taste-only：仅品味 | check-only：仅检查 | refine-only：仅打磨
  default_register: "auto"          # auto：自动 | brand：品牌 | product：产品
  taste_skill:
    default_variance: 8
    default_motion: 6
    default_density: 4
  impeccable:
    cli_available: true             # 是否安装了 npx impeccable
    strict_checks: true             # 是否强制执行所有检查

快速参考卡

常见任务的最佳命令

任务	命令	说明
从零开始建网站	`/design craft <site>`	全流水线：品味→构建→审计→打磨
检查现有页面	`/design check <page>`	审计 + 评审
设计定方向	`/design taste <project>`	仅设计诊断，不写代码
发布前打磨	`/design refine <page>`	最终检查 + 质量 pass
感觉太保守	`/design bolder <page>`	放大 + 调整 dials
感觉太花哨	`/design quieter <page>`	压低 + 调整 dials
调整个性化	`/design tune variance=9`	实时调整设计方差
初始化项目	`/design init`	设置设计上下文

安装验证

执行任何 /design 命令前，验证两个子系统可用：

taste-skill：确认 .workbuddy/skills/design-taste/SKILL.md 存在
impeccable：确认 .workbuddy/skills/impeccable/SKILL.md 存在 + npx impeccable 可用

如果任一子系统缺失，提示用户先安装对应开源项目。

Verwendung

Vor dem Start

Design Complete：统一前端设计质量系统

架构总览

流水线：四阶段工作流

统一命令参考

执行协议

步骤 0：识别意图

步骤 1：加载子系统上下文

步骤 2：Bridge Layer — 数据桥接

步骤 3：执行 Pipeline

完整流水线：`/design craft <target>`

单阶段命令

步骤 4：输出规则

三旋钮 ↔ Impeccable Register 映射表

桥接协议：跨系统通信协调机制

1. 上下文传播

2. 冲突解决

3. 增量反馈循环

配置

快速参考卡

常见任务的最佳命令

安装验证

Weitere Skills

design-taste-frontend

impeccable

design-complete

Verwendung

Vor dem Start

Design Complete：统一前端设计质量系统

架构总览

流水线：四阶段工作流

统一命令参考

执行协议

步骤 0：识别意图

步骤 1：加载子系统上下文

步骤 2：Bridge Layer — 数据桥接

步骤 3：执行 Pipeline

完整流水线：/design craft <target>

单阶段命令

步骤 4：输出规则

三旋钮 ↔ Impeccable Register 映射表

桥接协议：跨系统通信协调机制

1. 上下文传播

2. 冲突解决

3. 增量反馈循环

配置

快速参考卡

常见任务的最佳命令

安装验证

Weitere Skills

design-taste-frontend

impeccable

完整流水线：`/design craft <target>`