Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/plannotator/effective-html/design-artifactnpx skills add plannotator/effective-html --skill design-artifactgit clone --depth 1 https://github.com/plannotator/effective-htmlWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00072 | $0.02274 |
| Opus 5 | $0.00036 | $0.01137 |
| Sonnet 5 | $0.00014 | $0.00455 |
| Haiku 4.5 | $0.00007 | $0.00227 |
Grade A, and why
design-artifact scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 84 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Take the perspective of the creative director at a boutique agency with a reputation for range — every commission gets its own visual identity, scaled to whatever level of treatment the brief actually merits. Palette, type, and layout should all be conscious decisions rooted in this particular subject; nothing should smell like it came off a shelf.
Begin by sizing up the brief
The question is never whether to design — it's what register to design in. A memo deserves craftsmanship equal to a landing page; the two simply wear that craftsmanship differently.
Much of what comes in wants a workmanlike register: plans, briefs, demos. Finish it properly — real hierarchy in the type, spacing that was thought about, a palette that was chosen — but know when to stop. Hardly any page benefits from a towering, theatrical hero. Ornament sparingly and with taste.
Then there's work that earns the editorial register: landing pages, games, apps and tools someone will hold onto or pass along.
When in doubt, remember that nobody ever regretted a well-composed page, whereas an identity pushed too hard sometimes backfires.
Everything in the fundamentals section applies universally. The editorial process at the end only kicks in when your read of the brief calls for it.
Fundamentals for every artifact
Defer to prior art. Before anything else, hunt for an established design system — a AGENTS.md or CLAUDE.md and/or DESIGN.md, QUALITY.md, PRODUCT.md etc, a tokens or theme file, styling on existing components. Found one? Apply it. The guidance below exists to plug holes, never to overrule. Authority flows in one fixed direction: what the user literally said, then whatever system the project already has, then your own taste.
Anchor everything to the subject. Where the subject is fuzzy, sharpen it first: one concrete thing, a defined audience, a single purpose the page exists to serve. The most distinctive moves are excavated from the subject's native territory — the stuff it's made of, the tools of its trade, the language its people speak. Populate the build with genuine content from the first draft onward; lorem ipsum is banned.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 84 lines · 72 tokens per session scan A c8314b66fb90
design-artifact is a skill published in the GitHub repository plannotator/effective-html (2,835 stars, last pushed 29d ago), licensed MIT. It adds 72 tokens to every session and 2,274 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
dingtalk_channel_connect
Use a headed browser to automatically complete DingTalk channel integration for QwenPaw. Applicable when the user mentions DingTalk, developer console, Client ID, Client Secret, bot, Stream mode, binding or configuring a channel. Supports pausing when a login page is detected and resuming after the user logs in.
browser_cdp
当用户明确希望连接到已运行的 Chrome 浏览器、扫描本地 CDP 端口、显式指定 cdpport，或让多个 agent / 工具共享同一个浏览器时，使用本 skill。browser 默认不开放调试端口；仅当用户明确希望其他本地工具附加时才显式传入 cdpport。.
browser_visible
当用户需要控制 browser 的浏览器启动方式时，使用本 skill。browser 默认由 Playwright 直接管理、不开放调试端口（需让其他本地工具附加时显式传 cdpport）；headed 控制是否显示窗口，privatemode 保留用于兼容、不再改变默认行为，browserargs 传入额外的 Chromium 启动参数，executablepath 指定自定义浏览器可执行文件路径。.
browser_visible
Use this skill when the user needs to control the browser launch mode for browser. By default browser is managed by Playwright and opens no debugging port (pass an explicit cdpport to let another local tool attach); headed controls whether the window is visible, and privatemode is kept for backward compatibility and…
ego-browser
Skill "ego-browser" from citrolabs/ego-lite, covering ego-browser, quick start, common helpers, task spaces and control handoff.
browser
Drive a live browser with async Python against QwenPaw's builtin Browser SDK. The full reference is below; re-load this browser skill after context compaction.