Agent Skills
› plannotator/effective-html
plannotator/effective-html
GitHub提供HTML视觉产物（如页面、报告）的设计原则与创意方向，涵盖调色、排版及布局决策，确保设计具有针对性且非通用AI风格。
Install All Skills
npx skills add plannotator/effective-html --all -g -y
Skills in Collection (6)
提供HTML视觉产物（如页面、报告）的设计原则与创意方向，涵盖调色、排版及布局决策，确保设计具有针对性且非通用AI风格。
创建或重样式化HTML可视化交付物
决定配色方案、字体搭配、布局或主题
避免输出看起来像通用AI生成的内容
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线框图
通用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
