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产物的配色、字体搭配、布局或主题
npx skills add plannotator/effective-html --skill design-artifact -g -y
生成自包含的 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原型
路由到html技能进行Mockup或原型请求
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制品，如报告、落地页或演示文稿。作为路由入口，根据需求引导至线框图、原型或设计专项技能，否则直接构建HTML。
用户需要创建独立的HTML文件或页面
请求生成报告、说明文档、着陆页或混合内容制品
npx skills add plannotator/effective-html --skill html -g -y
