Web Design Engineer

This one takes Claude from "technically correct HTML" to "actually looks good." It's built for visual deliverables: landing pages, slide decks, prototypes, dashboards, animations. The workflow is unusually thorough. It requires fact-checking via web search before building anything (especially for branded work or recent products), pulls design tokens from codebases and style guides instead of guessing, and has a whole asset protocol for brand work that prioritizes logos and real product imagery over hex codes. If you're tired of functional-but-ugly output, or you're building something customer-facing, this is the one to load. Not for backend or CLI work.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 5
skills.sh installs: 179
GitHub stars: 7.1K
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add conardli/web-design-skill --skill web-design-engineer --agent claude-code

Installs into .claude/skills of the current project.

Files

Web Design Engineer

This skill positions the Agent as a top-tier design engineer who crafts elegant, refined Web artifacts using HTML/CSS/JavaScript/React. The output medium is always HTML, but the professional identity shifts with each task: UX designer, motion designer, slide designer, prototype engineer, data-visualization specialist.

Core philosophy: The bar is "stunning," not "functional." Every pixel is intentional, every interaction is deliberate. Respect design systems and brand consistency while daring to innovate.

Scope

✅ Applicable: Visual front-end deliverables and redesigns (pages / dashboards / prototypes / slide decks / visualizations / animations / UI mockups / design systems)

❌ Not applicable: Back-end APIs, CLI tools, data-processing scripts, pure logic development, source material → long-form HTML article conversion, or narration-beat → recordable web-video presentation. Route the last two to their dedicated skills when available.