visual-design-foundations

Codify typography, color, spacing, and iconography into design tokens and style guides.

1|Updated Apr 27, 2026
One-click install
npx skills add https://github.com/haxlys/skills --skill visual-design-foundations-haxlys
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/haxlys/skills/tree/main/vendored/wshobson-agents/plugins/ui-design/skills/visual-design-foundations
Command: npx skills add https://github.com/haxlys/skills --skill visual-design-foundations-haxlys

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Establishes a unified visual language by codifying typography, color, spacing, and iconography to prevent design drift and speed up UI delivery.

Core Features & Use Cases

  • Design tokens for typography, color, and spacing that scale across platforms.
  • Style guide templates and documentation to accelerate handoffs between design and development.
  • Accessibility-friendly guidelines for contrast, typography, and iconography to improve usability.

Quick Start

Generate a starter design token set and style guide for a new project based on provided brand values.

Frequently Asked Questions about visual-design-foundations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create design tokens for typography and color systems?

You can create design tokens for typography and color systems by codifying visual scales into semantic tokens, establishing a unified vocabulary that scales across platforms to prevent design drift.

What is the best way to build a style guide for design handoffs?

The best way to build a style guide for design handoffs is to document typography, color, and spacing rules using templates, accelerating delivery and alignment between design and development teams.

How do I conduct an accessibility audit for visual design contrast?

To conduct an accessibility audit for visual design contrast, apply accessibility-friendly guidelines to evaluate your color systems and typography scales, ensuring usable contrast ratios across all UI elements.

Can I establish scalable iconography guidelines using a tokens-driven vocabulary?

Yes, you can establish scalable iconography guidelines using a tokens-driven vocabulary to standardize visual elements, ensuring consistent application and seamless integration within your broader design system.

Why does design drift happen and how do I prevent it across products?

Design drift happens when visual language lacks codification; prevent it across products by defining typography, color, spacing, and iconography design tokens that enforce strict visual consistency.

Do I need design tokens to generate a starter style guide based on brand values?

Yes, a tokens-driven vocabulary is required to generate a starter style guide, as it translates raw brand values into structured typography scales and color semantic tokens for immediate UI application.