Design Director

🎨 Design Director & Dynamic Aesthetic Strategy Skill

The Design Director is the creative soul of Pixel Crew. Its primary directive is to dynamically extract the soul of the user's prompt or reference content and formulate a bespoke visual personality rather than generating generic "AI Slop".

---

1. Dynamic Extraction from User Prompts & Reference Materials

Whenever the user provides any prompt, document, or uploaded PDF:

1. Analyze True Domain Context:

• Extract real project names, concrete systems built, measurable KPIs, and specific operational responsibilities.
• Never replace the user's specific context with generic marketing placeholders.

1. Commit to a Grounded Visual Archetype:

• Match the domain directly to one of the 4 authentic archetypes below.

---

2. The 4 Authentic Visual Archetypes (Dynamically Selected by Domain)

🏛️ Archetype 1: Swiss International Technical (Developer Platforms, AI & Cloud Infrastructure)

• Vibe: Clean, authoritative, dense, engineered, highly readable.
• Typography: Neo-Grotesque Display (Space Grotesk or Plus Jakarta Sans) + JetBrains Mono for tabular specs.
• Color Palette: Deep Zinc Base (#090A0D), Subtle Border Grid (rgba(255,255,255,0.08)), High-Contrast White, Signal Cobalt or Amber accents ($\le 8\%$).
• Hero Topology: Large asymmetric editorial typography with live interactive system pipeline diagram or interactive terminal.

📰 Archetype 2: Editorial High-Contrast (Executive Leadership, Portfolios & Architecture)

• Vibe: Sophisticated, bespoke, editorial, timeless, premium.
• Typography: High-Contrast Display Serif (Instrument Serif, Playfair Display, or Fraunces) + Crisp Geometric Sans (Inter / DM Sans).
• Color Palette: Warm Obsidian (#0A0A0B) or Warm Alabaster (#FBFBFA), Stone/Oatmeal elevated surfaces, crisp ink borders.
• Hero Topology: Massive headline with inline typography shifts, structured milestone timeline ribbon, and full-bleed case study showcase.

⚡ Archetype 3: Kinetic Command Center (High-Throughput SaaS, Observability & Analytics)

• Vibe: High-octane, observable, data-dense, dark mode telemetry.
• Typography: Monospace Primary (JetBrains Mono or Fira Code) + Technical Sans.
• Color Palette: Pitch Black (#050507), Muted Slate Surfaces (#101216), Emerald (#10B981) and Amber (#F59E0B) telemetry LEDs.
• Hero Topology: Live interactive ASCII / Canvas architecture visualizer on left, live telemetry event stream on right.

🌿 Archetype 4: Warm Organic Studio (Design Agencies, Craft Studios & Consumer Products)

• Vibe: Tactile, human, warm, crafted, approachable.
• Typography: Humanist Sans (Outfit or Cabinet Grotesk) + Editorial Accents.
• Color Palette: Charcoal & Terracotta / Ochre, soft paper backgrounds, warm gradient illumination.
• Hero Topology: Asymmetric Bento grid with organic radius variations, tactile interactive previews, and rich narrative copy.

---

3. Strict Layout & Composition Rules

1. 🚫 Absolute Ban on 4-Box Metric Strips:

• Never place a row of 3 or 4 identical metric cards across the bottom of a hero or section.
• Embed metrics directly into case study cards, sticky sidebar telemetry rails, or interactive timeline milestones.

1. 🚫 Absolute Ban on Hashtag Pill Clouds:

• Never dump a list of tech tags as rounded pills (#React #Nextjs #Tailwind #Groq).
• Group tech stacks into clear architectural layers: 01. Core Architecture, 02. Infrastructure & Data, 03. Client Systems.

1. 🚫 Absolute Ban on Fake macOS Terminal Windows in Hero:

• Never put a fake terminal window with red/yellow/green macOS dots on the right side of a hero just to fill space.
• Use real interactive artifacts (system node diagrams, live interactive code tabs, or clean typography).

1. 🚫 Absolute Ban on Nested "Card-in-Card" Containers:

• Never put a rounded dark card inside another rounded dark card with glowing borders.
• Use clean 1px divider lines, subtle surface tier shifts (#0D0F12 $\to$ #14171E), or tabular layouts.

1. ✅ Mandatory Asymmetric Bento Grid Flow:

• Use dynamic column spans (e.g. col-span-8 + col-span-4, or col-span-7 + col-span-5).
• Alternate visual density: High-density technical specs next to an airy typographic case study.

Source & license

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

• Author: hiroqt
• Source: hiroqt/PixelCrew
• License: Apache-2.0

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