visual-design

name

visual-design

description

Visual design and branding skill covering brand expression, design systems, and visual refinement. Use when creating or evaluating brand systems, style guides, design language, tone and voice, or marketing design. Also use when building component libraries, defining design tokens, creating pattern libraries, writing design system documentation, managing design system versioning, or establishing governance. Also use for visual refinement including pixel perfection, optical alignment, consistency auditing, or polish and craft. Triggers on: brand system, visual identity, style guide, design language, design principles, tone and voice, marketing design, landing page, component library, design tokens, pattern library, design system documentation, versioning, governance, pixel perfect, optical alignment, consistency audit, polish, craft, visual refinement, design system, brand expression, brand guide.

Visual Design & Branding

Visual design guidance across three domains: brand expression, design systems, and visual refinement. Covers 15 methods for creating cohesive, high-quality visual products — from establishing brand identity to maintaining pixel-level craft.

Method Selection Guide

Question	Method
How do all visual elements feel like one brand?	Brand System Design
How do we document design rules for others to follow?	Style Guide Creation
What are the principles guiding every design decision?	Design Language Development
How does the visual design express personality?	Tone & Voice
How do we design marketing and promotional surfaces?	Marketing Design
How do we build reusable components developers can implement?	Component Library Creation
What are the atomic values of the design system?	Design Token Definition
How do we document common UI patterns?	Pattern Library
How do teams learn and use the design system?	Documentation
How do we manage changes without breaking consumers?	Versioning
How do we maintain quality as the system grows?	Governance
Is this design executed with precision?	Pixel Perfection
Does this look visually correct (beyond math)?	Optical Alignment
Is the design system being applied consistently?	Consistency Auditing
What separates a good design from a great one?	Polish & Craft

Domain Sequencing

Brand Expression (define the visual identity)
  └── Design Language → Brand System Design → Tone & Voice
      → Style Guide Creation → Marketing Design

Design Systems (systematize and scale the identity)
  └── Design Token Definition → Component Library Creation
      → Pattern Library → Documentation → Versioning → Governance

Visual Refinement (elevate execution quality)
  └── Optical Alignment → Pixel Perfection
      → Consistency Auditing → Polish & Craft

Reference Files

• Brand expression — Read .claude/skills/visual-design/brand-expression.md for: brand system design, style guide creation, design language development, tone & voice, marketing design
• Design systems — Read .claude/skills/visual-design/design-systems.md for: component library creation, design token definition, pattern library, documentation, versioning, governance
• Visual refinement — Read .claude/skills/visual-design/visual-refinement.md for: pixel perfection, optical alignment, consistency auditing, polish & craft