工作台 Prompt 生成器
把用户给的一个主题词,转成一段能让 WorkBuddy 直接生成对应「个人工作台」的完整 prompt。本 skill 只产出 prompt 文本,不真正生成工作台页面。
触发判断
- 用户说「帮我生成一段 XX 工作台的 prompt / 指令 / 提示词」→ 直接进入生成流程
- 用户只说「XX 工作台」但语境是「想搭一个」→ 先确认是要「只要 prompt」还是「直接生成工作台」;只要 prompt 时走本流程,要生成时则转交实际生成工作台
核心流程
- 解析主题:提取主题词(如「育儿」「考研学习」)和隐含的人群、痛点
- 匹配领域库:读 references/domain-modules.md,命中对应领域则采用其模块清单与视觉建议;未命中则按「通用生成框架」临场脑暴
- 生成 prompt:按「通用 prompt 骨架」组装完整 prompt
- 附使用说明 + 可追问细化点(混合模式)
通用 prompt 骨架(七要素,缺一不可)
生成的 prompt 必须覆盖以下七部分:
- 身份设定——开头一句话设定角色:你是「工作台搭建师」专家,擅长把零散需求变成天天能用的个人工作台
- 使用场景——给谁用、在什么设备打开、解决什么核心痛点
- 核心目标——打开工作台后 30 秒内要明确什么
- 模块清单——每块一个圆角卡片,逐条列「模块名 + 具体功能 + 数据本地保存」;8-12 个模块按场景分成 4-5 组(每组 2-3 个),用【分组名】标注在每组模块前,分组名即导航入口名
- 视觉调性——具体配色、风格、Lucide SVG 图标(按「图标规范」写)、字体
- 技术约束——单文件 HTML、内联 CSS/JS、零外部依赖、localStorage 存本地;响应式三档布局(按「响应式布局规范」写)
- 交付要求——直接给出完整可运行 HTML(含
<html>到</html>)、末尾附使用说明
响应式布局规范
技术约束部分必须写清以下三档布局,用纯 CSS 媒体查询实现,不依赖任何 JS 框架:
- 手机(< 768px):单栏,卡片纵向全宽排列;底部固定 tab bar 承载 4-5 个分组入口(Lucide 图标 + 文字),适配 iPhone 底部安全区
env(safe-area-inset-bottom);标题栏吸顶 - 平板(768px - 1023px):左侧固定侧边栏目录(宽约 200px),内容区卡片 1-2 列网格
- 电脑(≥ 1024px):左侧固定侧边栏(宽约 220px),内容区卡片 2-3 列网格,整体最大宽度约 1200px 居中
导航与内容联动要求:
- 点击导航项切换显示对应分组的卡片,非当前分组隐藏
- localStorage 记住上次所在分组,下次打开自动定位
- 手机端 tab bar 与平板/电脑端侧边栏共用同一份分组数据,只换呈现形式
图标规范
一律用 Lucide 图标(lucide.dev),不用 emoji。必须内联,禁止引 CDN 或 <script src>,保证断网可用。
实现方式:
- 内联 SVG sprite:
<body>开头放一个隐藏的<svg style="display:none" aria-hidden="true">,内含若干<symbol id="icon-xxx" viewBox="0 0 24 24">;使用处写<svg class="icon"><use href="#icon-xxx"/></svg> - 每个图标只在 sprite 里定义一次,多处用
<use>复用;禁止在每个位置重复粘贴整段 SVG - 统一属性:
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round",颜色由 CSScolor继承,方便跟随主题色 - 尺寸用 CSS class 控制(导航 20px、卡片标题 18px),不在 SVG 上写死
width/height
选型要求:
- 导航分组各配一个图标,语义贴合分组名(如「今日」→
calendar-check,「记录」→notebook-pen,「成长」→sprout) - 每张卡片标题配一个图标,与分组图标不重复
- 图标只作辅助识别,不替代文字标签
输出格式
生成结果按以下三段输出:
- 完整 prompt:放在代码块里,用户整段复制即可
- 使用说明:3 行,讲清怎么粘贴、怎么加到手机主屏、数据存在哪
- 可追问清单:列 3 个可进一步定制的方向(如换配色、加模块、改人群),等用户回复后再精修 prompt
风格要求
- prompt 正文用中文,语气像给靠谱助手布置任务,具体、可执行,不用客套话
- 模块数量 8-12 个,覆盖该人群全天或全流程场景
- 视觉建议避免空泛,给出具体主色(如「暖橙 + 奶白」)
- 分组名要短(2-3 字,如「今日」「记录」「成长」),能直接当 tab 标签用
- 数据保存一律强调 localStorage 本地存储、不上传服务器