用途
ris-draft 用于生成单页 HTML 图表，视觉风格严格遵循扁平工程蓝图：看起来像印刷的工程规格说明书，而不是营销落地页。适合制作架构图、系统流程图、技术规格表和组件图，并以独立 HTML 文件形式交付，可用于幻灯片、报告或导出。
主要能力
- 采用 Tailwind v4（通过 @tailwindcss/browser CDN，固定 v4）进行布局与工具类样式。
- 采用 D3 v7（通过 jsDelivr CDN，固定 v7）渲染 SVG 图形，支持节点、连接线、布局与动画。
- 提供设计令牌（在单个 @theme 块中声明），包括画布、边框、主/次文字、语义强调色、界面字体与等宽字体。
- 提供可复用组件片段：节点/方框、徽章、正交 CSS 连接线、规格网格单元。
- 提供 D3 模式：显式节点与连线（架构图）、树布局（层级结构）、DAG/流程（可选 d3-dag 或手动拓扑布局）、桑基图（可选 d3-sankey 插件，关注流量时使用）。
- 提供构图指南：架构图、系统流程、规格表、组件图的不同实现建议。
使用方式
用户提出图表需求后，技能会输出一个完整的 HTML 文档，从 <!DOCTYPE html> 到 </html>，不包含 Markdown 包装或文件外注释。文档通过固定版本 CDN 引入 Tailwind 与 D3，设计令牌集中在一个 <style type="text/tailwindcss"> 的 @theme 块中，自定义 CSS 仅用于 Tailwind 工具类无法表达的部分（如 SVG marker 定义、复杂伪元素）。D3 图形默认静态渲染，不使用力导向模拟、平滑缩放/平移、悬停提示或彩色调色板，除非用户明确要求。
适用场景
- 需要独立 HTML 文件形式的架构图、系统流程图、技术规格表或组件图。
- 追求工程规格说明书式印刷感、高数据墨水比、严格对齐和单色视觉的图表。
- 用于幻灯片、报告或导出场景的静态图表交付。
限制
- 不适用于 Markdown 文档内联示意图（应使用 Mermaid 渲染器）、报纸/阅读优先的单栏页面，或多节交互式讲解页。
- 仅支持 Tailwind + D3；若用户要求其他库（Mermaid、Recharts、Chart.js），会说明不支持并建议相应替代技能。
- 默认静态，不包含交互（悬停提示、拖拽、缩放）；如需要须用户明确确认。
- 不使用外部字体（如 Google Fonts、Adobe Fonts），仅依赖系统字体栈。
- 不编造功能：资料未提及的具体收费、价格、平台兼容性或效果数据暂未提供。