skills.rest
daffy0208
daffy0208COMMUNITY
Explore all skills by this author →
GitHub

Visual Designer

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
One-click install
npx skills add https://github.com/daffy0208/ai-dev-standards --skill visual-designer
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Forexgod21Forexgod21
6

complete-design-system-brand-guidelines

Generate brand guidelines with color palettes, typography, spacing, and tone of voice.

Community
Advanced
datamonsterrdatamonsterr

ui-design-system

Generate design tokens, typography scales, spacing rules, and breakpoints.

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
guideopsguideops

brutalism

Provide design system guidelines with color palettes, typography scales, and spacing.

Community
Intermediate