explore-design

用途

explore-design 用于在设计早期阶段快速生成多个视觉方向，帮助用户并排对比并选择。它输出一个单一的、自包含的 HTML 文件，展示 3–6 个截然不同的视觉方向，适用于 UI 区块、页面或组件。输出仅供视觉比较，并非生产代码。

主要能力

两阶段工作流：探索阶段生成并排对比；实现阶段在用户选择变体或要求构建模拟图时，读取 references/implement.md 并遵循其步骤。
品牌扫描与初始化：在任何操作之前运行 bash <skill-dir>/scripts/scan-brand.sh <repo-root>。若状态为 TEMPLATE_FOUND，复用品牌模板；若为 NO_TEMPLATE，需先完成品牌初始化（读取 references/brand-init.md），最终在磁盘上生成 design-explorations/_template.html 和 _brand.md。品牌初始化仅用于文档外观，源模拟/线框图提供内容而非品牌。
可选的 Landingfolio 灵感：若连接了 Landingfolio MCP（工具名 mcp__landingfolio__*），可拉取 3–5 个真实示例来启发变体构思；未安装时跳过并告知用户，不阻塞、不询问。
构思与宣告：头脑风暴 4 个（范围 3–6）截然不同的方向，每个方向有一句话论点，并在写入前宣告，如“Building 4 directions: A) social-proof-led, B) calculator-led, …”。
基于真实数据：若界面渲染数据记录，先采样真实数据集，使用真实记录的值绘制。允许展示产品尚不存在的字段，但需在清单中标记为理想化元素。
输出文件结构：页面头部（标题、副标题、元信息条）、变体区块（字母标签+名称、一句话权衡、实时预览、简短分析）、决策行（“If you want X → pick A…”）。
清单文件：若涉及数据记录，生成 <short-name>.manifest.md，每行一个数据绑定元素：元素 · 字段路径 · 类别 · 计数。类别：✅ Real（可靠填充）、⚠️ Sometimes（常为空，量化如 70/120）、❌ Aspirational（当前无数据，量化）。

使用方式

运行品牌扫描脚本，检查初始化状态。
读取源规格/需求，确定要探索的具体界面（如 hero、卡片、页面、流程）。若规格较大，聚焦最高杠杆的界面并说明范围。
可选：若 Landingfolio MCP 已连接，拉取 3–5 个真实示例作为灵感。
构思 3–6 个截然不同的方向，每个一句话论点，并在写入前宣告。
若界面渲染数据记录，先采样真实记录。
复制 design-explorations/_template.html 为 design-explorations/<short-name>.html，填充页面头部和变体区块，使用规格/代码库中的真实文案。
若涉及数据记录，生成 <short-name>.manifest.md。
在默认浏览器中打开文件（macOS 用 open，Linux 用 xdg-open，Windows 用 start）；无头环境跳过并报告路径。
报告变体及其一句话权衡、文件路径、清单路径（若生成）、需标记的理想化元素。
当用户选择变体时，读取 references/implement.md 并遵循。

过程中需持续叙述进展：扫描后（发现什么）、确定范围后、写入前（变体论点）、写入后（路径）。避免长时间无输出。

输出位置

在仓库根目录的 design-explorations/<short-name>.html（若目录不存在则创建；可提示加入 gitignore）。若仓库有常规临时位置，优先使用其中的 explorations/ 文件夹——扫描脚本会在两处查找模板。

变体设计规则

变体必须真正不同：在布局、层次、密度、语气和优先级上拉开差距。仅按钮颜色不同是浪费格式。若无法写出截然不同的一句话论点，则变体不够不同。
每个变体明确说出其权衡（如“Most confident, least social-proof”），让用户基于权衡而非感觉选择。
使用规格/代码库中的真实文案，禁止使用 Lorem ipsum。
默认情况下，变体探索结构而非品牌身份：每个变体使用初始化时捕获的品牌（字体、颜色、感觉），探索发生在布局、层次、密度和优先级上。仅当用户明确要求探索视觉身份/品牌重塑方向时，才允许偏离品牌。
源规格/模拟/线框图是内容，不是风格强制要求。其现有布局最多是多个变体方向之一；变体所穿品牌来自初始化，而非模拟图。
所有变体使用相同的固定内容（相同产品、相同数据形状），用户比较的是视觉处理而非功能。

基于真实数据（关键）

用虚构、完全填充的数据绘制探索图会设定真实数据无法满足的期望：用户爱上模拟图，实现却简陋。两条规则：

绘制前拉取真实数据：当界面渲染数据记录时，从仓库的数据模型、API 响应形状、固定数据或种子数据中采样实际数据集，并用真实记录的值绘制。
理想化元素允许但需披露：展示产品尚不存在的字段可以（这是要构建的规格），但需在清单中标记，以便选择时知晓差距。

清单（<short-name>.manifest.md，与 HTML 同目录）：每行一个数据绑定元素：元素 · 字段路径 · 类别 · 计数。类别：✅ Real（可靠填充）、⚠️ Sometimes（常为空，量化如 70/120）、❌ Aspirational（当前无数据，量化）。从真实数据集计数，不要猜测。实现阶段将每个差距转化为明确的来源/派生/占位/删除决策。仅当无数据记录时（如纯营销文案）可跳过清单。

样式规则

页面外观（头部、标签、分析卡片）来自 _template.html——初始化时捕获的用户品牌，不要按探索重新设计。每个变体的内部预览是结构自由的画布，但默认穿着捕获的品牌；若品牌本身是深色，预览也是深色——这是品牌，不是违规。用每个变体的前缀（.va-、.vb- 等）限定变体 CSS 作用域，避免交叉污染。

硬性规则：

单一 HTML 文件。无 CSS 文件、无 JS 模块、无 Tailwind CDN——使用限定于页面的原生 CSS。
每个字体栈都有系统字体回退。
页面外观不得使用深色“AI 制品”美学（深灰 + 霓虹 + 等宽字体）。
HTML 中除文件顶部一个头部块（标题、源规格、日期）外无注释。
报告完成前在浏览器中打开文件。

适用场景

探索 UI 区块、页面或组件的多个视觉方向。
当用户说“探索方向”“展示几个选项”“头脑风暴设计”“构思这个”“这可以长什么样”。
当用户说“实现选项 C”“构建这个探索”“让实现匹配模拟图”时，进入第二阶段。
当用户说“初始化”“重新品牌化探索”时，重新运行品牌初始化。

不适用场景

直接需要生产组件，无探索步骤也无模拟图可匹配 → 直接在代码库中构建。
已有来自本技能外部的批准方向，无模拟图需保持一致性 → 正常实现。
对已发布代码的微小样式调整 → 直接编辑。

限制与故障排除

未运行初始化（磁盘上无 _template.html/_brand.md）：跳过了工作流第一步的门禁。运行扫描脚本，完成初始化，再从品牌模板重新皮肤化探索图。
所有变体看起来相同：论点不够不同——在改 CSS 前重做论点。
页面外观与产品冲突：初始化仅运行扫描或捕获了错误品牌。重新运行（“rebrand the explorations”）。
实现结果简陋：差距被隐藏而非解决——运行实现阶段的清单 + 差距决策步骤。

示例

“探索定价 hero 的 4 个方向” → 扫描（找到模板）→ 论点：A) 社会证明主导，B) 计算器主导，C) 层级对比主导，D) 推荐语主导 → design-explorations/pricing-hero.html → 打开 → 用户选择 → 实现阶段。
“就选选项 C——构建它” → 读取 references/implement.md：提取变体 C 到参考文件，构建数据清单，与用户解决每个差距，实现，截图对比至一致。