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产物（如页面、报告、着陆页）
需要决定配色、字体搭配、布局或整体视觉风格
要求输出避免通用AI生成外观
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-plan
html 技能路由到计划请求
npx skills add plannotator/effective-html --skill html-plan -g -y
用于根据用户上下文和设计语言，构建自包含、响应式的HTML静态原型或交互式交互原型，以验证产品视觉层级或行为流程。
用户明确要求生成HTML原型
路由到html技能进行mockup或prototype请求
npx skills add plannotator/effective-html --skill html-prototype -g -y
用于生成低保真 HTML 线框图，以测试信息层级、内容、导航和响应式结构。在视觉设计前帮助审查布局决策，强调真实内容和结构探索，避免品牌样式和过度修饰。
用户明确要求生成低 fidelity HTML wireframe
html skill 路由到 wireframe 请求
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
