DrawIn
Skills

技术图表生成

生成蓝图式技术 diagram 的自包含 HTML,强调工整排版、低装饰和高信息密度。

候选html
技术图表生成 预览

技术图表生成

为什么收录

这个 skill 和仓库里另外两个 HTML 向条目不太一样:它更克制,也更像工程蓝图,而不是演示型页面。对于想把系统结构、流程关系或技术方案做成一页可分享成品的人来说,它的约束很有价值。

适合场景

  • CI/CD、发布链路和环境关系图。
  • 模块边界、调用路径和职责拆分图。
  • 文档里的技术示意图,或用于评审、汇报的一页式成品。

评估笔记

  • 优点:输出契约明确,风格稳定,中文语境友好,产物是浏览器可直接打开的自包含 HTML。
  • 短板:当前没有 validator,也没有公开 repository;分发方式偏 marketplace。
  • 待确认:后续是否会公开 license,或补充更多可参考的官方示例。

产物

  • 示例:examples/cicd-blueprint.html
  • 预览:screenshots/cicd-blueprint-preview.png
  • 可编辑预览源文件:screenshots/cicd-blueprint-preview.svg

维护

  • 最近检查:2026-04-26
  • 下一步:继续跟踪 Qoder Marketplace 的更新,看看它的版本和示例是否会独立演进。

产物

名称类型说明
cicd-blueprint.html html 基于其蓝图式规则自制的 CI/CD 流水线 HTML 示例。
cicd-blueprint-preview.png png 通过浏览器渲染 HTML 示例后截取的预览图。
cicd-blueprint-preview.svg svg 与 HTML 示例对应的矢量预览图。

示例

技术图表生成 示例效果图

提示词

为一条 CI/CD 流水线生成工程蓝图式 HTML 页面。

使用边框分区、系统字体、低装饰单色框架,并明确呈现构建、校验、评审和发布几个阶段。

生成环境

运行环境
Codex desktop
模型
GPT-5 系列(Codex 默认;当前任务环境未暴露精确 alias)
上下文
主线程会话
生成时间
2026-04-26
备注
示例由 DrawIn 自制,用于体现这个 skill 的代表性设计效果。