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页面或演示文稿
为HTML内容选择配色和字体
重构现有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请求
npx skills add plannotator/effective-html --skill html-plan -g -y
用于根据上下文构建自包含、响应式的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报告或解释器
用户需要创建HTML落地页或演示文稿
用户请求HTML工具或混合工件且无更专精技能可用
npx skills add plannotator/effective-html --skill html -g -y
