skills.rest
zeroix07
zeroix07COMMUNITY
Explore all skills by this author →
GitHub

visual-design-foundations

Generate accessible design token systems with typography scales and 8-point spacing grids.

Updated May 30, 2026
Search Tags:#typography#accessibility#ui-ux#spacing#iconography#design-systems#color-theory
One-click install
npx skills add https://github.com/zeroix07/mcp-skill-agent --skill visual-design-foundations-zeroix07
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/zeroix07/mcp-skill-agent/tree/main/visual-design-foundations
Command: npx skills add https://github.com/zeroix07/mcp-skill-agent --skill visual-design-foundations-zeroix07

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the pain of inconsistent, inaccessible visual designs by providing standardized, actionable frameworks for building cohesive design systems that work across products and teams.

Core Features & Use Cases

  • Standardized Design Tokens: Create consistent typography scales, 8-point spacing systems, and semantic color palettes that unify design and development implementation.
  • Accessible Design Implementation: Build WCAG-compliant color systems, dark mode theming, and inclusive iconography that works for all users.
  • Use Case Example: When launching a new web application, use this Skill to generate a full set of design tokens, accessibility guidelines, and implementation examples for Tailwind CSS that your team can adopt immediately.

Quick Start

Use the visual-design-foundations skill to create a complete accessible design token system for a new mobile app, including a typography scale, 8-point spacing grid, and dark mode color palette.

Frequently Asked Questions about visual-design-foundations

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

FAQPage Schema
How do I build a UI design system that meets WCAG color contrast standards?▼

To build a WCAG-compliant design system, you need standardized frameworks for semantic color palettes and inclusive iconography. This ensures accessible product design workflows with proper dark mode theming across web and mobile applications.

What is an 8-point grid spacing system and how do I apply it to mobile apps?▼

An 8-point grid spacing system is a modular layout framework that eliminates inconsistent visual design. You apply it to mobile apps by generating standardized design tokens to unify UI/UX consistency across development teams.

How do I create a modular typography scale for a consistent UI?▼

Creating a modular typography scale involves establishing standardized design tokens for font sizes and line heights. This framework eliminates inconsistent visual implementation and ensures scalable text across web and mobile interfaces.

Can I generate Tailwind CSS design tokens for dark mode theming?▼

Yes, you can generate design tokens and implementation examples for Tailwind CSS. This includes creating semantic color palettes for dark mode theming and WCAG-compliant color contrast systems for immediate team adoption.

What is the best way to audit UI/UX consistency across web products?▼

The best way to audit UI/UX consistency is applying standardized frameworks for typography, color, spacing, and iconography. This identifies and eliminates inconsistent visual design implementation across your products.

Why does my visual design implementation feel inconsistent across different platforms?▼

Visual design implementation feels inconsistent when lacking standardized design tokens for typography, color, and spacing. Adopting a cohesive design system with an 8-point grid and modular scales resolves these cross-platform discrepancies.

Related Skills

Explore More Design & Creative Skills→
UnicornUnicorn

ui-design-agent

Design UI patterns, components, and design systems for web and mobile applications.

Official
Advanced
NammDevNammDev
2

ui-styling

Integrate shadcn/ui with Tailwind CSS for React UI styling.

Community
Intermediate
47network47network
5

design-critique

Audits UI color contrast and typography readability for WCAG alignment and actionable fixes.

Community
Advanced
cometchatcometchat
74

cometchat-native-theming

Configure CometChat React Native theming and localization with provider components.

Official
Advanced