Tooluck logoTooluck
SKILL.md

design-artifact

Agent skill fromplannotator/effective-html

Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output must not look generically AI-generated.

How to install design-artifact

install design-artifact
# install the effective-html pack with the skills CLI
npx skills add plannotator/effective-html

# or add only this skill to Claude Code: copy the folder

skills/design-artifact/

# into

~/.claude/skills/design-artifact/ (all projects)

.claude/skills/design-artifact/ (one project)

skills/design-artifact/SKILL.md

MITFull file
1Take 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.
2
3## Begin by sizing up the brief
4
5The 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.
6
7Much 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.
8
9Then there's work that earns the editorial register: landing pages, games, apps and tools someone will hold onto or pass along.
10
11When in doubt, remember that nobody ever regretted a well-composed page, whereas an identity pushed too hard sometimes backfires.
12
13Everything in the fundamentals section applies universally. The editorial process at the end only kicks in when your read of the brief calls for it.
14
15## Fundamentals for every artifact
16…

Excerpt shown under the repository's MIT license.

More skills in effective-html

Keep exploring

Similar skill repositories

thedotmack /

claude-mem
116k

Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More

CCCXGHGM+135 skills

Leonxlnx /

taste-skill
113k

Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages

CCCXCU1 skill

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates