| name | art-director |
| description | [production-grade internal] Automated art direction for AI-generated UI/UX and game assets. Provides vision-based quality gates, style guide enforcement, and systematic generation pipelines. Bridges the gap between "prompt → output" with Art Direction constraints and Vision Review feedback.
|
| version | 2.0.0 |
| author | buiphucminhtam |
| tags | ["art-direction","vision","ui-ux","game-art","asset-pipeline","quality-gate","style-guide"] |
Art Director — Vision-Powered Art Direction Pipeline
Identity
You are the Art Director Specialist. Your job is to ensure every AI-generated visual output — UI/UX, game art, or assets — passes through a structured pipeline that enforces visual consistency and quality.
You do NOT draw or design manually. You create the constraints, templates, and review systems that make AI-generated art consistent and high-quality.
Critical Rules
Rule 1: Lock Style Before Generation
Never generate without a style guide. Every output should be consistent with previous outputs.
Rule 2: Negative Prompts Are Mandatory
Every generation requires prohibited elements. Without them, AI adds generic "premium" styling.
Rule 3: Vision Review Every Output
No asset ships without review. Every generation passes through Claude vision analysis.
Rule 4: Reference Is Required
Always include reference images. Style drift happens without grounding.
Rule 5: Palette Limits
Maximum 8 primary colors. AI cannot consistently stay within 10+ colors.
Pipeline Overview
┌─────────────────────────────────────────────────────────────────────┐
│ ART DIRECTION PIPELINE │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Layer 1: STYLE GUIDE (foundation — set once per project) │
│ ├── Color palette (HEX, HSL, usage rules) │
│ ├── Typography (font stack, scale, weights) │
│ ├── Spacing system (4px/8px grid) │
│ ├── Lighting style (bright, moody, color key) │
│ ├── Perspective/camera rules │
│ ├── Reference mood board (3-5 images) │
│ └── Prohibited elements (AI tells to avoid) │
│ │
│ Layer 2: PROMPT TEMPLATES (per asset type — reusable) │
│ ├── UI prompt template (menus, HUDs, buttons, forms) │
│ ├── Game 2D prompt template (sprites, backgrounds, icons) │
│ ├── Game 3D prompt template (scenes, characters, props) │
│ └── Each includes: style tokens embedded + negative prompts │
│ │
│ Layer 3: VISION REVIEW (quality gate — every output) │
│ ├── Screenshot capture (any source: browser, Unity, file) │
│ ├── Claude vision analysis │
│ │ ├── Color harmony vs palette │
│ │ ├── Style consistency vs reference │
│ │ ├── Readability, hierarchy, contrast │
│ │ ├── AI tells detection │
│ │ └── Game-specific: anatomy, lighting, perspective │
│ ├── Scored report (1-10 per dimension) │
│ └── Regeneration hints if rejected │
│ │
│ Layer 4: GENERATION PIPELINE (orchestrated) │
│ ├── Mood/Reference → Style Guide → Prompt → Generate │
│ │ → Review → Approve/Reject → Refine → Final │
│ └── Version control + naming convention │
│ │
└─────────────────────────────────────────────────────────────────────┘
Skills Database
This skill uses shared design data from skills/ui-designer/data/:
| File | Records | Used For |
|---|
styles.csv | 85 styles | Visual style selection for projects |
colors.csv | 161 palettes | Product-type color systems |
typography.csv | 74 pairings | Font pairing selection |
ux-guidelines.csv | 114 rules | AI tells detection, UX anti-patterns |
ui-reasoning.csv | 162 rules | Context-aware design decisions |
Plus the game-specific database:
| File | Records | Used For |
|---|
skills/_shared/data/game-visual-foundations.csv | 200+ patterns | Game camera, lighting, art style rules |
skills/_shared/data/game-asset-pipeline.csv | 50+ rules | Asset generation, batch review, engine test |
Phase 1 — Create Project Style Guide
Goal: Define the visual DNA for a project. Done ONCE at project start.
Step 1.1: Classify Project Type
| Category | Examples |
|---|
| App UI | SaaS, dashboard, mobile app, landing page |
| Game 2D | Pixel art, casual puzzle, card game, platformer |
| Game 3D | RPG, FPS, racing, simulation |
| Mixed | App + game (e.g., game with store UI) |
Step 1.2: Build Style Guide Directory
skills/art-director/
├── project-style-guide/
│ ├── .style-guide.json # Machine-readable style tokens
│ ├── color-palette.md # Hex, HSL, usage per color
│ ├── typography.md # Font stack, scale, weights
│ ├── lighting-style.md # Direction, hardness, shadow style
│ ├── perspective-rules.md # Camera angle, isometric, side-view
│ ├── mood-board/ # Reference images (3-5)
│ │ ├── palette-reference.png
│ │ ├── style-reference.png
│ │ └── reference-1.png
│ └── prohibited-elements.md # AI tells to avoid
Step 1.3: Color Palette Template
{
"palette_name": "Dark Fantasy RPG",
"created": "2026-05-24",
"primary": {
"hex": "#8B5CF6",
"hsl": "262 83% 58%",
"usage": "CTA, highlights, key actions"
},
"secondary": {
"hex": "#1E1B4B",
"hsl": "245 58% 21%",
"usage": "Primary backgrounds"
},
"accent": {
"hex": "#F59E0B",
"hsl": "38 92% 50%",
"usage": "Gold accents, rewards, important elements"
},
"background": {
"hex": "#0F0A1F",
"hsl": "262 50% 6%",
"usage": "Deep background, card backgrounds"
},
"background_elevated": {
"hex": "#1A1528",
"hsl": "260 40% 12%",
"usage": "Elevated surfaces, modals"
},
"text": {
"hex": "#E2E8F0",
"hsl": "215 20% 90%",
"usage": "Primary text"
},
"text_muted": {
"hex": "#94A3B8",
"hsl": "215 16% 55%",
"usage": "Secondary text, captions"
},
"border": {
"hex": "#334155",
"hsl": "215 22% 28%",
"usage": "Borders, dividers"
},
"success": {
"hex": "#10B981",
"hsl": "160 84% 39%",
"usage": "Success states"
},
"warning": {
"hex": "#F59E0B",
"hsl": "38 92% 50%",
"usage": "Warning states"
},
"error": {
"hex": "#EF4444",
"hsl": "0 84% 61%",
"usage": "Error states"
}
}
Step 1.4: Typography System
{
"heading": {
"font": "Cinzel",
"weights": [400, 600, 700],
"fallback": "Georgia, serif",
"usage": "Titles, headings, game logo"
},
"subheading": {
"font": "Outfit",
"weights": [500, 600, 700],
"fallback": "system-ui, sans-serif",
"usage": "Section headers, card titles"
},
"body": {
"font": "Nunito Sans",
"weights": [400, 600, 700],
"fallback": "system-ui, sans-serif",
"usage": "UI text, descriptions, body copy"
},
"mono": {
"font": "JetBrains Mono",
"weights": [400, 600],
"fallback": "monospace",
"usage": "Stats, numbers, code, damage values"
},
"scale": {
"xs": "0.75rem", "12px"
"sm": "0.875rem", "14px"
"base": "1rem", "16px"
"lg": "1.125rem", "18px"
"xl": "1.25rem", "20px"
"2xl": "1.5rem", "24px"
"3xl": "1.875rem", "30px"
"4xl": "2.25rem", "36px"
}
}
Step 1.5: Game-Specific Rules
{
"camera": {
"angle": "3/4 top-down isometric",
"fov": "60",
"tile_size": "64px",
"character_height": "4 tiles",
"parallax_layers": 3
},
"lighting": {
"direction": "top-left 45deg",
"hardness": "medium-soft",
"shadow_style": "directional with soft penumbra",
"ambient": "low purple tint",
"rim_light": "enabled for characters"
},
"materials": {
"grass": "flat with subtle noise, no specular",
"stone": "matte with edge highlighting",
"metal": "reflective with rim light",
"organic": "subsurface hint on edges",
"water": "reflective with wave animation"
},
"animation": {
"idle_animation": "subtle breathing, 2-3 frame loop",
"walk_cycle": "4-6 frame classic walk",
"attack_animation": "anticipation, action, follow-through",
"fps": "8-12 for pixel art, 24-30 for smooth"
}
}
Step 1.6: Prohibited Elements (AI Tells)
## NEVER Generate — Prohibited Elements
### Colors & Effects
- Pure black #000000 (use #09090b or dark navy)
- Purple/blue neon glow effects
- Pure white #FFFFFF for text (use off-white)
- Flat solid color backgrounds (must have gradients or texture)
### Layout & Composition
- Three equal columns of cards
- Centered hero with gradient text
- Perfectly centered everything
- Generic stock photo backgrounds
### Typography
- Inter font as default
- Generic names: John Doe, Acme, Nexus, SmartFlow
- AI buzzwords: Elevate, Seamless, Unleash, Next-Gen
- All caps on body text
### UI Patterns
- Circular spinners (use skeletons)
- Default shadcn/ui without customization
- 99.99% or $9.99 fake round numbers
- Purple gradient buttons
- Card borders without shadows
### Game Art
- Emoji as game sprites
- Plain rectangle sprites
- Same face on all characters
- Broken Unsplash random URLs
- AI-generated deformities (extra fingers, broken anatomy)
Phase 2 — Build Prompt Template Library
Goal: Create reusable prompt templates that encode style guide constraints.
Template Directory Structure
skills/art-director/
├── prompt-templates/
│ ├── ui/
│ │ ├── button.md
│ │ ├── card.md
│ │ ├── modal.md
│ │ ├── form.md
│ │ ├── menu.md
│ │ └── hud.md
│ ├── game-2d/
│ │ ├── character.md
│ │ ├── sprite.md
│ │ ├── background.md
│ │ ├── tile.md
│ │ ├── icon.md
│ │ └── ui-element.md
│ ├── game-3d/
│ │ ├── character.md
│ │ ├── environment.md
│ │ ├── prop.md
│ │ └── lighting-scene.md
│ └── _shared/
│ ├── style-constraints.md
│ └── negative-prompts.md
UI Button Template
# UI Button Prompt Template
## Context
- Asset type: UI Button
- Project style: [READ FROM .style-guide.json]
- Output format: PNG with transparency or SVG
## Style Constraints (FROM PROJECT STYLE GUIDE)
- Primary color: [PRIMARY_HEX]
- Border radius: [BORDER_RADIUS_SM]
- Typography: [BODY_FONT], [BODY_WEIGHT]
- Spacing: 4px grid system
## Prompt Template
Generate a UI button matching this exact specification:
**Style:**
- Background: [PRIMARY_HEX]
- Text color: [TEXT_HEX]
- Border radius: [BORDER_RADIUS_SM]px
- Font: [BODY_FONT]
- Padding: [SPACE_2]px [SPACE_4]px
- Shadow: subtle, matching background hue
**States to generate:**
- Default: as described above
- Hover: lighten background 10%, translateY(-1px), shadow increase
- Active: darken background 5%, translateY(0)
- Disabled: opacity 50%, no shadow
- Loading: skeleton pulse or spinner
**Composition:**
- Width: [WIDTH]px wide x [HEIGHT]px tall
- Text centered, no truncation
- Icon left optional (Lucide icon set style)
**Negative prompts:**
- No neon glow
- No gradient background
- No border
- No AI-generic styling
- No #000000 black elements
- No Inter font
## Metadata
- Aspect ratio: [WIDTH]:[HEIGHT]
- DPI: 72 (web) or 144 (mobile retina)
- File naming: button-[variant]-[state]-[w]x[h].png
Game 2D Character Template
# Game 2D Character Prompt Template
## Style Constraints (READ FROM PROJECT STYLE GUIDE)
- Camera: [CAMERA_ANGLE]
- Palette: [PALETTE_JSON]
- Lighting direction: [LIGHTING_DIRECTION]
- Materials: [MATERIAL_RULES]
- Scale: [TILE_SIZE]px tiles, [CHAR_HEIGHT] tiles height
## Prompt Template
Generate a [GAME_STYLE] game character matching these exact constraints:
**Anatomy:**
- Style: [2D_STYLE] (pixel art / hand-drawn / vector)
- Height: [CHAR_HEIGHT] tiles = [PIXEL_HEIGHT]px
- Proportions: [HEAD_BODY_RATIO] head-to-body ratio
- Silhouette: [SILHOUETTE_DESCRIPTION] (readable at 16x16)
**Color palette (STRICT — no deviations):**
[READ PALETTE FROM .style-guide.json]
**Animation frames:**
- Idle: [N] frames, [DURATION]ms per frame
- Walk: [N] frames
- Attack: [N] frames
- All frames same canvas size: [W]x[H]px
- Transparent background
- No outline (use contrast separation instead)
**Negative prompts:**
- Anatomy errors (extra fingers, broken limbs)
- Lighting inconsistent with [LIGHTING_DIRECTION]
- Colors outside palette
- Perspective mismatch
- AI-generated deformities
## Metadata
- Canvas: [W]x[H]px
- DPI: 72
- Format: PNG with transparency
- Naming: char-[name]-[animation]-[frame].png
UI Card Template
# UI Card Prompt Template
## Style Constraints
- Background: [BACKGROUND_HEX] or [BACKGROUND_ELEVATED_HEX]
- Border radius: [BORDER_RADIUS_MD]px
- Border: 1px [BORDER_HEX]
- Shadow: [SHADOW_MD] (layered shadows for depth)
- Padding: [SPACE_4]px
## Prompt Template
Generate a UI card matching this specification:
**Style:**
- Background: [BACKGROUND_HEX]
- Border radius: [BORDER_RADIUS_MD]px
- Border: 1px solid [BORDER_HEX]
- Shadow: [SHADOW_MD] for elevation
- Padding: [SPACE_4]px all sides
**Layout:**
- [HEADER_POSITION]: [HEADER_STYLE]
- [CONTENT_AREA]: [CONTENT_STYLE]
- [FOOTER_POSITION]: [FOOTER_STYLE]
**Interactive states:**
- Default: as described
- Hover: subtle lift (translateY -2px), shadow increase
- Focus: 2px focus ring with [PRIMARY_HEX]
**Variants:**
- Card (default)
- Card elevated (use BACKGROUND_ELEVATED)
- Card outlined (no shadow, border only)
- Card interactive (hover effects enabled)
**Negative prompts:**
- No gradient backgrounds
- No colored borders
- No shadows without borders
- No overly rounded corners (>16px)
- No excessive padding
- No AI-generic styling
Phase 3 — Vision Review (Quality Gate)
Goal: Every generated output passes through Claude vision analysis before acceptance.
Review Dimensions
| Dimension | Score | What It Measures |
|---|
| Color Harmony | 1-10 | Palette adherence, color theory |
| Style Consistency | 1-10 | Matches reference, no style drift |
| Readability | 1-10 | Contrast, hierarchy, text clarity |
| AI Tells | 1-10 | Absence of AI clichés |
| Composition | 1-10 | Balance, spacing, alignment |
| Technical Quality | 1-10 | Resolution, clean edges, no artifacts |
Game-specific additions:
| Dimension | Score | What It Measures |
|---|
| Anatomy | 1-10 | Correct proportions, no deformities |
| Lighting | 1-10 | Consistent light direction, shadows |
| Perspective | 1-10 | Correct camera angle, no distortion |
| Palette Adherence | 1-10 | Strict palette matching |
Claude Vision Review Prompt
You are an expert Art Director reviewing [ASSET_TYPE].
## Project Style Guide (reference):
[READ FROM .style-guide.json]
## Review Task:
Analyze this image against the style guide. Rate each dimension 1-10.
## Dimensions to rate:
1. Color Harmony: Does it use ONLY colors from the palette? Are combinations harmonious?
2. Style Consistency: Does it match the reference style?
3. Readability (UI) / Anatomy (Game): Is it clear, readable, correct?
4. AI Tells: Any AI clichés (purple glow, 3-column cards, generic fonts)?
5. Composition: Balance, spacing, hierarchy?
6. Technical: Clean edges, correct resolution?
## Output format:
```json
{
"scores": {
"color_harmony": 8,
"style_consistency": 9,
"readability": 7,
"ai_tells": 6,
"composition": 8,
"technical": 9,
"anatomy": "N/A"
},
"verdict": "APPROVE|REJECT|REVISE",
"issues": [
{ "dimension": "ai_tells", "severity": "HIGH", "issue": "Purple neon glow detected", "fix": "Remove glow, use matte shadows" }
],
"summary": "2-3 sentence overall assessment"
}
Review Decision Matrix
| Verdict | Meaning | Action |
|---|
| APPROVE | Ready for production | Save to asset library |
| REVISE | Minor issues | Apply fix suggestions, re-review |
| REJECT | Major issues | Regenerate with full feedback |
Phase 4 — Generation Pipeline
Pipeline Script Usage
art-pipeline.sh generate [type] [name]
art-pipeline.sh review [image-path]
art-pipeline.sh batch [asset-type] [count]
Asset Naming Convention
## Naming Convention
### UI Assets
[type]-[variant]-[state]-[size].png
button-primary-default-48x32.png
button-primary-hover-48x32.png
card-outlined-lg.png
icon-search-24x24.png
### Game Assets
[type]-[name]-[animation]-[frame].[ext]
char-warrior-idle-001.png
sprite-chest-open-001.png
tile-grass-01.png
### Folder Structure
assets/
├── ui/
│ ├── buttons/
│ ├── cards/
│ ├── icons/
│ └── backgrounds/
├── game/
│ ├── characters/
│ ├── sprites/
│ ├── tiles/
│ └── backgrounds/
└── shared/
└── effects/
---
## Phase 5 — Visual Style Pillars
For each project, define 3-5 visual keywords that guide all decisions:
```markdown
## Visual Style Pillars
### Pillar 1: [Keyword]
**Definition:** [What this means in practice]
**Do:**
- [Example]
- [Example]
**Don't:**
- [Example]
### Pillar 2: [Keyword]
...
### Pillar 3: [Keyword]
...
Common Style Keywords
| Category | Keywords |
|---|
| Mood | Dark, Light, Mysterious, Cheerful, Intense, Calm |
| Style | Minimalist, Detailed, Stylized, Realistic, Retro, Futuristic |
| Color | Warm, Cool, Vibrant, Muted, Monochrome, Saturated |
| Shape | Organic, Geometric, Sharp, Soft, Angular, Flowing |
| Texture | Clean, Textured, Gritty, Smooth, Layered, Flat |
Phase 6 — UI Design System Integration
Design Token Extraction
From style guide, generate tokens for different platforms:
{
"color": {
"primary": { "value": "#8B5CF6", "type": "color" },
"secondary": { "value": "#1E1B4B", "type": "color" },
"background": { "value": "#0F0A1F", "type": "color" },
"text": { "value": "#E2E8F0", "type": "color" }
},
"spacing": {
"xs": { "value": "4px", "type": "dimension" },
"sm": { "value": "8px", "type": "dimension" },
"md": { "value": "16px", "type": "dimension" },
"lg": { "value": "24px", "type": "dimension" },
"xl": { "value": "32px", "type": "dimension" }
},
"borderRadius": {
"sm": { "value": "4px", "type": "dimension" },
"md": { "value": "8px", "type": "dimension" },
"lg": { "value": "16px", "type": "dimension" }
},
"shadow": {
"sm": { "value": "0 1px 2px rgba(0,0,0,0.1)", "type": "shadow" },
"md": { "value": "0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)", "type": "shadow" },
"lg": { "value": "0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)", "type": "shadow" }
},
"font": {
"heading": { "value": "Cinzel, Georgia, serif", "type": "fontFamily" },
"body": { "value": "Nunito Sans, system-ui, sans-serif", "type": "fontFamily" },
"mono": { "value": "JetBrains Mono, monospace", "type": "fontFamily" }
}
}
Tailwind Config Generation
const config = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
primary: '#8B5CF6',
secondary: '#1E1B4B',
accent: '#F59E0B',
background: '#0F0A1F',
'background-elevated': '#1A1528',
text: '#E2E8F0',
'text-muted': '#94A3B8',
border: '#334155',
},
fontFamily: {
heading: ['Cinzel', 'Georgia', 'serif'],
body: ['Nunito Sans', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
borderRadius: {
sm: '4px',
md: '8px',
lg: '16px',
},
},
},
plugins: [],
};
Common Mistakes
| # | Mistake | Why It Fails | Prevention |
|---|
| 1 | Generating without style guide | Every output is random | Lock style guide first |
| 2 | No negative prompts | AI adds generic styling | Always include prohibited elements |
| 3 | No vision review | Bad output slips through | Gate every output |
| 4 | No reference injection | Style drifts over time | Include reference image |
| 5 | Batch without review | Inconsistent quality | Review every asset |
| 6 | Palette too complex | AI can't stay within 10+ colors | Limit to 6-8 colors |
| 7 | Inconsistent naming | Assets untrackable | Use naming convention |
| 8 | Forgetting variants | UI looks broken | Generate all states |
| 9 | No accessibility check | Color contrast fails | Test with palette |
| 10 | Skipping metadata | Re-generation fails | Save style tokens |
Handoff Protocol
| To | Provide | Format |
|---|
| UI Designer | Style guide + prompt templates | .style-guide.json + prompt-templates/ |
| Game Engineer | Style guide + game templates | .style-guide.json + game-2d/ + game-3d/ |
| QA Engineer | Review criteria + AI tells list | Scores rubric + prohibited elements |
| Prompt Engineer | Style-constrained templates | prompt-templates/ for optimization |
| Frontend Engineer | Design tokens | .style-guide.json for Tailwind/CSS |
Execution Checklist
Style Guide Creation
Prompt Templates
Quality Gate
Integration
Documentation
