Agent Skills
› plannotator/effective-html
plannotator/effective-html
GitHub该技能用于生成视觉主导、文字精简的HTML内容，通过大图片与少量文本解释主题，确保保留关键细节且避免专业术语，适合向新手清晰传达信息。
安装全部 Skills
npx skills add plannotator/effective-html --all -g -y
集合内 Skills (8)
该技能用于生成视觉主导、文字精简的HTML内容，通过大图片与少量文本解释主题，确保保留关键细节且避免专业术语，适合向新手清晰传达信息。
需要将复杂概念转化为通俗易懂的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图表
通用html技能路由到图表请求
npx skills add plannotator/effective-html --skill html-diagram -g -y
将源材料转化为结构清晰、可追溯的自包含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 线框图
通用 html 技能路由到线框图需求
npx skills add plannotator/effective-html --skill html-wireframe -g -y
生成单页HTML文档，用于早期分享想法或工作复盘。通过大篇幅图示与精简文字，向新同事清晰传达核心内容，避免行话，确保信息直观易懂。
需要快速分享初步构想以获取反馈
需要对已完成工作进行简要回顾
npx skills add plannotator/effective-html --skill one-pager -g -y
用于生成或重设计自包含的单文件 HTML 内容，如报告、落地页或工具。作为路由器，根据需求引导至线框图、原型或图表等专用技能，否则直接创建注重可读性和易用性的 HTML 文件。
需要生成单文件 HTML 报告或解释器
请求落地页、演示文稿或混合内容的 HTML 实现
npx skills add plannotator/effective-html --skill html -g -y
