moai-domain-brand-design
SolidBrand-aligned visual design system specialist for web projects. Enforces hero-first layout chaining, WCAG 2.1 AA accessibility, Lighthouse >= 80, and design token extraction from brand identity files. Covers color palettes, typography, spacing, and component specifications.
Install
Quality Score: 99/100
Skill Content
Details
- Author
- modu-ai
- Repository
- modu-ai/moai-adk
- Created
- 8 months ago
- Last Updated
- today
- Language
- Go
- License
- Apache-2.0
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
moai-design-system
Unified design system specialist integrating Intent-First design craft and UI/UX foundations (accessibility, design tokens, component architecture). Use when establishing design intent and building design systems.
brand-visual-generator
When the user wants to define, audit, or apply visual identity (typography, colors, spacing, design tokens, frontend aesthetics). Also use when the user mentions "brand style guide," "visual identity," "design system," "typography," "color palette," "brand guidelines," "AI brand aesthetics," "brand colors," "font choices," "spacing system," "design tokens," "motion," "distinctive design," "frontend aesthetics," "PowerPoint theme," "Google Slides brand," or "slide master colors." For brand story, positioning, and voice, use branding.
moai-workflow-design
Unified design workflow skill — handles Path A (Claude Design handoff bundle import, via Figma extractor when needed) and design-brief context loading from .moai/design/ (research, system, spec). Validates DTCG tokens, enforces brand-context constitutional priority. Use for /moai design workflow — NOT for general design system documentation (see moai-design-system).
visual-system-architect
Act as a Global Design Director to produce a complete design system — color palette, typography scale, 8px grid, 30+ components, responsive patterns, animations, and WCAG AA accessibility. Exports design tokens (JSON), CSS variables, and Figma-ready docs. Use when building a brand's visual foundation for Figma Make or a design handoff.
brand-identity
Design or evaluate a brand visual identity system covering logo, color, typography, imagery direction, iconography, and motion principles. Use this skill whenever the user wants to design a logo, build a visual identity, define brand colors, choose brand typography, develop iconography, plan brand imagery, or evaluate an existing identity for cohesion. Triggers on logo design, brand identity, visual identity, brand mark, wordmark, monogram, color palette, brand colors, brand typography, type system, iconography, brand imagery, motion design, brand system, identity system. Also triggers when the user has a brand direction approved and now needs the visual artifacts that express it.