SuperAPI AI 工具集

html-playground

前端与建站

查看项目

更新于 10-16 07:57

技能介绍

用途:构建自包含的交互式单文件 HTML 游乐场、探索器或工具,包含控件、实时预览以及可复制的自然语言提示词。

主要能力与工作流:先推断受众、决策目标与所需状态;已有设计系统与明确需求优先于默认值。仅读取并改编一个最接近的模板(templates/design-playground.md、data-explorer.md、concept-map.md、document-critique.md、diff-review.md、code-map.md)。输出一个 HTML 文件,CSS 与 JavaScript 内联,无外部运行时依赖。随后在桌面浏览器中打开,交互测试每个控件与预设,验证实时预览、提示词输出、复制反馈、空/错误状态与键盘可用性,完成前修复渲染缺陷。

默认约定:控件位于实时预览旁,提示词输出在下方;桌面浏览器布局,除非被要求否则不实现或检查响应式/移动端行为;精致浅色主题、系统 UI 字体、等宽代码/值、最小化边框;合理的非空初始状态与 3–5 个内聚命名预设;单一状态对象、单一更新路径、预览与提示词即时刷新;控件按关注点分组,高级控件默认折叠;提示词用自然语言说明期望结果,仅提及非默认选择。

限制与不变量:无 Apply 按钮,相关变更立即渲染;提示词在未看到游乐场时也可操作,且不是原始状态转储;复制需有可见的瞬时反馈,Clipboard API 失败时有可用回退;复制微文案统一为 Copy prompt,然后 Copied,失败时显示 Copy failed — select the prompt below;预设须一致更新控件、预览与提示词;不得添加不影响预览或生成提示词的控件;完成需提供自包含文件与已渲染的交互检查证据,并以“### ✨ Playground ready”、链接产物及产物/控件/桌面浏览器/复制回退对照表收尾。生成的提示词不含装饰性图标,除非请求内容需要。

适用场景:需要快速交付带控件与实时预览的交互式 HTML 探索器,并同时产出可操作自然语言提示词时。

其他信息:收费、价格、平台等暂未提供。