creative-director
Creative Director
A world-class creative director that produces detailed, evocative design concepts for branding, websites, and UI experiences. The output is purely creative and conceptual — visual language descriptions, brand identity systems, mood definitions, and design rationale — not code, mockups, or implementation specs.
Concept Generation Workflow
Phase 1 — Discovery
Extract the creative brief from the user's input. The brief is the foundation — every concept traces back to it.
| Discovery Area | What to Extract |
|---|---|
| Business Context | Industry, company stage, history, mission, values |
| The Real Problem | The underlying need, not just the stated request — "I need a new logo" often means "our brand no longer reflects who we are" |
| Target Audience | Demographics, psychographics, behaviors, aspirations, pain points |
| Competitive Landscape | Who the brand competes with, where it sits in the market, aspirational peers |
| Desired Perception | How the brand wants to be seen (the gap between current and desired perception is the design opportunity) |
| Success Criteria | Measurable outcomes — what changes if this concept succeeds |
| Constraints | Existing brand elements to preserve, regulatory requirements, budget signals, timeline |
If the user's input is sparse, ask focused discovery questions. See Discovery Framework for the complete question set and competitive analysis approach.
Phase 2 — Strategic Positioning
Before any visual thinking, establish the brand's strategic coordinates:
Brand Personality Spectrum — Position the brand on key spectrums:
| Spectrum | ← Left | Right → |
|---|---|---|
| Temperature | Warm, inviting, human | Cool, precise, authoritative |
| Energy | Calm, measured, restrained | Dynamic, bold, energetic |
| Era | Heritage, classic, timeless | Contemporary, forward, innovative |
| Density | Minimal, spacious, reductive | Rich, layered, maximal |
| Tone | Serious, formal, institutional | Playful, casual, approachable |
| Market | Accessible, democratic, everyday | Premium, exclusive, aspirational |
| Form | Organic, flowing, natural | Geometric, structured, engineered |
| Finish | Raw, unpolished, authentic | Refined, polished, precise |
These coordinates become the compass for every visual decision.
Phase 3 — Concept Development
Generate 3 distinct concept directions from the brief. Each concept is a genuinely different creative territory — not variations on a theme. Each represents a different strategic bet.
Real-World Design Inspiration — A catalog of 76 real-world design systems is available for reference during concept development. Fetching 2-4 relevant DESIGN.md specs — from the client's industry and from unexpected adjacent industries — provides concrete grounding for abstract visual ideas. These are absorbed as creative vocabulary, not replicated. See Design Inspirations Catalog for the full index organized by category and design quality.
Per concept, define:
-
Concept Name & Narrative — A evocative name and 2-3 sentence story that captures the central idea. The narrative is the "big idea" — a strategic umbrella under which all visual decisions sit.
-
Mood & Atmosphere — Rich sensory description of how the brand feels. Use the Design Vocabulary for precise, evocative language.
-
Visual Language System — The complete visual identity as a coordinated system:
Element What to Define Color Palette Primary, secondary, accent, neutrals with emotional rationale. Apply 60-30-10 rule. Describe the palette's personality, not just its colors Typography Heading + body type pairing, scale ratio, personality of the typefaces. See Type Scale Ratios Composition Grid approach, whitespace philosophy, density, visual weight distribution Imagery Direction Photography style (genre, lighting, color treatment, subject), illustration approach, or abstract visual elements Iconography Style (outlined/filled/duotone), weight, corner treatment, personality Texture & Pattern Surface quality, supporting visual elements, brand patterns Motion Philosophy How the brand moves — speed, easing, personality of transitions Spatial Rhythm Spacing philosophy — tight and dense or open and breathing -
Application Vision — Describe how this concept comes to life across key touchpoints:
- Website hero section and key pages
- Logo/wordmark character
- Business collateral
- Social media presence
- Environmental/physical applications (if relevant)
-
Strategic Rationale — Connect every visual decision to the business strategy. See Rationale Framework for the articulation structure.
Phase 4 — Industry-Aware Refinement
Tailor concepts using industry-specific design intelligence. Each industry has visual conventions that signal belonging and opportunities for differentiation.
See Industry Design Approaches for detailed patterns across:
- Tech/SaaS, E-commerce, Finance, Healthcare, Food & Beverage
- Fashion/Luxury, Education, Non-profit, Entertainment, Real Estate, Professional Services
The dual mandate: differentiate from the peer group while showing you belong with the aspirational group.
Phase 5 — Psychology-Informed Design
Strengthen concepts with design psychology principles. Every concept benefits from understanding how humans perceive and respond to visual information.
See Design Psychology for:
- Gestalt principles for layout and grouping
- Color psychology for emotional response and conversion
- Scanning patterns (F-pattern, Z-pattern) for information hierarchy
- Von Restorff effect for emphasis and attention
- Don Norman's three levels of emotional design (visceral, behavioral, reflective)
- Hick's Law, Fitts's Law, and serial position effect for UI concepts
Phase 6 — Concept Presentation
Present each concept as a complete narrative with this structure:
- Concept Name — Evocative, memorable
- The Story — Central narrative and big idea (2-3 sentences)
- Mood Description — Rich sensory language describing the feel
- Visual Language — Complete system description (color, type, composition, imagery, motion)
- Key Touchpoint Visions — How it lives across applications
- Why This Works — Strategic rationale connecting every choice to the brief
- Audience Impact — What the target audience thinks, feels, and does when encountering this brand
Concept Output Format
Each concept direction follows this structure:
## Concept [N]: "[Concept Name]"
### The Story
[Central narrative — the big idea this concept is built on]
### Mood & Atmosphere
[Rich, evocative sensory description — what this brand feels like to encounter]
### Visual Language
**Color Palette**
[Named colors with emotional rationale — not just hex codes but personality]
- Primary: [description + emotional role]
- Secondary: [description + emotional role]
- Accent: [description + emotional role]
- Neutrals: [description + role in the system]
**Typography**
- Display/Headlines: [typeface character + why it fits]
- Body: [typeface character + readability qualities]
- Scale: [ratio and hierarchy approach]
**Composition & Layout**
[Grid philosophy, whitespace approach, density, flow]
**Imagery Direction**
[Photography/illustration style, lighting, subject matter, color treatment]
**Iconography & Supporting Elements**
[Icon style, patterns, textures, decorative elements]
**Motion & Interaction**
[How the brand moves — speed, personality, signature moments]
### Application Vision
[How this concept comes to life across website, logo, collateral, social, environmental]
### Strategic Rationale
[Why every choice serves the brief — business logic behind the creative]
Trend Awareness
Current design landscape context informs concepts without dictating them. See Visual Design System — Current Landscape for:
- Dominant patterns (barely-there UI, soft maximalism, human touch aesthetics, content-first layouts)
- Counter-movements (anti-design, grounded color, humanized design against automation)
- Timeless principles that anchor every concept regardless of era
Reference Documents
| Reference | When to Consult |
|---|---|
| Discovery Framework | During Phase 1 — extracting the creative brief and analyzing the competitive landscape |
| Visual Design System | During Phase 3 — defining color, typography, composition, spacing, and motion systems |
| Industry Approaches | During Phase 4 — tailoring concepts to industry-specific visual conventions and opportunities |
| Design Psychology | During Phase 5 — applying perceptual and cognitive principles to strengthen concepts |
| Concept Articulation | During Phase 6 — describing concepts with precise, evocative language and structured rationale |
| Design Inspirations Catalog | During Phase 3 — 76 real-world design systems fetchable as DESIGN.md specs for creative inspiration |
Agency Frameworks
World-class creative thinking draws on established methodologies:
| Framework | Core Principle | Application |
|---|---|---|
| Pentagram | Brand as garden — dynamic, adaptable, constantly reconfigurable systems | Identity concepts that flex across touchpoints |
| IDEO | Human-centered design — empathy, iteration, embracing ambiguity | Concepts grounded in audience understanding |
| Sagmeister & Walsh | Emotional design through serious play and lateral thinking | Unexpected creative connections, unconventional starting points |
| Collins | Authenticity + cultural congruency — brand behaviors, not just messages | Concepts that are honest to core values and relevant to the times |
| Wolff Olins | Brand, culture, and experience as three interconnected levers | Transformative concepts that supercharge business strategy |
| R/GA | Brands as operating systems — responsive, iterative, connected | Concepts designed as living ecosystems, not static identities |
More from thatjuan/agent-skills
team-executor
Multi-agent orchestration that transforms braindumps into executed results. Assembles expert planning teams (3-7 agents), produces comprehensive execution plans, then deploys fresh execution teams for autonomous delivery. Use when the user describes goals, features, projects, or pastes scattered ideas needing organization and execution. Triggers on "build this", "execute this", "make this happen", "plan and build", or any substantial task description.
11logo-studio
Professional logo design studio that produces 9+ SVG logo concepts through brand discovery, archetype mapping, and iterative refinement, then generates a complete app asset package (iOS, Android, macOS, Windows, favicons, PWA, social) from the final selection and optionally produces a multi-page brand guidelines document (logo, color, typography, layout, UI components, motion, voice, asset management). Use when the user asks for a logo, brand mark, icon, wordmark, app icon, visual identity, or brand guidelines for a business, product, or project.
10temporal
Expert Temporal.io workflow orchestration for Python and TypeScript. Use when code imports temporalio/sdk-python or @temporalio/* packages, user asks about durable execution, workflow orchestration, Temporal activities/workers/signals/queries, AI agent orchestration with Temporal, or building reliable distributed systems with Temporal.
6heroui
HeroUI v3 component library expertise for React (web) and React Native (mobile). Use when code imports @heroui/react, @heroui/styles, or heroui-native, user asks to build UI with HeroUI, or references HeroUI components, theming, or migration from NextUI/HeroUI v2.
4drizzle-orm
Type-safe SQL ORM for TypeScript with zero runtime overhead. Use when code imports drizzle-orm, drizzle-kit, or drizzle-orm/pg-core, user asks about Drizzle schema design, queries, relations, migrations, or database management with Drizzle ORM. Covers PostgreSQL focus with pgTable, pgEnum, pgSchema, pgView, and drizzle-kit CLI.
4create-readme
Create a README.md file for the project
3