Creative direction for digital products: defining visual language, writing illustration style briefs, icon style guidelines, photography/image direction, motion language definition, and maintaining creative consistency across touchpoints. Use when defining what a product should look and feel like.
From clarcnpx claudepluginhub marvinrichter/clarc --plugin clarcThis skill uses the workspace's default tool permissions.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
A visual language is the set of choices that makes all visual elements feel like they belong to the same product. Define it on four dimensions:
What kind of shapes define the product?
| Direction | Character | Examples |
|---|---|---|
| Geometric | Precise, technical, modern | Circles, squares, exact angles |
| Organic | Warm, human, approachable | Rounded, irregular, flowing curves |
| Abstract | Expressive, creative, unique | Custom shapes, non-literal |
| Flat | Clean, minimal, digital-native | No depth, no shadow |
How lines are used (in icons, borders, dividers):
| Direction | When to use |
|---|---|
| Clean/structural | Technical products, data tools |
| Expressive/hand-drawn | Creative tools, lifestyle products |
| Minimal/absent | Premium, luxury, content-first |
Is the visual world flat, or does it have depth and material?
| Direction | Effect |
|---|---|
| Flat | Modern, digital, minimal (Material Design, Fluent at 1× depth) |
| Subtle depth | Card shadows, gentle gradients |
| Layered/glass | iOS 26 Liquid Glass, translucency |
| Material/textured | Paper grain, fabric, brushed metal (rare in UI, common in marketing) |
Does the product feel two-dimensional or three-dimensional?
| Direction | Example |
|---|---|
| Flat | Stripe, Linear |
| Soft 3D | Notion's homepage, Lottie animations |
| Skeuomorphic | iOS pre-2013; rare today except for specific effects |
An illustration brief ensures a freelancer or agency produces work that fits without revision cycles.
## Illustration Style Brief — [Product Name]
### Style direction
[e.g., "Flat vector with geometric forms, minimal detail, 3-4 color palette maximum"]
### Mood
[e.g., "Friendly and optimistic — like a knowledgeable colleague, not a corporate report"]
### Style references (3-5 links or descriptions)
1. [Reference] — because [one specific reason it relates]
2. ...
### Color palette
- Primary: [Hex or HSL]
- Secondary: [Hex or HSL]
- Neutrals: [range]
- Maximum colors per illustration: [N]
### Character style (if characters appear)
- Body type: [abstract / semi-realistic / geometric]
- Diversity: [explicit brief on skin tones, body types, age range]
- Expression: [neutral and calm / expressive / realistic]
- No characters — icon/object-only illustrations
### Stroke
- Stroke: [none / 1px / 2px]
- Stroke color: [same as fill / dark outline / none]
- Corner radius on shapes: [sharp / slightly rounded / very rounded]
### What to avoid
- [Specific style, element, or cliché to exclude]
- [e.g., "No stock illustration hand-shake imagery", "No purple gradients"]
### File deliverables
- SVG (scalable, editable)
- PNG at 2× and 3× for raster contexts
- Figma source file with components
Consistent icons are one of the highest-leverage consistency investments.
| Decision | Options | Choose based on |
|---|---|---|
| Stroke vs. fill | Stroke only / Fill only / Stroke + fill (mixed) | Stroke = light, precise; Fill = bold, clear at small sizes |
| Stroke width | 1px / 1.5px / 2px (at 24px grid) | Heavier for bold brand, lighter for minimal |
| Corner radius | 0px (sharp) / 1-2px (slightly rounded) / full (pill) | Matches brand form direction |
| Grid size | 24×24px (standard) / 20×20px (compact) / 16×16px (micro) | Match primary usage context |
| Keyline shapes | Circle / Square / Landscape / Portrait / Pentagon | Used to harmonize optical size across icons |
All icons must sit on the grid — optical alignment, not metric:
24×24px grid example:
- Live area: 20×20px (2px margin on each side)
- Key shapes:
- Circle: 20px diameter
- Square: 18×18px
- Landscape: 20×16px
- Portrait: 16×20px
## Icon Style — [Product Name]
- Grid: 24×24px
- Stroke: 1.5px, round cap, round join
- Corner radius: 2px on rectangles
- Keyline: circle-based
- Style: stroke only (no fill except for selected/active state)
- Selected state: filled version of the same icon shape
- Prohibited: gradient fills, drop shadows, mixed stroke widths in one icon
## Photography Direction — [Product Name]
### Mood
[e.g., "Candid and purposeful — professionals mid-task, not posed. Natural lighting."]
### Color treatment
- [ ] Natural / unfiltered
- [ ] Warm toned (increased temperature, amber shadows)
- [ ] Cool toned (blue-shifted)
- [ ] High contrast (increased clarity, deep blacks)
- [ ] Black and white
- [ ] Duotone with brand colors
### Composition rules
- [e.g., "Subject in the left third; leave space for text on the right"]
- [e.g., "Always show context — never isolated on white background"]
- [e.g., "Close-up product shots only; no wide environmental shots"]
### People (if applicable)
- Diversity: [explicit brief — skin tones, age range, gender, body type, ability]
- Looking at camera: [yes / no / occasionally]
- Expression: [neutral focus / natural smile / candid]
- What they are doing: [mid-task / using product / collaborating]
- What they are NOT doing: [posing / looking at camera / stock smile]
### What to avoid
- [e.g., "No office handshake photos"]
- [e.g., "No white background cutouts"]
- [e.g., "No images that could be read as endorsements by real people without consent"]
Motion in UI communicates relationships and state — not decoration.
| Easing | Use for |
|---|---|
ease-out | Elements entering the screen (decelerates to rest) |
ease-in | Elements leaving the screen (accelerates away) |
ease-in-out | Elements moving across the screen |
spring (CSS: linear() or JS spring) | Delight moments, expanding panels, drag release |
linear | Progress bars, loaders |
/* Standard transitions */
.enter { animation: slideIn 250ms cubic-bezier(0, 0, 0.2, 1); } /* ease-out */
.exit { animation: slideOut 200ms cubic-bezier(0.4, 0, 1, 1); } /* ease-in */
.move { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* ease-in-out */
When multiple elements animate together, stagger them to create hierarchy:
/* Each child starts 50ms after the previous */
.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
prefers-reduced-motionAlways respect:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Before launch or a major rebrand, audit all touchpoints:
| Touchpoint | Visual | Voice | Color | Typography |
|---|---|---|---|---|
| Web (marketing) | — | — | — | — |
| Web app (product) | — | — | — | — |
| Email (transactional) | — | — | — | — |
| Email (marketing) | — | — | — | — |
| Social (organic) | — | — | — | — |
| Social (paid ads) | — | — | — | — |
| Docs / help center | — | — | — | — |
| Mobile app | — | — | — | — |
Rate each ✓ (consistent) / ~ (mostly consistent) / ✗ (off-brand). Fix ✗ items before launch.
prefers-reduced-motion respected in all animations