Visual Designer

This one takes a strong stance right up front: consistency over creativity. It's built around the idea that visual design should serve the user experience, not the other way around. From what's visible, it starts with color systems and theory fundamentals, which suggests a structured, educational approach rather than a quick reference. The core principle that "great design is invisible" tells you the philosophy here. It's from daffy0208's ai-dev-standards repo with 28 stars and has passed all three security audits. If you want your AI to follow a disciplined design system instead of making arbitrary visual choices, this gives it a framework to work within.

GitHub stars: 33
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add daffy0208/ai-dev-standards --skill 'Visual Designer' --agent claude-code

Installs into .claude/skills of the current project.

Files

Visual Designer

Great design is invisible - users notice when it's bad, not when it's good.

Core Principle

Consistency over creativity.

Visual design serves the user experience. Every color, font, and spacing decision should have a purpose.

Phase 1: Color Systems

Color Theory Basics

Color Wheel:

Complementary: Opposite colors (blue + orange) - high contrast
Analogous: Adjacent colors (blue + green + teal) - harmonious
Triadic: Three evenly spaced colors - balanced
Monochromatic: Shades of one color - safe, minimal

Creating a Color Palette

60-30-10 Rule:

60% Primary color (dominant)
30% Secondary color (supporting)
10% Accent color (call-to-action)

Example Palette:

/* Primary (60%) - Backgrounds, large areas */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-500: #3b82f6; /* Main brand color */
--color-primary-600: #2563eb;
--color-primary-900: #1e3a8a;

/* Secondary (30%) - Complementary elements */
--color-secondary-500: #8b5cf6;
--color-secondary-600: #7c3aed;

SKILL.md on GitHub