Verified:GitHub

visual-design-foundations

Name: visual-design-foundations
Availability: InStock
Author: MinhAnh-Corp

Standardize typography, color, spacing, and iconography into design tokens and style guides for web and mobile interfaces.

Updated Apr 8, 2026

Search Tags:#typography #design #tokens #color #spacing #iconography #visual-system

Ready to run

npx skills add https://github.com/MinhAnh-Corp/ai-designer --skill visual-design-foundations-minhanh-corp

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/MinhAnh-Corp/ai-designer/tree/main/skills/ui-visual-design-foundations
Command: npx skills add https://github.com/MinhAnh-Corp/ai-designer --skill visual-design-foundations-minhanh-corp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Standardize typography, color, spacing, and iconography to solve inconsistent visual design across products.

Core Features & Use Cases

Typography scale and tokenization to ensure consistent headings, body text, and UI typography.
Spacing system and grid usage to maintain rhythm and alignment across screens.
Color system with semantic tokens including support for dark mode and accessible contrast.
Iconography patterns and visual assets to unify visuals across platforms.
Use case: Establishing design tokens and a style guide for a new product family.

Quick Start

Initialize a new design system by creating tokens for typography, color, spacing, and iconography, then begin building the style guide.

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 across web and mobile interfaces?▼

Create design tokens by standardizing typography scales, semantic color systems, and spacing grids to ensure consistent UI elements. This approach solves inconsistent visual design across products while enabling scalable components and dark mode support for web and mobile interfaces.

What is a visual design system and when do I need one for my product?▼

A visual design system standardizes typography, color, spacing, and iconography to solve inconsistent visual design across products. You need one when establishing a style guide, performing accessibility audits, or building a scalable component library for new product families.

How do I set up a spacing system and grid for consistent UI alignment?▼

Set up a spacing system by creating standardized tokens that maintain rhythm and alignment across screens. This visual system approach ensures consistent spacing scales and grid usage, which unifies visuals and establishes predictable layout patterns across platforms.

Does this approach support dark mode and accessible color contrast for UI design?▼

Yes, this color system approach supports dark mode and accessible color contrast through semantic tokens. It enables style guide development and accessibility audits, ensuring your visual system meets contrast requirements across web and mobile interfaces.

Can I use these visual system patterns for both web and mobile platforms?▼

Yes, these visual system patterns apply to both web and mobile interfaces. The iconography patterns and token systems unify visuals across platforms, ensuring consistent typography, color, and spacing documentation throughout your scalable components.

What's the best way to unify iconography and visual assets across multiple products?▼

The best way to unify iconography is by establishing standard patterns and visual assets within a token-based visual system. This approach solves inconsistent visual design across products by creating a unified style guide for all platforms.