evaluate

评估

全面评估任意 AI 生成内容的质量，并以可视化形式生成报告。

工作原理

┌──────────────────────────────────────────────┐
│                                              │
│  Phase 1: SPEC GENERATION                    │
│  Analyze the artifact type                   │
│  Generate tailored evaluation criteria       │
│  Define scoring dimensions + weights         │
│  Set quality gates                           │
│           │                                  │
│           ▼                                  │
│  Phase 2: EVALUATION                         │
│  Run automated checks (when possible)        │
│  Visual/manual inspection                    │
│  Score each dimension with evidence          │
│  Identify systemic vs local issues           │
│           │                                  │
│           ▼                                  │
│  Phase 3: REPORT (via /visualize)            │
│  Generate a beautiful HTML eval report       │
│  Scores, charts, screenshots, fix list       │
│  Radar chart of dimensions                   │
│  Before/after tracking                       │
│                                              │
└──────────────────────────────────────────────┘

阶段 1：生成规范

针对任意内容，通过分析生成评估规范：

1. 识别内容类型

• HTML 可视化 → 视觉设计、交互性、技术、内容、可分享性
• 代码/项目 → 正确性、可读性、架构、测试覆盖率、性能
• 文档/报告 → 清晰度、结构、准确性、完整性、语气
• 对话/Agent → 实用性、准确性、语气、效率、安全性
• 幻灯片 → 所有可视化维度 + 叙事流畅度、说服力、节奏
• 仪表盘 → 数据准确性、信息密度、易浏览性、可操作性
• 自定义 → 根据技能的 SKILL.md 和既定目标推导维度

2. 生成评估维度

针对每种内容类型，生成 6–10 个评估维度。每个维度都需要：

• 名称 — 简短、明确的标签
• 描述 — 此维度衡量的内容
• 权重 — 百分比（所有权重总和为 100%）
• 评分锚点 — 10、8、6、4 分分别代表什么表现？
• 自动化检查 — 可执行的程序化测试（如适用）
• 扣分项 — 具体问题及其扣分值

3. 设定质量门槛

根据内容的用途设定门槛：

门槛	标准	含义
🚀 卓越	总分 ≥ 9.5，且各项 ≥ 9	一流品质。值得广泛分享。
✅ 可发布	总分 ≥ 9.0，且各项 ≥ 8	达到生产就绪标准。
⚠️ 可接受	总分 ≥ 8.0，且各项 ≥ 7	可以使用，但不够出色。
🔧 需要改进	总分 ≥ 7.0 或任一项 < 7	发布前修复。
❌ 不合格	总分 < 7.0 或任一项 < 5	需要大幅返工。

4. 输出规范文档

将规范写入 eval-spec-[artifact-name].md，以便参考和复用。

阶段 2：评估

针对 HTML 可视化

在浏览器中以 3 种视口尺寸打开：1280×720、768×1024、375×667。

自动化审查（在浏览器控制台中运行）：

(function() {
  const audit = {};
  const style = [...document.querySelectorAll('style')].map(s => s.textContent).join(' ');
  const html = document.documentElement.outerHTML;

  // Structure
  audit.hasDoctype = /^<!doctype html>/i.test(html);
  audit.hasLangAttr = !!document.documentElement.lang;
  audit.hasCharset = !!document.querySelector('meta[charset]');
  audit.hasViewport = !!document.querySelector('meta[name="viewport"]');
  audit.hasTitle = document.title.length > 0;

  // Menu system
  audit.menuExists = !!document.querySelector('.viz-menu');
  audit.menuHasTheme = !!html.match(/cycleTheme|themeLabel/i);
  audit.menuHasDownload = !!html.match(/htmlToImage|html-to-image/i);
  audit.menuHasPrint = !!html.match(/window\.print/i);

  // Theme system
  audit.hasCSSVars = !!style.match(/--bg\s*:/);
  audit.hasDarkTheme = !!style.match(/(\.theme-dark|:root)[\s\S]*?--bg/);
  audit.hasLightTheme = !!style.match(/\.theme-light/);
  audit.themePersistedToStorage = !!html.match(/localStorage.*theme/i);

  // Typography
  audit.hasInterFont = !!html.match(/fonts\.googleapis.*Inter|font-family.*Inter/i);
  audit.hasFontFallback = !!style.match(/-apple-system|system-ui/);
  audit.bodyFontSize = parseFloat(getComputedStyle(document.body).fontSize);
  audit.bodyFontOK = audit.bodyFontSize >= 14;

  // Layout
  audit.usesFlexOrGrid = !!(style.match(/display\s*:\s*(flex|grid)/));
  audit.hasMaxWidth = !!style.match(/max-width/);
  audit.hasResponsiveBreakpoints = !!style.match(/@media.*max-width|@media.*min-width|sm:|md:|lg:/);

  // Print & Accessibility
  audit.hasPrintStyles = !!style.match(/@media\s*print/);
  audit.hasPrintColorAdjust = !!style.match(/print-color-adjust/);
  audit.hasReducedMotion = !!style.match(/prefers-reduced-motion/);
  audit.hasAriaLabels = !!html.match(/aria-label/);
  audit.hasSemanticHTML = !!html.match(/<(header|main|nav|section|article|footer)/);

  // Animations
  audit.hasKeyframes = !!style.match(/@keyframes/);
  audit.hasTransitions = !!style.match(/transition\s*:/);

  // Performance
  audit.fileSizeKB = Math.round(new Blob([html]).size / 1024);
  audit.fileSizeOK = audit.fileSizeKB < 200;
  audit.noExternalImages = document.querySelectorAll('img[src^="http"]').length === 0;
  audit.htmlToImageLoaded = typeof htmlToImage !== 'undefined';

  // Summary
  const bools = Object.entries(audit).filter(([k,v]) => typeof v === 'boolean');
  const passed = bools.filter(([k,v]) => v).length;
  audit._passed = passed;
  audit._total = bools.length;
  audit._percent = Math.round(passed / bools.length * 100);
  audit._failures = bools.filter(([k,v]) => !v).map(([k]) => k);

  console.table(audit);
  return audit;
})();

视觉评分 — 可视化的 8 个维度：

#	维度	权重	10 分 =	6 分 =
D1	第一印象	15%	达到 Apple 主题演讲的品质	感觉像普通模板
D2	排版	15%	层级清晰，使用 Inter 字体，字号灵活	字号全都相同，缺乏层级
D3	色彩与对比度	10%	色彩协调，符合 WCAG AA，浅色和深色主题都美观	色彩冲突，对比度低
D4	布局与间距	15%	节奏一致、响应式、留白充足	拥挤，在移动端显示异常
D5	内容质量	15%	5 秒内传达清晰信息，没有冗余内容	内容令人困惑，包含占位文本
D6	交互性	10%	菜单 + 主题 + 下载 + 打印均运行完美	功能缺失或无法正常使用
D7	技术质量	10%	无错误，语义化、易访问，适合打印	控制台报错，布局异常
D8	可分享性	10%	不用别人提醒也会想发到网上	还不如 Canva

针对代码/项目

维度：正确性、可读性、架构、错误处理、性能、测试、文档、安全性

针对文档

维度：清晰度、结构、准确性、完整性、语气、格式、可操作性、简洁性

针对 Agent 对话

维度：实用性、准确性、语气、效率、安全性、上下文感知、工具使用、后续跟进

阶段 3：可视化报告（通过 /visualize）

评分后，使用 visualize 技能生成一份精美的 HTML 仪表盘作为评估报告：

报告结构

1. 主视觉区 — 制品名称、总分（大号数字）、质量门禁徽章
2. 雷达图 — 在雷达／蜘蛛图上绘制所有维度（Chart.js）
3. 维度卡片 — 每个维度作为一张卡片，包含分数、进度条和关键备注
4. 自动化审计 — 带百分比的通过／失败检查清单
5. 截图 — 嵌入关键视图（如果是 HTML 制品）
6. 修复清单 — 以看板式布局展示按优先级排序的修复项（严重／高／中／低）
7. 系统性问题 — 影响所有输出的模式（标记为需要修复 SKILL.md）
8. 历史记录 — 如果重新评估，则显示前后分数对比图表

报告文件名

eval-report-[artifact-name]-[date].html

报告本身在可视化评估标准中的得分必须 ≥ 9.0。

这是终极的自我检验——我们的评估工具使用自己的可视化工具生成评估结果。

改进循环

Generate artifact (any skill)
       ↓
/evaluate → Spec + Score + Visual Report
       ↓
Review report → identify fixes
       ↓
Fix (systemic → SKILL.md, local → artifact)
       ↓
/evaluate again → compare scores
       ↓
Ship when gate = SHIP or EXCEPTIONAL

每个制品最多循环 3 次。 如果 3 次循环后仍无法达到 SHIP，问题出在技能上——更新技能说明，而不是制品。

快速开始

# Evaluate a visualization
/evaluate path/to/visualization.html

# Evaluate with custom context
/evaluate path/to/code-project --type code

# Re-evaluate after fixes (tracks improvement)
/evaluate path/to/visualization.html --loop 2

# Generate specs only (no scoring)
/evaluate --specs-only --type dashboard