Agent Skills
› plannotator/effective-html
plannotator/effective-html
GitHub提供HTML可视化产物（如页面、报告、演示文稿）的设计原则与创意方向，涵盖配色、排版、布局及主题决策，确保输出具有独特视觉风格而非通用AI生成样式。
安装全部 Skills
npx skills add plannotator/effective-html --all -g -y
集合内 Skills (6)
提供HTML可视化产物（如页面、报告、演示文稿）的设计原则与创意方向，涵盖配色、排版、布局及主题决策，确保输出具有独特视觉风格而非通用AI生成样式。
创建或重构HTML页面/报告
决定UI配色方案或字体搭配
设计着陆页或演示工具
npx skills add plannotator/effective-html --skill design-artifact -g -y
根据用户请求生成自包含的 HTML 图表，支持拓扑、序列、状态等多种模型，使用 HTML/CSS/SVG/Canvas 渲染，注重可读性、无障碍及交互体验。
用户明确调用 html-diagram
html skill 路由到图表请求
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静态原型或交互原型，用于验证视觉层级、布局或导航流程等关键产品决策。
用户请求创建HTML原型或Mockup
需要快速验证UI/UX设计方案
npx skills add plannotator/effective-html --skill html-prototype -g -y
用于生成低保真 HTML 线框图，验证信息层级、导航和任务流程。在视觉设计前使用，避免高保真细节，支持多方案对比与基础交互测试，辅助产品决策。
用户明确要求生成低保真线框图
需要验证页面布局与信息结构
npx skills add plannotator/effective-html --skill html-wireframe -g -y
生成自包含的单文件HTML，用于报告、落地页或演示。具备路由功能，优先分发至线框图、原型等专项技能，否则执行通用HTML构建任务。
用户需要创建单个HTML文件作为交付物
请求涉及报告、解释器、落地页或混合内容的HTML实现
npx skills add plannotator/effective-html --skill html -g -y
