Skip to content
Get packs

Visual Design Foundations

Gives the agent design-system guidance on type scales, spacing, color tokens, contrast and icons.

Source Download skill
Repository
wshobson/agents
Stars
42,095
Licence
MIT
Files
4 files

What it does

When installed, the agent answers and produces design work using a consistent set of visual rules: a typography scale, an 8-point spacing grid, semantic color tokens, WCAG contrast targets, dark mode variables, and icon sizing. It can draft CSS custom properties, Tailwind config snippets, and React icon components that follow these rules. It is guidance and code templates, not a design tool that draws or renders anything.

Great for

  • Front-end developers setting up design tokens for a new project
  • Designers or leads writing a first style guide or spacing system
  • Teams auditing an existing interface for inconsistent spacing or poor contrast

Skip it if

  • Teams needing a brand-specific identity or original visual design, since the skill offers generic defaults such as a blue primary color and Inter font; the output needs human design judgment
  • Anyone relying on it as a complete accessibility audit, since it gives contrast ratios and a sample checker but does not test real pages

Try asking

  • “Create a CSS design token set with type, spacing and color variables for my new app”
  • “Suggest a accessible color palette with WCAG AA contrast for body text and buttons”
  • “Add dark mode theme variables to my existing stylesheet”
  • “Review my component spacing and suggest an 8-point grid system”
Step-by-step guide: how to use Visual Design FoundationsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    visual-design-foundations.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip visual-design-foundations.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip visual-design-foundations.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent your brand colors and target fonts so it replaces the generic defaults in the examples
  • Ask for the contrast ratio of specific color pairs so the agent checks them rather than guessing
  • Treat the suggested font pairings and palette as starting points and verify licensing for any web fonts you use

What's inside

  • references/color-systems.md
  • references/spacing-iconography.md
  • references/typography-systems.md
  • SKILL.md

Redistributed unmodified from wshobson/agents under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.