Visual Designer

Name: Visual Designer
Availability: InStock
Author: daffy0208

Create color palettes and typography systems using the 60-30-10 rule.

34|7|Updated Oct 22, 2025

Search Tags:#typography #design #layout #color #spacing #visual hierarchy

Ready to run

npx skills add https://github.com/daffy0208/ai-dev-standards --skill visual-designer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Visual Designer
Source: https://github.com/daffy0208/ai-dev-standards/tree/main/SKILLS/visual-designer
Command: npx skills add https://github.com/daffy0208/ai-dev-standards --skill visual-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the guesswork and inconsistency in visual design by providing systematic approaches to color, typography, spacing, and layout.

Core Features & Use Cases

Color Systems: Create harmonious, accessible color palettes using the 60-30-10 rule and WCAG contrast standards.
Typography Systems: Establish readable, hierarchical typography with proper font pairing and type scales.
Use Case: Imagine you're building a new web application. Use this Skill to create a complete design system with brand colors, font hierarchy, and consistent spacing.

Quick Start

Use the visual designer skill to create a color palette with primary, secondary, and accent colors following the 60-30-10 rule.

Frequently Asked Questions about Visual Designer

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

FAQPage Schema

How do I create a color palette that follows design best practices?▼

Create a color palette using the 60-30-10 rule: 60% dominant color, 30% secondary, 10% accent. This approach, combined with WCAG contrast standards, ensures accessible, harmonious colors for your interface.

What's the best way to establish a typography system for consistent design?▼

Establish typography systems by pairing complementary fonts and creating type scales with proper hierarchy. This ensures readable, scalable text across all components and maintains visual consistency throughout your interface.

How do I build a spacing system that scales across my design?▼

Use an 8-point spacing grid as your foundational unit. This creates predictable, scalable spacing that maintains consistency across layouts, components, and mockups while improving alignment and visual rhythm.

What does visual hierarchy accomplish in UI design?▼

Visual hierarchy directs user attention by organizing elements through color, typography, and spacing. Proper hierarchy communicates importance, guides navigation, and improves usability across your interface.

Can I use these design principles to build a complete design system?▼

Yes. Combine color systems, typography scales, and spacing grids to build a complete, reusable design system. This ensures consistency, accessibility, and polish across all components and mockups.

Do I need to manually check color contrast for accessibility?▼

No. This approach applies WCAG contrast standards systematically when building your color palette, ensuring accessibility requirements are satisfied across your interface without manual verification per component.