🎨 Design

web-design-engineer

Name: web-design-engineer
Author: ConardLi

by ConardLi3 months ago10.2k

Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact. Not for back-end, CLI, non-visual coding, source-to-longform article conversion, or narration-driven click-through video presentations.

Install

npx skills add https://github.com/ConardLi/web-design-skill --skill web-design-engineer

Show step-by-step

1
Open your terminal
- Mac: Press ⌘ Space, type "Terminal", press Enter
- Windows: Press Win R, type "cmd", press Enter
2
Paste the command above and press Enter
Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).
3
Restart Claude Code
Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives

~/.claude/skills/conardli--web-design-skill--skills--web-design-engineer/
├── SKILL.md
└── ... (skill resource files)

View on GitHub

Comments

X@LLMpsycho

"Web Design Engineer skill for AI agents. Fixes generic AI aesthetics by banning Inter font, purple-pink gradients, emoji icons. Uses oklch color theory and..."