spadeontop/Skills 设计上下文生成器与 OpenCode 数据引擎

设计上下文生成器与 OpenCode 数据引擎

一个下一代系统技能，用于交互式地架构、视觉测试并生成紧凑且高效的令牌化前端设计系统（DESIGN_CONTEXT.md），同时附带一个零依赖的实时 HTML 预览（design-preview.html）。

直接集成了通过浏览器开发者工具 MCP 分析提取的 OpenCode Data（opencode.ai/data）技术等宽遥测设计系统，具有 IBM Plex Mono 字体、黑曜石炭笔画布（#161616）、发丝级 0.5px 精确边框、实时状态滚动条、排行榜排名卡片以及高密度数据表格。

严格执行：

1. 60-30-10 色彩规则 + 功能性反馈状态。
2. 数学化 WCAG 2.1 AA/AAA 无障碍性（正文副本不低于 4.5:1，边框/控件不低于 3.0:1，增强文本不低于 7.0:1）。
3. Tailwind CSS v4 浏览器 CDN 架构（@tailwindcss/browser@4），配合 @theme 和 @custom-variant dark。
4. 令牌化语义实用工具配方（紧凑类名，无自定义 CSS 膨胀）。
5. 无表情符号（使用 1.5px/2px 描边的清晰 SVG 图标或简洁的文本徽章）。

---

何时使用

• 初始化、升级或为任何 Web 应用或仪表板生成 DESIGN_CONTEXT.md 时。
• 创建遥测仪表板、AI 排行榜、开发者工具或受 OpenCode Data（opencode.ai/data）启发的数据密集型平台时。
• 为 Tailwind CSS v4（CDN 或 Vite/CLI）或 Tailwind v3 建立设计令牌、UI 指南或样式标准时。
• 为下游 AI 编码代理提供简洁、无歧义的组件蓝图，以防止任意十六进制颜色代码漂移时。

---

核心指令与约束

1. 禁止一次性输出：不得在首次交互时输出最终的 DESIGN_CONTEXT.md。必须遵循 5 阶段交互式工作流程，以获取偏好、协调令牌、数学化验证对比度、生成实时视觉预览，并与用户确认。
2. 令牌化语义配方：蓝图必须使用紧凑的语义化 Tailwind 工具类编写（例如 px-4 py-2 rounded-input bg-primary text-primary-foreground），而不是自定义 CSS 代码块或一次性十六进制值（如 bg-[#1a2b3c]）。
3. 无表情符号：在生成的设计上下文、代码文件或用户沟通中切勿使用表情符号。请使用清晰的 SVG 图标规范或简洁的文本徽章。
4. WCAG 2.1 AA/AAA 合规性：所有颜色组合必须通过数学化对比度测试：
   • 画布/表面上的正文文本：≥ 4.5:1（AAA 标准目标为 ≥ 7.0:1）。
   • 基本图标、边框和输入控件：≥ 3.0:1。
   • 主要 CTA 按钮文本：≥ 4.5:1。
5. Tailwind CSS v4 CDN 架构：
   • 对于独立的零构建 HTML/JS，使用 <script src="https://unpkg.com/@tailwindcss/browser@4"></script>。
   • 通过 <style type="text/tailwindcss"> 使用 @theme 和 @custom-variant dark (&:where(.dark, .dark *)); 进行配置。
   • 通过 .dark 类控制 <html> 元素的动态深色模式，并在 :root 和 .dark 之间使用 CSS 变量令牌进行切换。

---

模块化参考与模板

此技能包含深入的模块化参考和生产模板：

• opencode-data-spec.md：OpenCode Data 设计系统的完整规范（IBM Plex Mono、黑曜石画布、发丝边框、遥测滚动条、排行榜卡片、数据表格、迷你折线图）。
• archetypes.md：精选预设：
  1. OpenCode Data（来自 opencode.ai/data 的技术等宽引擎）
  2. Linear / SaaS Dark（黑曜石黑、电光紫/青色、半透明边框）
  3. 超极简（纯单色、建筑感留白、零渐变）
  4. 现代清洁企业（Plus Jakarta Sans、企业蓝、清晰卡片网格）
  5. 金融终端（表格数字、订单薄阶梯、盈亏强调色）
  6. 编辑极简（展示字体、暖纸色调、文学优雅）
• semantic-tokens.md：通用 60-30-10 令牌合约、功能性令牌和 CSS 变量映射。
• typography-scales.md：字体配对、Tailwind 字体比例和表格数据规则。
• wcag-contrast-rules.md：数学化相对亮度公式和已验证的对比度矩阵。
• preview.template.html：零依赖 Tailwind v4 CDN 实时交互式 HTML 预览，带有原型切换器和主题切换。
• DESIGN_CONTEXT.template.md：供下游代理使用的完整 Markdown 蓝图模板。
• tailwind.config.template.js：Tailwind v4 CDN、v4 CSS 构建和 v3 的可导出配置。
• validate-contrast.js：用于计算对比度的 Node/浏览器脚本。

---

程序化工作流程（5 个阶段）

阶段 1：接收与发现

1. 检查用户是否指定了：
   • 目标原型（默认：OpenCode Data 或 Linear / SaaS Dark）。
   • 期望的品牌/强调色（或提供精选种子强调色：OpenCode Indigo #8190ff、Cobalt #3b5cf6、Electric Violet #8b5cf6、Emerald #10b981）。
   • 目标主题偏好（默认双模式、深色优先或浅色优先）。
   • 目标技术栈（默认：Tailwind CSS v4 浏览器 CDN 用于零构建 HTML/JS，或 Vite/CLI）。
2. 如果未指定，使用 ask_question 交互式地澄清偏好。

阶段 2：语义协调与 OpenCode Data 映射

1. 将选定的颜色映射到严格的 60-30-10 分布 + 功能性状态：
   • 60% 主导色：bg-background、bg-surface、text-foreground。
   • 30% 次要色：bg-surface-elevated、bg-muted、text-muted-foreground、border-border、border-border-subtle。
   • 10% 强调色：bg-primary、text-primary-foreground、hover:bg-primary-hover、ring-ring。
   • 功能性：bg-success、bg-warning、bg-destructive、bg-info 及其各自的前景色。
2. 确定合适的字体堆栈：
   • 如果选择 OpenCode Data：全局应用 IBM Plex Mono。
   • 如果选择 Linear / SaaS Dark：应用 Inter 或 Geist Sans，配合 JetBrains Mono 用于表格数据。

阶段 3：数学化 WCAG 对比度验证

1. 使用 wcag-contrast-rules.md 中的相对亮度公式，计算每个前景/背景对的对比度。
2. 确保：
   • 深色模式下 #161616 画布上的正文文本实现 > 15:1（AAA）。
   • 次要文本实现 > 4.5:1（AA）。
   • 如果强调色为深色，前景文本必须为 #ffffff。
   • 如果强调色为亮霓虹色，前景文本必须为 #09090b 或 #161616。
3. 向用户展示提议的调色板表格，包含精确的十六进制值和对比度。

阶段 4：独立实时视觉预览（design-preview.html）

1. 通过使用解析后的令牌填充 preview.template.html，在项目根目录生成 design-preview.html。
2. 告知用户 design-preview.html 已准备好，可在浏览器中打开以测试：
   • 实时的 OpenCode Data 排行榜卡片、遥测状态滚动条和高密度数据表格。
   • 可保留 localStorage 状态的实时主题切换（深色/浅色）。
   • 动态原型切换器（在 OpenCode Data、Linear、超极简等原型间实时变形）。
   • 按钮状态、输入框、带 ⌘K 的搜索栏、徽章和交互式模态框。
3. 征求用户反馈或批准。

阶段 5：生产 DESIGN_CONTEXT.md 与配置导出

获得用户批准后：

1. 使用 DESIGN_CONTEXT.template.md 在项目根目录写入最终的 DESIGN_CONTEXT.md。
2. 为用户的技术栈（Tailwind v4 CDN <head> 或 tailwind.config.js）提供可导出的配置片段。
3. 保留 design-preview.html 作为未来迭代的实时视觉测试台。