Agent Skills
› plannotator/effective-html
plannotator/effective-html
GitHub提供HTML视觉产物的设计原则与创意方向，涵盖配色、排版、布局及主题定制。指导AI根据具体需求选择适当的设计基调，避免通用AI风格，确保交付物具有独特的视觉识别度和专业质感。
Install All Skills
npx skills add plannotator/effective-html --all -g -y
Skills in Collection (6)
提供HTML视觉产物的设计原则与创意方向，涵盖配色、排版、布局及主题定制。指导AI根据具体需求选择适当的设计基调，避免通用AI风格，确保交付物具有独特的视觉识别度和专业质感。
创建或重构HTML页面、报告、演示文稿
需要定制化视觉设计而非默认样式时
决定网页的配色方案、字体搭配和整体布局
npx skills add plannotator/effective-html --skill design-artifact -g -y
生成自包含的 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-wireframe
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
