SuperAPI AI 工具集

space-chart-html

前端与建站

查看项目

更新于 10-16 07:23

技能介绍

用途:把文字描述转化为设计精美、布局清晰的图表 HTML 文件,信息准确、视觉舒适、截图即可分享。

主要能力:支持 10 种图表类型——流程图、架构图、ER 图、商业模式画布、用户旅程图、思维导图、竞品分析图、SWOT 分析、产品路线图、组织架构图;用户未指定类型时按内容自动判断。内置 3 种视觉风格:黑白简约(mono)、深色暗调(dark)、Claude 暖色(claude,默认);用户指定品牌风格时,调用 space-brand-ui-design skill 获取设计 token 并应用。生成后可要求切换风格重新输出。

使用方式:工作流为识别图表类型、收集内容(信息不足时追问不超过 3 个问题)、选择风格、生成 HTML。输出为单文件 HTML,CSS 写在 style 标签内,不使用 JavaScript,用 HTML+CSS 布局(Flexbox/Grid),字体用系统字体栈,颜色用 CSS 变量,页面最大宽度 1400px 居中。文件保存路径为 00 收件箱/画板/space-chart-html/MMDD-主题.html,生成后用 open 命令打开浏览器预览。品牌风格 token 获取命令:cd /tmp && mkdir -p design-md-tmp && cd design-md-tmp && npx getdesign@latest add <slug>。

适用场景:工作流与决策树、系统架构、数据模型、商业模式分析、用户体验触点、头脑风暴、竞品对比、战略分析、版本规划、团队结构等可视化。

限制:资料未提供收费、价格、平台支持范围等信息;生成依赖对应 skill 与 references 文件(style-presets.md、chart-templates.md);不使用 JavaScript,故不支持交互式图表。