Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, dec…
Part of Effective HTMLPack · 7 skills
by plannotator· DesignUnclaimed · Yours? Claim it
About
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.
Skills people install alongside design-artifact.
Runs on your machine.
Runs on your machine.
Runs on your machine.
Runs on your machine.
npx -y degit plannotator/effective-html/skills/design-artifact ~/.copilot/skills/design-artifact
Runs on your machine.
npx -y degit plannotator/effective-html/skills/design-artifact ~/.cursor/skills/design-artifact
Runs on your machine.
npx -y degit plannotator/effective-html/skills/design-artifact ~/.claude/skills/design-artifact
/plugin marketplace add plannotator/effective-html /plugin install plannotator-effective-html@effective-html
Runs on your machine.
npx -y degit plannotator/effective-html/skills/design-artifact ~/.agents/skills/design-artifact
Runs on your machine.
Runs on your machine.
npx -y degit plannotator/effective-html/skills/design-artifact ~/.gemini/skills/design-artifact
Runs on your machine.
npx -y degit plannotator/effective-html/skills/design-artifact .agents/skills/design-artifact
Runs on your machine.
npx -y degit plannotator/effective-html/skills/design-artifact ~/.openclaw/skills/design-artifact
Runs on your machine.
npx -y degit plannotator/effective-html/skills/design-artifact ~/.config/opencode/skills/design-artifact
Runs on your machine.
npx -y degit plannotator/effective-html/skills/design-artifact ~/.hermes/skills/design-artifact
Scanned and passed · checked 2 h ago
From people who use it
Step by step
Nothing new reaches your agent until a person has looked at it.
Scanned on every change, and again when our rules improve.
No reviews yet. Used design-artifact? Say how it went.
Write a reviewSkills people install alongside design-artifact.
Has your agent explain a technical idea as an interactive isometric figure of a real machine, built from many small shaded parts.
A community skill that turns a description, code, Terraform, SQL or API schemas into editable draw.io diagrams, and keeps them in sync.
Turns your agent into a disciplined logo designer, from the brief to tested SVG concepts, lockups, icons and brand guidelines.
Turns one approved character still into a game-ready sprite set: every action animated, keyed, looped and exported for your engine.
Nobody has shared how they use design-artifact yet.
Security scan
Passed
Safe to install in every agent it supports. Runs in your agent, as instructions.