visual-design-foundations

Overview

What is visual-design-foundations?

visual-design-foundations is a practical skill for UI designers and developers who want to build visually consistent, accessible interfaces. It provides foundational guidance on typography scales, color theory, spacing systems, and iconography, helping teams establish design tokens and style guides for both web and product interfaces.

Who Should Use This Skill?

• UI/UX designers building or refining design systems
• Frontend developers implementing style tokens
• Teams seeking to improve visual hierarchy and readability
• Anyone auditing or updating visual consistency across products

Problems Solved

• Establishes scalable typography and spacing systems
• Guides accessible color palette creation (including dark mode)
• Supports icon system design and visual asset consistency
• Helps audit and improve visual hierarchy in interfaces

How to Use

Installation Steps

1. Install visual-design-foundations with:

   npx skills add https://github.com/wshobson/agents --skill visual-design-foundations
   

2. Start by reviewing SKILL.md for a summary of core principles and recommended workflows.
3. Explore supporting files:
   • references/color-systems.md: Learn about perceptually uniform color scales and semantic color tokens.
   • references/spacing-iconography.md: Understand the 8-point grid and semantic spacing tokens for layout consistency.
   • references/typography-systems.md: Build modular typography scales and apply CSS custom properties.

Adapting to Your Workflow

• Integrate recommended CSS custom properties and token systems into your own repository or Figma library.
• Use the modular scale and spacing system as a baseline, then customize ratios and units to fit your brand or product needs.
• Reference the color system guidance to generate accessible palettes and semantic tokens for theming.

When is visual-design-foundations a Good Fit?

• Starting a new design system or UI library
• Auditing existing interfaces for consistency
• Implementing dark mode or theme variants
• Building accessible, scalable visual assets

When Not to Use

• If your project already has a mature, well-documented design system
• For highly custom or experimental visual styles that don't rely on standard design tokens

FAQ

Where can I find all the supporting files?

Open the Files tab to inspect the full file tree, including nested references and helper scripts.

Does visual-design-foundations support Figma workflows?

Yes. The principles and token systems can be adapted to Figma libraries and design system files.

Can I use visual-design-foundations for dark mode?

Absolutely. The skill includes guidance for accessible color palette generation and semantic tokens, which are essential for theming and dark mode support.

How do I customize the typography or spacing scale?

Review references/typography-systems.md and references/spacing-iconography.md for modular scale formulas and CSS property examples. Adjust ratios and base units as needed for your project.

Is this skill suitable for design system teams?

Yes. visual-design-foundations is ideal for teams establishing or refining design tokens, style guides, and cohesive UI patterns.