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.
インストール
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
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
