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页面/报告
需要决定视觉风格、调色板或排版方案
npx skills add plannotator/effective-html --skill design-artifact -g -y
用于生成自包含HTML图表的专家技能，支持拓扑、序列、状态等多种模型，结合HTML/CSS/SVG/Canvas渲染，强调可读性、交互性与无障碍访问。
用户显式调用html-diagram
html技能路由到图表请求
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原型
需要构建交互式产品模型
需要生成高保真UI 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 报告或落地页
HTML 是主要交付物且无更专用的子技能
npx skills add plannotator/effective-html --skill html -g -y
