# Creative Direction

> Translate a brand's strategy — its emotional target and muses — into the concrete visual system: color, typography, composition, pattern & texture, iconography, illustration, and photography, as one coherent language. Use after brand-strategy and before logo or application work, or when the user mentions 'creative direction,' 'visual identity,' 'visual system,' 'design language,' 'stylescape,' 'p…

- **Type:** Skill
- **Install:** `agentstack add skill-zstvns-design-skills-creative-direction`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [zstvns](https://agentstack.voostack.com/s/zstvns)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [zstvns](https://github.com/zstvns)
- **Source:** https://github.com/zstvns/design-skills/tree/main/skills/creative-direction

## Install

```sh
agentstack add skill-zstvns-design-skills-creative-direction
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Creative Direction

You establish a brand's **visual system** — every asset class, one coherent language, all of it traceable to the feeling the brand is built to produce. This is the stage where strategy becomes visible: the emotional target and muses from `brand-strategy` get translated into actual color, type, composition, pattern, icons, illustration, and photography.

Read `design-principles` first. This skill is where its rules get *applied*: contrast-not-competition, restraint, five stops, emotion before execution, and "state why, or the default stands."

> **Position in the sequence:** after `brand` (the audit/context) and `brand-strategy` (the feeling + muses), before `logo-design` and the application skills. The audit *diagnoses*; this skill *builds the cure*.

## Hard Prerequisite: the Emotional Target and Muses

Open `.agents/brand.md`. You need:
- The **Emotional Target** (the feelings the brand must produce)
- The **Muses**, each with its stealable visual cue
- The **confirmed competitor set** (what "distinct" is measured against)
- The **REO depth and the client's appetite**

**If the Emotional Target or muses are missing, stop and route to `brand-strategy`.** Without them you'd be choosing colors and typefaces from taste — exactly the "different by accident" and "category default" failure modes the audit exists to catch. Every choice you make here must trace to a muse or the emotional target; if you can't say *why* a choice serves the feeling, it's a default wearing a decision's clothes.

## Scope by Depth

- **Revolution** — build the system from scratch as **three genuinely distinct concepts**, presented as stylescapes (see [references/stylescapes.md](references/stylescapes.md)). Each concept is a different plausible answer to the emotional target — different muses, color story, type pairing, and attitude — not three shades of one idea. Stylescapes are *real intended assets*, not mood boards: expressive and free, not yet constrained by buildability.
- **Evolution** — one direction, anchored on the **fixed core** (the equity being kept — often the logo, name, or a color). Start from the primary touchpoint (usually the hero/website) and change only the deltas the strategy named: carry the kept assets forward, introduce the new type, motif, or palette around them.
- **Optimization** — mostly out of scope. The direction already exists; the work is execution (`web-design`, `collateral-design`). At most a light pass to *document* the existing system so it can be enforced.

## The Core Move: Abstract the Muses

This is the engine of a distinct direction, and the step most likely to be skipped. **Take the muse's *literal* forms — recorded at physical fidelity in `brand-strategy` — and abstract them into modern, ownable brand elements.** You are not decorating with the muse; you are distilling its geometry, materials, and ideas into a system.

- Worked examples (real): the concentric rings around the Kaaba → a dotted-line motif meaning *unity of people*; the building's brick geometry → an ownable grid; Islamic gardens → an "ants in the garden" pattern. The mission-control muse → the amber-on-black telemetry readout and the machined dimensional knob as the signature element.
- **Pull two things from each muse: a color story and an abstracted idea.** Then combine the abstractions with modern UI. Most software looks the same — the muses are how you *skin* an undifferentiated category with something only this brand could own.
- **Then render the *product's own work* through that abstraction — don't stop at decoration.** The single biggest gap is a board that ornaments the muse but never shows what the product *does*. Show the product's actual jobs — a post being drafted, a blog written, SEO run, a chart climbing up-and-to-the-right — expressed *in* the muse's language: musical notes that bloom into a published social post; a console readout that *is* the campaign launching. Muse ornaments floating over generic UI read as boring and unowned; the **muse × product-function merge** is what makes a direction feel like *this* brand doing *this* job.
- **Don't let ease of abstraction crown the winner, and treat on-the-nose as a failure mode.** The muse that maps most literally to UI (a mission-control console → dials, telemetry) resolves fastest and looks the most finished soonest — but the literal reading is often the *weakest, most clichéd* idea, and cliché is a real liability in an AI category where everyone grabs the obvious. The muse that's *harder* to abstract (orchestration, empire) is frequently the more powerful, more ownable concept. Push harder on the difficult abstraction; don't retreat to the easy muse or fake the hard one with slop. Judge concepts on conceptual strength, not on which rendered first.
- **Typography obeys the same abstraction law as everything else — and it has *two* failure poles.** A *literal* muse-face (an all-caps Roman inscriptional / Cinzel for an imperial muse) isn't a taste error, it's an **abstraction failure: you wore the muse instead of distilling it.** The opposite trap is just as fatal: reaching for a **try-hard trendy face** (Space Grotesk, Fraunces, and their cohort — **banned**; see `design-principles` → ai-slop.md) to *look* designed. Both are costume. The distinction must come from the **system** — motif, color, composition, treatment — not from the font. When in doubt, a **neutral face used deliberately** (Inter) beats a characterful one grabbed as a shortcut; let the system carry the muse. Muse-derived type is genuinely rare.

## The System to Establish

Work through each element with the audit's bar in mind — the nine-category audit (see `brand`) is your acceptance test, and **every "Moving forward" item the audit raised (all nine categories except the logo, which `logo-design` handles after) must be answered by the system** — don't leave an audit gap unaddressed. Full per-element standards: [references/element-standards.md](references/element-standards.md). The production-craft floor — art-direction commitment, design tokens, typography/texture hard rules, the abomination checklist — lives in [references/frontend-boilerplate.md](references/frontend-boilerplate.md); the board's collage/bento composition in [references/stylescapes.md](references/stylescapes.md).

1. **Color** — assign by *role*: background, text (primary/secondary), **action/CTA** (protected — minimized everywhere else), support. Five stops per color, not ten. **Verify ownership against the confirmed competitor set** — a color isn't owned if a rival occupies it; deliberately escape the category's default lane.
2. **Typography** — faces by role (display, heading, body), chosen for **contrast, not competition**; if a mono or third register is needed, prefer a superfamily's own cut over a bolted-on face. Set weight/style restrictions. **Licensing checkpoint:** foundry, budget, and character/language support for the target markets — confirm *before* the direction is approved, not after.
3. **Composition & layout** — the grid, density, spacing logic, section rhythm and variety (no monotonous stacks), how the eye is directed.
4. **Pattern & texture** — an **ownable motif**, most naturally derived from the mark's geometry, deployable off-site without the logo or color present. Check it doesn't collide with a competitor's motif.
5. **Iconography** — one source of truth; stroke/fill/grid rules; plan the tiers (utility now, storytelling/illustration as the brand matures).
6. **Illustration & product abstraction** — branded abstractions over raw screenshots; a defined style (or an explicit "no illustration" decision).
7. **Photography** — subjects, treatment/grade, art direction; or the deliberate absence of it.
8. **Motion** *(directional note, not full spec)* — what the brand's motion *feels* like; intent over ornament (hover > load > scroll > loop).

## Producing the Board — Source and Generate the Real Assets

A stylescape needs treated imagery and genuine texture; flat CSS shapes read as austere. The operator is often a **founder, not a designer**, so the craft leverage is on **you**. But *don't assume their toolset — ask first, then fork the workflow.*

- **Ask what image-generation tools they have, then fork.** Before writing a single prompt, ask which the operator can access. Assume at least **ChatGPT (GPT Image)** and **Google Gemini / Imagen**; the fuller set — **Higgsfield, Flora, Weave, Magnific, Midjourney, Adobe Firefly, Figma, Paper** — isn't in everyone's purview, so *ask rather than assume.* Then take the most capable path available:
  - **(a) Drive it directly** — if a tool is connected to *you* as an MCP (Adobe Firefly, Figma, and Paper are common), generate and place the bespoke, muse-anchored imagery yourself, in-session. Strongest and most ownable; zero founder steps.
  - **(b) Hand off prompt packs** — for a generator only *they* have (Midjourney, Flora, Higgsfield…), write precise muse-anchored prompts (subject, grade, palette hexes, texture, lighting, composition, aspect ratio, "no text") for them to run and bring back. Iterate the prompt when a result misses.
  - **(c) Free stock, treated** — if they have none, real free stock (Unsplash/Pexels) run through the concept's grade is a great floor. Populate it *yourself* so tone is present without a founder step.
- **You compose the board, not the founder.** They have no Figma skill and no design eye — so *you* assemble the coalesced board (self-contained HTML/CSS/SVG) from the generated + sourced assets. The operator supplies raw images (or you generate them); you do the art direction, layout, texture, and typography.
- **Lean on CSS/SVG for the texture it renders well** — grain, noise, scanlines, patterns, grids, machined UI, telemetry, glows, gradients — which for many concepts (anything mechanical, retro, systems-y) is most of the "life," no generation needed. Reserve generation / free stock for photographic or illustrative muses. (Strict-CSP HTML can't load a webfont URL — embed the face as a data URI, or accept a fallback and *name* the intended typeface so the type intent reads.)
- **Unify every source through one grade.** Whatever the origin — MCP-generated, founder-run, or free stock — run it through the concept's **treatment recipe** (a duotone + grain + scanline for a console; a warm-paper wash for a programme; a porphyry duotone for an imperial muse). Show it as a before→after on the board. The grade is what makes even free stock read as *this brand's* — and what keeps mixed sources looking like one world.
- **The muses are the brief.** Everything generated or sourced is treated *to the muse cues at physical fidelity* — never generic stock dropped in raw.
- **If imagery can't be produced yet, say so** and label the board a *composition / art-direction proof* with the prompt packs attached (for whichever generator the fork identified), so the founder can fill it in. Never quietly ship a flat board and call it finished.

## Validate Before You Present

Run your own work through the same gauntlet the audit runs — **adversarially, on the rendered board, not the concept in your head** (see `design-principles` → Judge Your Own Work on the Competitor's Bar). The concept can be distinctive while the pixels are generic; a self-audit that grades intent misses exactly that.

- **Score it against the foundational categories** vs. the confirmed competitor set, at the harshness you'd use on a rival — would this system earn 4–5 on Creative Direction, Color, Pattern, and (with `logo-design`) Logo? Cover the logo: is it still recognizably this brand?
- **Run the AI-slop check** (`design-principles` → ai-slop.md) on your own output and **list what it finds** — the tropes actually on the board (a mono "telemetry/terminal" readout, a dot-grid, a left rail, a centered no-variety column, `rounded-lg` everywhere). "No slop here" is a reflex, not a result; produce the list, or an earned, specific "none, because —." "Clean" counts as *unassessed*, not passed.
- **Confirm the board is a rendered surface, not a CSS-block comp** — treated imagery or a committed illustration style, a full named type specimen, an ownable motif (not a dot-grid default), applied mockups, real depth and bleed. Missing anatomy = under-built (see [references/stylescapes.md](references/stylescapes.md)).
- **Carry-through gate:** the *applied* fragment (the hero/mockup) must pass cover-the-logo too, not just the abstract board (see `design-principles` → Distinctiveness Must Survive Application). A distinctive board with a generic applied screen is a fail — the distinctiveness has to survive into application, which is where it usually leaks out.
- **Trace every element to a muse or the emotional target.** Anything you can't trace, cut or justify.
- **Copy check:** does the system serve the message and give the words their proper emphasis? Design serves the message — the system is the stage, not the show.

## Present, Decide, Record

- **Give it a walkthrough first, then present.** Talk each concept through — the muses, the abstraction, why it answers the feeling — before handing it over. A stylescape without its narrative is just arrangement.
- **Name the challenges, honestly.** For each direction, say what would be *hard* to implement across the board, and **how different it actually is from the competitors** — the things the client needs to weigh to decide. Don't only sell; surface the tradeoffs.
- **Close with a comparison — per direction or a synopsis at the end.** For each concept, answer the questions that actually drive the pick: the **challenges**, the **pros**, **is this the most differentiated?**, and **is this the most on-brand with the emotion you're trying to elicit?** Fold it into each direction's walkthrough or give a synopsis that weighs all three against each other at the close.
- **Prove it has legs applied.** Clients want to see it real, not abstract — the fastest proof is a **website hero + one or two ads** carrying the full system. A concept that looks great on the board but thin when applied hasn't earned the pick (see the carry-through gate above).
- **Document the styles and their sources.** Photo / graphic / icon / typography styles, and where any sourced assets came from (stock, Envato, Freepik, etc.) — notes now save the application skills from guessing later.
- **Revolution:** present the three stylescapes; the client picks one. **Push for one idea, not a Frankenstein.** A little modularity is fine, but merging concepts usually averages three ideas into none. When a client asks to graft (e.g. this concept's type on that one's board), *knowing the emotional target lets you reject the merge that betrays it* — a merge is legitimate only if it still produces the feeling and has its own single story (see [references/stylescapes.md](references/stylescapes.md) → synthesis vs. averaging).
- **Evolution:** present the direction against the *current* state so the deltas are unmissable.
- Get **explicit approval** before `logo-design` and the application skills build on it — everything downstream compounds on this decision. (Run creative direction *before* any naming project.)
- **Write the approved system into `.agents/brand.md`** (the Visual system section, plus updates to Fixed core / Flexible range), recording the *why* behind each choice — the rationale is what survives handoffs and lets a later critique judge flexes.

## The Deliverable

Two layers, one source of truth — mirroring `brand-strategy`:

1. **`.agents/design.md`** — the full creative-direction record, generated at the end of this exercise. It holds: the three concepts and the one chosen; each concept's **muses → abstractions**; the documented **photo / graphic / icon / typography styles with their asset sources** (stock, Envato, Freepik…); the **color system** (roles + hex + ramps) and **design tokens**; the ownable **motif/texture** and the **signature element**; the **appl

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [zstvns](https://github.com/zstvns)
- **Source:** [zstvns/design-skills](https://github.com/zstvns/design-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-zstvns-design-skills-creative-direction
- Seller: https://agentstack.voostack.com/s/zstvns
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.