Build HTML Wireframes and Prototypes With Seven Agent Skills

Most agent-built HTML either tries to do everything at once or drifts into a house style. effective-html takes the opposite approach: seven focused skills, each owning one kind of artifact, from rough wireframe to working prototype.

Why This Skill Matters

The 4k-star repo starts from an idea it attributes to Thariq Shihipar's essay "The unreasonable effectiveness of HTML": modern models can produce a lot, and an HTML artifact often explains intent more clearly than a wall of text. The README calls the approach "fat artifacts + fat context" — give the model plenty of useful references, then let artifacts show what you mean while your prompt points at the files and folders that carry the context. Each skill stays narrow: wireframes test structure, prototypes prove interaction, diagrams explain relationships.

Installation

npx skills add plannotator/effective-html

List the collection or install individual skills instead:

npx skills add plannotator/effective-html --list
npx skills add plannotator/effective-html --skill html-wireframe
npx skills add plannotator/effective-html --skill html-prototype

Claude Code and Codex also have plugin routes:

/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html

codex plugin marketplace add plannotator/effective-html
codex plugin add plannotator-effective-html@effective-html

The README notes you can also use the repo without installing anything — treat it as a reference first and an installable skill collection second.

Real Workflow: Wireframe a Checkout Flow, Then Prototype It

Start with the low-fidelity pass:

用 html-wireframe 给我的结账流程画一个低保真线框：
购物车 → 收货地址 → 支付 → 确认，重点测试内容层级和导航结构。

The html-wireframe skill produces layouts that are intentionally unfinished, so reviewers argue about content hierarchy and navigation instead of colors. Once the structure survives review, promote it:

把这张线框升级成 html-prototype 原型：实现"访客结账"这一条完整流程，
带真实状态（空购物车、支付失败、成功页）和键盘支持。

The html-prototype skill implements one credible flow with its relevant states — realistic interaction, keyboard support, responsive behavior. When you need to explain how the system behind the flow works, close the loop with a diagram:

用 html-diagram 给这套结账流程画一张时序图：
浏览器、结账服务、支付网关、邮件服务，标注支付失败时的分支。

The full collection adds html (broad requests, mixed artifacts, routing to a specialist, and more), design-artifact (creative direction without a reusable house style), html-plan (plans and rollouts that preserve source commitments), and big-pics-little-words (explaining a subject with large visuals and minimal text — the README notes it was copied from the same author's bro repo).

Tips

• The README's quality bar for every artifact: responsive, accessible, self-contained, and verified in a browser. Ask for exactly that if your agent skips a step.
• The division of labor is deliberate: the broad html skill routes the work, design-artifact supplies optional creative direction, and the specialist skills own fidelity and behavior — each skill remains independently usable.
• For diagrams, the README says the skill chooses a visual model and rendering method that fit the relationship being explained, so name the relationship you care about, not just the artifact type.
• design-artifact provides a reusable design process, not a reusable look — visual direction comes from your conversation, project, audience, and subject.
• There is a practical guide linked from the README: "HTML Wireframes and Prototypes for Coding Agents" on docs.plannotator.ai.
• The companion tool Plannotator renders and annotates local HTML, and the tot tool creates shareable links for HTML files — both are linked from the README if you want a review loop.

When Not to Use This

These skills produce self-contained HTML artifacts, not framework applications — a working prototype is not a codebase you deploy. And because wireframes are deliberately unfinished, do not present one to stakeholders as a visual design; that is a later step with your own design system.

See the leaderboard for more skills.