# Design Director

> Lead Creative Direction and Aesthetic Strategy skill for Pixel Crew. Defines the authentic visual personality, architectural concept, typography strategy, asymmetric layout rules, and strict anti-AI constraints before any code is generated. Answers "What should this website actually feel like?

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

## Install

```sh
agentstack add skill-hiroqt-pixelcrew-design-director
```

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

## About

# 🎨 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.
2. **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.

2. **🚫 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*.

3. **🚫 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).

4. **🚫 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.

5. **✅ 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](https://github.com/hiroqt)
- **Source:** [hiroqt/PixelCrew](https://github.com/hiroqt/PixelCrew)
- **License:** Apache-2.0

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-hiroqt-pixelcrew-design-director
- Seller: https://agentstack.voostack.com/s/hiroqt
- 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%.