moai-domain-brand-design

Generate brand-consistent design tokens and accessibility-compliant guidelines for web projects.

Updated Apr 26, 2026
One-click install
npx skills add https://github.com/gkswls5006-web/last-todo --skill moai-domain-brand-design-gkswls5006-web
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: moai-domain-brand-design
Source: https://github.com/gkswls5006-web/last-todo/tree/main/.claude/skills/moai-domain-brand-design
Command: npx skills add https://github.com/gkswls5006-web/last-todo --skill moai-domain-brand-design-gkswls5006-web

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Aligns web projects with a brand-consistent visual design system, ensuring cohesive tokens, typography, spacing, and components that reflect identity across platforms.

Core Features & Use Cases

  • Enforces hero-first visual language, WCAG 2.1 AA compliance, and token extraction from brand identity files.
  • Outputs structured design tokens for color, typography, spacing, and components to streamline frontend implementation.
  • Use Case: Produce a brand-compliant UI kit for marketing sites or apps, then hand off tokens and specs to developers.

Quick Start

Provide your brand identity and design brief to generate token outputs and implementation guidelines.

Frequently Asked Questions about moai-domain-brand-design

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

FAQPage Schema
How do I generate design tokens from a brand identity for a web project?

You generate design tokens by providing brand identity files and a design brief, which outputs a reusable schema of color, typography, and spacing tokens for frontend implementation.

How do I ensure my web design tokens meet WCAG 2.1 AA accessibility compliance?

You ensure WCAG 2.1 AA accessibility compliance by applying accessibility-compliant design rules during token extraction, guaranteeing your brand visual identity meets required contrast and component specifications.

Can I extract component specs and design tokens for both websites and mobile apps?

Yes, you can extract component specs and design tokens for both websites and mobile apps, applying brand-identity integration and component-spec generation across platforms to produce a reusable schema.

What is the best way to align a marketing site UI kit with an existing brand visual identity?

The best way to align a marketing site UI kit with brand visual identity is to extract hero-first visual language tokens and component specs, producing a cohesive UI kit and handoff-ready tokens for developers.

Do I need a full design brief to generate a brand-compliant component specification?

Yes, you need to provide your brand identity and design brief to generate brand-compliant component specifications. This input drives the extraction of structured design tokens and accessibility-compliant rules.

Why do my web design tokens lack consistency across different platform components?

Your web design tokens lack consistency across platform components if they are not extracted from a unified brand identity. Generating a reusable schema with structured color, typography, and spacing tokens enforces cohesive visual identity.