下载地址
https://www.zhengdianxue.com/wp-content/uploads/skills/user_c7211ebc--workbench-generator-c7211ebc.zip将提示词发送给你的 AI 安装该 skills
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_c7211ebc/workbench-generator-c7211ebc。根据一句话需求，生成一个开箱即用的单文件 HTML 运营/管理工作台。
阅读全文 （展开查看完整说明）
概述
基础信息
- 技能ID: workbench-generator
- 分类: 工具 / 效率
- 触发词: 生成工作台 / 做个仪表盘 / 做个运营后台 / 我要一个xxx工作台 / 生成html工作台 / 帮我做个数据看板
技能说明
根据用户给出的自然语言需求，生成一个单文件、零外部依赖、移动优先的 HTML 工作台（运营台 / 管理台 / 展示台 / 进度台均可）。用户拿到代码后双击即可在浏览器打开使用，无需部署、无需联网、无需后端。
适用场景：公众号运营台、项目进度台、个人记账台、技能上架进度台、销售跟进台、读书打卡台等一切"把若干模块集中到一个页面"的需求。
输入参数
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| requirement | string | 是 | 自然语言需求描述（这个工作台用来做什么、给谁用） |
| modules | string[] | 否 | 指定要包含的模块清单，不填则由你按需求合理拆分 |
| brand_color | string | 否 | 主色十六进制，默认 #c0392b（砖红） |
| style | string | 否 | 视觉风格：简约 / 活泼 / 商务，默认简约 |
输出格式
【工作台名称】
（一句话说明用途）
【完整 HTML 代码】（单文件，可直接保存为 .html 打开）
【使用说明】
1. 复制上方代码，保存为 workbench.html
2. 双击用浏览器打开即可使用
3. 所有数据仅保存在本地浏览器，不会上传
【模块清单】
1. xxx 模块：做什么、怎么交互
2. xxx 模块：做什么、怎么交互执行流程
- 需求拆解：弄清工作台的核心目标用户与最高频的 3-6 个动作，确定模块划分。必要时用一句话向用户确认，但不要过度追问。
- 结构规划：每个模块用一张卡片承载，卡片内用标题 + 简短说明 + 交互元素（输入/按钮/列表/勾选/折叠）组织。
- 生成代码：输出一份完整 HTML，CSS 写在
<style>内，JS 写在<script>内，全部内联。 - 铁律自检：生成后逐条对照下方铁律 1-8，不达标当场修改。
- 交付说明：附使用说明与模块清单，告诉用户如何保存和打开。
设计要点
- 布局用 CSS Grid，桌面双列、手机单列（媒体查询 max-width:640px 切单列）。
- 卡片式 UI：白底、圆角、浅灰边框、轻微阴影，主色只用于标题点缀和重点按钮。
- 字体走系统字体栈（-apple-system, "PingFang SC", "Microsoft YaHei"），不引外部字体。
- 交互用原生 JS 实现：点击复制、勾选计分、折叠展开、表单生成等，必须真能跑。
- 示例数据要贴近真实场景（具体人名、数字、日期），避免"此处填写"这类空洞占位。
铁律（成品质量保证，请勿删改）
- 单文件交付：CSS 与 JS 全部内联，不得引用任何外部 CDN、字体、JS 库或图片链接。
- 零后端零联网：不调用任何 API、不发任何网络请求、不收集用户数据，所有交互在浏览器本地完成。
- 移动优先：必须做响应式，640px 以下单列布局，手机竖屏完整可用，不出现横向滚动。
- 中文界面：UI 文案全中文，术语口语化，不得出现英文占位或未翻译的技术词。
- 配色克制：整页主色不超过 2 个，避免花哨渐变堆叠和重阴影，保持清爽。
- 交互真实可用：所有按钮、输入、复制、勾选、生成等必须真实可运行，不得留
alert占位或空函数。 - 内容结构真实：示例数据用贴近场景的真实文案（具体人名/数字/日期），不写空洞的"xxx""此处填"占位。
- 安全合规：不引入外部脚本，不做隐私收集，不生成诱导分享、虚假信息或违规内容。
示例
输入: 帮我做个公众号运营+变现工作台，要能看每日选题、生成标题、查文风、AI检测自查、看上架进度
输出: 一份单文件 HTML，含 6 张卡片：① 每日选题（定时说明 + 手动触发按钮）② 标题生成器（输入话题 → JS 生成 8 个标题，点击复制）③ 文风 DNA 速查（折叠面板列出结构/用词/禁忌）④ AI 检测自查（勾选清单 → 实时算通过率）⑤ 上架进度（步骤时间轴，当前卡点高亮）⑥ 变现模式（卡片网格罗列商业路径）
（该示例即本工作区 运营工作台.html 的实际形态，可作为生成样板参考。）
示例 2（进度台）
输入: 给我一个技能上架进度台，看 SkillHub 审核到哪步了
输出: 单文件 HTML，含时间轴卡片（提交 → 合规 → 漏洞扫描 → AI 安全 → 上架），每步状态用颜色标记，当前卡点高亮，附手动刷新按钮。
示例 3（数据台）
输入: 做个个人记账台，能记收入和支出，看本月结余
输出: 单文件 HTML，含录入表单（类型/金额/备注）、本月流水列表、顶部结余数字实时计算、按类型折叠汇总。数据存浏览器本地。
复杂需求处理
- 需求模糊（只说"做个工作台"）：默认给一个通用运营台骨架，并在交付时列出可追加的模块，让用户二选一补充，不过度追问。
- 模块超过 6 个：优先保留最高频 6 个，其余折叠进"更多"面板，避免首页过长。
- 需要图表：用纯 CSS 或内联 SVG 绘制，不引外部图表库（遵守铁律 1）。
- 需要本地持久化：用 localStorage 保存用户输入，刷新不丢，不依赖后端。
- 风格不匹配：支持 brand_color 与 style 参数重生成，或交付后让用户指定主色二次微调。
FAQ
Q: 生成的 HTML 打不开或乱码？A: 用 UTF-8 编码保存为 .html，双击用 Chrome/Edge 打开。不要用记事本另存为 ANSI。
Q: 数据会泄露吗？A: 不会。所有交互在浏览器本地完成，不联网、不上传（铁律 2）。
Q: 能改配色和风格吗？A: 能。生成时给 brand_color 和 style 参数，或在交付后指定主色二次微调。
Q: 需求太模糊怎么生成？A: 先给通用骨架，列出可追加模块让用户补充，不过度追问。
Q: 想要多个模块怎么办？A: 一次最多放 6 个高频模块，其余进"更多"折叠面板，避免页面过长。
Q: 生成的代码能商用吗？A: 可以，本技能 MIT 协议，生成的单文件 HTML 归使用者所有。
