القائمة
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.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| 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)color.primary.foreground: Text on primary background (must pass 4.5:1 contrast)color.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
Intent-First design craft specialist covering design direction, domain vocabulary, design memory, and post-build critique. Use when establishing design intent or auditing code against design principles.
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
Documentation generation patterns for technical specs, API docs, user guides, and knowledge bases using real tools like Sphinx, MkDocs, TypeDoc, and Nextra. Use when creating docs from code, building doc sites, or automating documentation workflows.
Backend development specialist covering API design, database integration, microservices architecture, and modern backend patterns. Use when designing APIs, implementing server logic, authentication, or authorization.
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.
Database specialist covering PostgreSQL, MongoDB, Redis, Oracle, and advanced data patterns for modern applications. Use for database schema design, query optimization, indexing strategies, or data modeling.