Agent Skills
› plannotator/effective-html
plannotator/effective-html
GitHub用于生成自包含HTML图表，支持拓扑、序列、状态等多种可视化模型。根据需求选择HTML/CSS/SVG等渲染方式，确保无障碍访问与响应式布局，交付无需构建的单一文件。
安装全部 Skills
npx skills add plannotator/effective-html --all -g -y
集合内 Skills (6)
用于生成自包含HTML图表，支持拓扑、序列、状态等多种可视化模型。根据需求选择HTML/CSS/SVG等渲染方式，确保无障碍访问与响应式布局，交付无需构建的单一文件。
用户明确要求生成HTML图表
通用html技能路由到图表请求
npx skills add plannotator/effective-html --skill html-diagram -g -y
将源材料转换为清晰、自包含的HTML计划文档，保留原始层级、顺序和所有权。生成响应式、无障碍的单文件HTML，用于项目规划与审查。
用户显式调用 html-plan
html skill 路由到计划请求
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 线框图
需要验证页面结构、内容优先级或响应式布局
npx skills add plannotator/effective-html --skill html-wireframe -g -y
为HTML制品提供创意视觉指导，确定配色、排版与风格。适用于用户寻求独特视觉效果或需避免通用AI样式的场景，作为其他HTML技能的上游辅助，确保设计符合内容语境而非简单套用模板。
需要为HTML报告、图表或原型提供视觉风格建议
用户未指定具体设计风格，需生成独特的视觉方案
其他HTML技能需要避免通用AI样式，寻求定制化艺术指导
npx skills add plannotator/effective-html --skill design-artifact -g -y
生成自包含单文件HTML，用于报告、落地页等。具备路由功能，根据需求分发至原型、线框图等专项技能，否则直接创作。
创建独立HTML文件
设计落地页或报告
HTML可视化内容生成
npx skills add plannotator/effective-html --skill html -g -y
