Agent Skills
› plannotator/effective-html
plannotator/effective-html
GitHub将讨论主题转化为视觉主导、文字精简的HTML页面，通过精选图标和简洁说明清晰传达核心细节，避免行话，适合新手理解。
Install All Skills
npx skills add plannotator/effective-html --all -g -y
Skills in Collection (7)
将讨论主题转化为视觉主导、文字精简的HTML页面，通过精选图标和简洁说明清晰传达核心细节，避免行话，适合新手理解。
需要将复杂概念可视化时
希望以图文形式快速解释主题时
npx skills add plannotator/effective-html --skill big-pics-little-words -g -y
提供HTML可视化产物（如页面、报告、演示文稿）的设计原则与创意方向，指导色彩、排版和布局决策，确保输出具有独特视觉身份且非通用AI风格。
创建或重设计HTML交付物
决定视觉调色板、字体搭配或布局
需要避免生成器般的外观
npx skills add plannotator/effective-html --skill design-artifact -g -y
生成自包含的HTML图表，支持拓扑、序列、状态等模型。根据内容选择HTML/CSS/SVG等渲染方式，确保无障碍与响应式，交付单文件并附带路径及说明。
用户明确要求绘制关系或结构图
通用HTML技能路由至图表请求
npx skills add plannotator/effective-html --skill html-diagram -g -y
将项目源材料转化为结构清晰、可追溯的HTML计划文档。保持原有范围与顺序，补充负责人、依赖及验收标准，生成自包含且响应式的HTML文件，便于审查与执行。
用户显式调用html-plan
从通用html技能路由的计划请求
npx skills add plannotator/effective-html --skill html-plan -g -y
用于构建高保真、响应式且自包含的HTML原型或静态Mockup。根据上下文和产品设计语言，生成可交互的流程或视觉布局，支持状态模拟与边界测试，旨在验证关键的产品决策与用户体验问题。
用户明确要求制作HTML原型或Mockup
从通用html技能路由来的原型请求
npx skills add plannotator/effective-html --skill html-prototype -g -y
用于生成低保真 HTML 线框图，测试信息层级、导航和任务流程。通过结构优先、避免视觉修饰，辅助决策屏幕内容与布局，支持多方向对比，适用于设计前的结构化验证。
用户显式调用 html-wireframe
需要低保真 HTML 线框图以测试信息层级或任务流
npx skills add plannotator/effective-html --skill html-wireframe -g -y
用于生成或重设计自包含的单文件HTML制品，适用于报告、落地页、演示文稿及工具等场景。作为路由入口，根据需求类型引导至线框图、原型或图表等专业技能，否则直接完成交付。
用户需要创建独立的单文件HTML页面
生成报告、解释器、落地页或交互式工具
请求HTML格式的可视化内容
npx skills add plannotator/effective-html --skill html -g -y
