Repolode
提交项目
plannotator

plannotator/effective-html

一组智能体技能，用于指导编码智能体生成独立的 HTML 线框图、交互原型、方案和图表。

在 GitHub 查看官网
Star
3,685
Fork
249
未关闭 Issue
2
最近提交
3天前

这是什么？

Effective HTML 是一组可选的智能体技能，用于让编码智能体生成 HTML 产物，而不是大段文字。它覆盖用于验证布局、层级和导航的低保真线框图，带真实状态、键盘操作和响应式行为的可运行原型，保留原始约定的方案与路线图，以及架构、时序、状态和时间线图表。

技能按用途拆分：通用的 html 技能负责把请求分派给专项技能，design-artifact 提供围绕具体主题的创意方向，但不强加固定风格。每个技能都可以单独使用。安装方式为 npx skills add，同时提供 Claude Code 和 Codex 的插件入口。

技能生成的每个产物都是独立自包含、响应式、可访问的，并要求在浏览器中验证。项目采用 MIT 许可证，可与 Plannotator 配合渲染和批注本地 HTML。

核心功能

  • 01提供通用 html 技能，将请求分派给各个专项技能。
  • 02生成低保真线框图，用于检验内容层级和导航。
  • 03构建包含交互、键盘操作和响应式行为的可运行原型。
  • 04输出保留原始约定的方案和路线图。
  • 05以 HTML 形式绘制架构、时序、状态和时间线图表。

适用场景

  • 在实现界面前，与评审人员一起比较多种布局方案。
  • 把功能需求做成可点击原型，收集干系人反馈。
  • 将系统架构或请求流程绘制成可分享的 HTML 图表。
  • 编写智能体可以遵循的分阶段实施方案。

标签

#agent-skills#html#prototyping#wireframe#diagrams#claude-code#codex#html-artifacts#html-prototype#html-wireframe

常见问题

effective-html 是什么？
一组智能体技能，用于指导编码智能体生成独立的 HTML 线框图、交互原型、方案和图表。 Effective HTML 是一组可选的智能体技能，用于让编码智能体生成 HTML 产物，而不是大段文字。它覆盖用于验证布局、层级和导航的低保真线框图，带真实状态、键盘操作和响应式行为的可运行原型，保留原始约定的方案与路线图，以及架构、时序、状态和时间线图表。
effective-html 可以免费使用吗？用的什么许可证？
effective-html 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
effective-html 还在维护吗？
活跃维护中。effective-html 最近一次提交是在 2026年10月15日。
effective-html 适合用来做什么？
在实现界面前，与评审人员一起比较多种布局方案。 把功能需求做成可点击原型，收集干系人反馈。 将系统架构或请求流程绘制成可分享的 HTML 图表。 编写智能体可以遵循的分阶段实施方案。
在哪里获取 effective-html？
源代码和安装说明在 GitHub 上：https://github.com/plannotator/effective-html

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目