Agent skill · design visual · aradotso
web-design-skill
web-design-skill — an agent skill for coding agents.
Why this skill is useful
Introduces a structured design workflow and specific color theory that the AI wouldn't reliably generate on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
your-project/ ├── .agents/skills/web-design-engineer/ │ ├── SKILL.md # Main skill (~400 lines) │ └── references/ │ └── advanced-patterns.md # Code template library (~520 lines) └── src/ └── ... your-project/ └── .claude/skills/web-design-engineer/ ├── SKILL.md └── references/ └── advanced-patterns.md bash git clone https://github.com/ConardLi/web-design-skill.git cp -r web-design-skill/.agents/skills/web-design-engineer your-project/.agents/skills/ bash cp -r web-design-skill/.agents/skills/web-design-engineer your-project/.claude/skills/ 1. Understand requirements → Ask only when truly insufficient 2. Gather design context → Look at existing code/screenshots; never start blind 3. Declare design system → Colors, fonts, spacing, motion — in Markdown, before code 4. Show v0 draft early → Layout + tokens + placeholders; let user course-correct 5. Full build → Components, states, motion; pause at key decisions 6. Verify → Pre-delivery checklist; no console errors, no rogue hues css :root { / Primary palette — blue-violet / --color-primary-50: oklch(97% 0.02 270); --color-primary-100: oklch(93% 0.05 270); --color-primary-200: oklch(86% 0.10 270); --color-primary-300: oklch(76% 0.15 270); --color-primary-400: oklch(65% 0.20 270); --color-primary-500: oklch(55% 0.24 270); / brand / --color-primary-600: oklch(46% 0.22 270); --color-primary-700: oklch(38% 0.18 270); --color-primary-800: oklch(28% 0.13 270); --color-primary-900: oklch(18% 0.08 270); / Neutrals — warm-tinted to avoid clinical grey / --color-neutral-50: oklch(98% 0.005 80); --color-neutral-100: oklch(95% 0.008 80); --color-neutral-200: oklch(88% 0.010 80); --color-neutral-500: oklch(58% 0.010 80); --color-neutral-900: oklch(14% 0.008 80); / Semantic / --color-bg: var(--color-neutral-50); --color-surface: oklch(100% 0 0); --color-text: var(--color-neutral-900); --color-muted: var(--color-neutral-500); --color-accent: var(--color-primary-500); } css / Import — never use Inter, Roboto, Arial, system-ui, or Fraunce …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/web-design-skill