投标技术方案配图:用 HTML+CSS 自动出双图并写入 docx

前言

写投标技术方案时,架构图、流程图既要「好看」又要和正文版式一致,常见做法是 PPT 或 Visio 手摆坐标,再截图贴进 Word。改一版配色或章节结构,往往要重画多张图。下面介绍 SkillHub 上的 投标技术方案配图(@user_2203d45b/haoxia),把配图流程交给 Agent:按方案内容生成「氛围图 + 结构图」双图,经浏览器排版截图后插入 docx,无需手写坐标。

这是什么

投标技术方案配图 是社区来源(community)、分类为 office-efficiency 的 Agent Skill,当前版本 1.0.0,由发布者 user_2203d45b 维护;SkillHub 页面标注作者为 Yolik。Skill 面向投标技术方案场景:为方案生成双图图表(atmosphere + structure),用纯 HTML+CSS 渲染,由浏览器驱动布局,不依赖手工坐标;并覆盖配色推导、版式选择、截图与 docx 插入。标签标明 requires_api_key=false,安装使用不强制配置 API Key。

  • SkillHub 页面:https://www.skillhub.cn/skills/user_2203d45b/haoxia
  • API 坐标页:https://api.skillhub.cn/user_2203d45b/haoxia

核心功能

以下能力均来自官方简介,未在资料中出现的细节不展开。

  1. 双图输出:为投标技术方案生成两类图——氛围图(atmosphere)与结构图(structure),便于方案既有展示感又有技术结构说明。
  2. HTML+CSS 渲染:图表由 HTML+CSS 绘制,不用在绘图工具里逐元素对齐坐标。
  3. 浏览器驱动布局:布局由浏览器完成,减少手工排版。
  4. 配色与版式:Skill 侧处理 color derivation(配色推导)与 layout selection(版式选择)。
  5. 截图与文档:完成 screenshot capture,并将结果做 docx insertion(插入 Word 文档)。

安装与启用

安装方式以 SkillHub 官方说明为准:先按 SkillHub 安装与优先源配置 准备 CLI,再把 Skill 装到当前 Agent 能识别的 skills 目录(须使用 --dir,否则默认 ./skills/ 可能不被识别)。

1、检查是否已安装 skillhub CLI

command -v skillhub && skillhub --version

未安装时,可按官方文档执行完整安装(示例为文档中的推荐命令):

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

2、安装本 Skill

也可将下面提示词发给支持 Skill 的 AI,由其按安装文档操作:

请根据 https://skillhub.cn/install/skillhub.md,安装 `@user_2203d45b/haoxia`。

命令行安装示例(将 <skills 目录> 换成你当前客户端的路径):

skillhub install @user_2203d45b/haoxia --dir <skills 目录>

常用目录(摘自 SkillHub 安装文档):

  • Cursor:~/.cursor/skills/
  • Claude Code:~/.claude/skills/
  • Codex:~/.codex/skills/ 或项目下的 .agents/skills/

安装后按你所用客户端要求重启或刷新 Skill 列表,使 Agent 加载 SKILL.md。

典型用法

官方简介给出的触发词(在对话中说明意图即可,无需记忆固定 CLI):

  • 中文:生成图表、生图、继续生图、生成配图
  • 英文:generate-charts、generate charts

可复现的交互方式示例:

  1. 在已启用该 Skill 的 Agent 中打开或说明你的投标技术方案内容(章节、架构要点、流程等)。
  2. 发送例如:为这份技术方案生成配图 或 generate-charts。
  3. 若流程分步执行,需要接续上一轮时,可使用官方提供的 继续生图。
  4. 经 Skill 描述的流程(渲染 → 截图 → docx 插入)完成后,在输出的 docx 或指定路径查看双图结果。

具体脚本路径、浏览器依赖与 docx 模板字段以 Skill 包内 SKILL.md 为准;本文未抓取包内全文,不列举未核实的配置项。

适用场景与注意

适合谁

  • 经常写投标/应标技术方案,需要一批风格统一、可随方案改稿快速重出的架构或流程类配图。
  • 希望用 Agent 串联「出图 + 写入 Word」,减少在多款工具间复制截图。

限制与注意

  • 场景定位在投标技术方案双图(氛围 + 结构),不等同于通用 BI 或任意图表库。
  • 依赖 HTML+CSS 与浏览器截图链路,运行环境需满足 Skill 对浏览器/工具的要求(以包内说明为准)。
  • SkillHub 统计(截至资料抓取):评分 100000,下载 1084;安装计数为 0 仅表示平台侧统计口径,不代表 Skill 不可用。
  • 不涉及强制 API Key;若你本地另有模型或 MCP 配置,与 Skill 标签无冲突。

结尾

投标技术方案配图 把投标方案里常见的「双图 + Word」工作收成一条 Agent 流程:HTML+CSS 出图、浏览器排版、截图进 docx,并用中英文触发词即可唤起。需要安装或查看更新时,请访问官方页面:https://www.skillhub.cn/skills/user_2203d45b/haoxia

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye