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/CSS/SVG等渲染方式，确保响应式、无障碍及交互体验，输出无需构建的单文件。
用户请求绘制关系图或架构图
需要生成可视化的流程图、时序图或层级结构
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
