使用 Plannotator 渲染并标注本地 HTML。
## 技能参考 本仓库包含六个可选技能，用于创建实用的视觉成果。 | 技能 | 适用场景 | | --- | --- | | [`html`](skills/html/SKILL.md) | 处理范围较广的 HTML 请求、混合型成果、报告、说明文档、演示文稿、落地页和工具，并在需要时转交给专用技能 | | [`design-artifact`](skills/design-artifact/SKILL.md) | 为任何 HTML 成果提供贴合主题的创意方向，同时避免套用固定的视觉风格 | | [`html-wireframe`](skills/html-wireframe/SKILL.md) | 用低保真布局方案测试内容、层级、导航、流程和响应式结构 | | [`html-prototype`](skills/html-prototype/SKILL.md) | 创建包含真实状态、交互、键盘支持和响应式行为的可用原型 | | [`html-plan`](skills/html-plan/SKILL.md) | 创建计划、路线图、发布安排和实施步骤，同时保留源材料中的既定要求 | | [`html-diagram`](skills/html-diagram/SKILL.md) | 创建架构图、时序图、流程图、状态图、层级图、时间线图和系统图 | 实用指南：[面向编程智能体的 HTML 线框图和原型](https://docs.plannotator.ai/learn/code-context/html-wireframes-and-prototypes-for-coding-agents)。 ## 安装 当你希望智能体把这些参考资料作为可复用的工作流使用时，安装整个技能集： ```bash npx skills add plannotator/effective-html ``` 列出或安装单个技能： ```bash npx skills add plannotator/effective-html --list npx skills add plannotator/effective-html --skill design-artifact npx skills add plannotator/effective-html --skill html-wireframe npx skills add plannotator/effective-html --skill html-prototype ``` ### Claude Code 插件 ```text /plugin marketplace add plannotator/effective-html /plugin install plannotator-effective-html@effective-html ``` ### Codex 插件 ```bash codex plugin marketplace add plannotator/effective-html codex plugin add plannotator-effective-html@effective-html ``` ## 技能如何协作 这些技能把创意自由和可靠性分开处理： - 视觉方向来自对话、项目、受众和主题。 - `design-artifact` 提供可复用的设计流程，但不规定重复使用的视觉风格。 - 线框图刻意保持未完成感，让评审者专注于结构。 - 原型实现一条可信的流程及其相关状态。 - 计划保留源材料中的既定要求。 - 示意图会选择适合所表达关系的视觉模型和渲染方式。 - 每项成果都应具备响应式布局和无障碍支持，能够独立运行，并在浏览器中完成验证。 详细指导只放在需要它的地方。通用的 `html` 技能负责分配工作，`design-artifact` 提供可选的创意方向，专用技能负责各自的保真度和行为要求。每个技能也可以独立使用。 本项目的灵感来自 Thariq Shihipar 的 [The unreasonable effectiveness of HTML](https://thariqs.github.io/html-effectiveness)。
使用 tot 为 HTML 文件创建可分享的链接。