菜单
Brand-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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/modu-ai/moai-studio --skill moai-domain-brand-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Mobile native and cross-platform development domain skill covering iOS native (Swift/SwiftUI), Android native (Kotlin/Jetpack Compose), React Native, and Flutter. Use when implementing mobile features or selecting between mobile paradigms. Harness seed: invoke builder-skill for deep sub-skills.
MoAI unified orchestrator for autonomous development. Routes natural language or subcommands (plan, run, sync, design, db, project, fix, loop, mx, feedback, review, clean, codemaps, coverage, e2e) to specialized agents.
Brand-aligned copywriting specialist for marketing and product text. Enforces brand voice, anti-AI-slop rules, concrete numbers, and JSON section structure for downstream agent consumption. Covers hero, features, social_proof, cta, and footer sections with A/B variant output.
| name | moai-domain-brand-design |
| description | Brand-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. |
| license | Apache-2.0 |
| compatibility | Designed for Claude Code |
| allowed-tools | Read, Write, Edit, Grep, Glob |
| user-invocable | false |
| metadata | {"version":"1.0.0","category":"domain","status":"active","updated":"2026-04-20","tags":"design, brand, visual-identity, design-tokens, wcag, typography, color-palette, hero-section","related-skills":"moai-domain-copywriting, moai-workflow-gan-loop, moai-domain-uiux"} |
| progressive_disclosure | {"enabled":true,"level1_tokens":100,"level2_tokens":5000} |
| triggers | {"keywords":["design-tokens","color-palette","typography","hero-section","wcag","visual-identity","design system","brand design","spacing system","component spec"],"agents":["expert-frontend"],"phases":["run"]} |
Visual design system skill for brand-aligned web projects. Absorbed from agency-design-system (v1.0.0). Enforces hero-first chaining, WCAG 2.1 AA contrast, and structured design token output for downstream implementation.
Before generating design output, verify:
.moai/project/brand/visual-identity.md exists and contains no _TBD_ markers.moai-domain-copywriting JSON output or inline brief)..moai/config/sections/design.yaml default_framework).If visual-identity.md has unresolved _TBD_ markers, stop and request brand interview completion.
If the defined color palette conflicts with generated design tokens, execution halts and a conflict report is returned (see Error Handling below).
Figma integration is disabled by default. Check .moai/config/sections/design.yaml:
figma:
enabled: false
If figma.enabled: true and a public Figma file URL is provided, extract design tokens from the Figma file. Otherwise use visual-identity.md as the sole source of truth.
The hero section establishes the visual tone for the entire site. All subsequent sections chain from it:
visual-identity.md.Hero section requirements:
Extract and output the following token categories from visual-identity.md:
Color tokens:
color.primary: Brand primary color (hex or OKLCH)基于 SOC 职业分类
color.primary.foregroundcolor.secondary: Secondary brand colorcolor.accent: Call-to-action and highlight colorcolor.neutral.*: Scale from 50 to 950 (gray shades)color.semantic.success, color.semantic.warning, color.semantic.error: Status colorscolor.background: Page backgroundcolor.surface: Card and component backgroundTypography tokens:
font.family.sans: Primary sans-serif stackfont.family.mono: Code and technical contentfont.size.*: Scale: xs (12px), sm (14px), base (16px), lg (18px), xl (20px), 2xl (24px), 3xl (30px), 4xl (36px)font.weight.normal, font.weight.medium, font.weight.bold, font.weight.blackline.height.tight (1.25), line.height.normal (1.5), line.height.relaxed (1.75)Spacing tokens:
space.1 (4px) through space.24 (96px), following 4px gridspace.section: Vertical section padding (default 80px desktop, 48px mobile)space.container.max: Maximum content width (default 1280px)space.container.padding: Horizontal page padding (default 24px mobile, 48px desktop)Border radius tokens:
radius.sm (4px), radius.md (8px), radius.lg (12px), radius.xl (16px), radius.full (9999px)Shadow tokens:
shadow.sm, shadow.md, shadow.lg, shadow.xlOutput all tokens as a structured JSON file compatible with CSS custom properties and Tailwind CSS v4 theme configuration.
All color combinations must pass these contrast ratios:
| Use case | Minimum ratio | Requirement |
|---|---|---|
| Body text (< 18px or < 14px bold) | 4.5:1 | WCAG AA |
| Large text (>= 18px or >= 14px bold) | 3:1 | WCAG AA |
| UI components and graphical objects | 3:1 | WCAG AA |
| Focus indicators | 3:1 | WCAG AA |
If the brand's visual-identity.md specifies a color combination that fails contrast, execution halts and a conflict report is returned. The report includes:
AI slop detection — Reject these visual patterns without brand justification:
#FFFFFF) on light gray (#F9FAFB) background without border or shadowDefine the following component specifications in the design output:
Button:
color.primary background, color.primary.foreground textcolor.secondary background or transparent with bordercolor.semantic.error backgroundcolor.accent), disabled (40% opacity)Card:
color.surfacecolor.neutral.200 (light mode)radius.lgspace.6 (24px)shadow.sm (default), shadow.md (on hover)Navigation:
font.size.sm, font.weight.mediumSection layout:
space.section (see spacing tokens)space.container.maxspace.container.paddingcolor.background and color.surface for visual rhythmDefault responsive grid:
Hero layout options (select based on visual-identity.md preference):
centered: Content centered, full-width background image or gradientsplit-left: Copy left (7 cols), visual right (5 cols)split-right: Visual left (5 cols), copy right (7 cols)Color palette conflict: When generated design tokens conflict with visual-identity.md defined palette, halt execution and return:
BRAND_DESIGN_CONFLICT: Color token mismatch detected.
- Defined in visual-identity.md: <color>
- Generated token: <color>
- Conflict: <explanation>
- Resolution options: [list 2-3 adjustments]
WCAG contrast failure: When brand colors fail contrast requirements, halt and return the conflict report described in the WCAG section. Do not generate fallback colors silently.
Missing identity file: When visual-identity.md does not exist or contains only _TBD_ values, return:
BRAND_DESIGN_MISSING_IDENTITY: visual-identity.md is incomplete.
- Unresolved markers found: <list of _TBD_ fields>
- Action required: Run brand interview via /moai design
When brand context specifies dark mode support:
color.*.dark variants for each semantic colorprefers-color-scheme for automatic switchingKeep interaction guidelines minimal and purposeful:
ease-out for entrances, ease-in for exits, ease-in-out for state changesprefers-reduced-motion media queryGenerated design must meet:
moai-domain-copywriting: Copy length constraints inform layout choicesmoai-workflow-design-import: Replaces code-based design when Claude Design bundle is availablemoai-workflow-gan-loop: Design Quality dimension evaluates token compliance and WCAGmoai-domain-uiux: Extends with accessibility audit patternsSource: Absorbed from agency-design-system v1.0.0 on 2026-04-20. REQ coverage: REQ-SKILL-004, REQ-SKILL-005, REQ-SKILL-006, REQ-FALLBACK-003 Version: 1.0.0