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示意图
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 线框图
html skill 路由到 wireframe 请求
npx skills add plannotator/effective-html --skill html-wireframe -g -y
生成自包含的单文件HTML文档，适用于报告、落地页或演示。具备路由功能，根据需求将请求分发至线框图、原型或图表等专项技能，否则直接创作内容。
需要创建单文件HTML交付物
生成报告、解释器或展示页面
npx skills add plannotator/effective-html --skill html -g -y
