What Is the Design Direction Advisor in Web-Design-Engineer?

The Design Direction Advisor is a conversational fallback module in the Web-Design-Engineer skill that transforms vague design requests into concrete visual directions by presenting three curated design schools and loading corresponding style recipes.

The Design Direction Advisor serves as the intelligent fallback layer within the web-design-engineer skill in the ConardLi/garden-skills repository. When users provide ambiguous prompts like "make something nice" without concrete specifications, this module activates to provide structured design consultation. It prevents choice paralysis by narrowing infinite possibilities into three differentiated aesthetic directions backed by executable style recipes.

Activating the Design Direction Advisor Mode

The advisor triggers through the fallback mechanism defined in skills/web-design-engineer/SKILL.md (lines 59-70). When the system detects a vague request lacking specific design constraints—such as missing brand guidelines, undefined visual hierarchies, or ambiguous stylistic goals—it automatically switches to Design Direction Advisor mode rather than attempting arbitrary generation.

This activation logic appears in the skill's fallback section (lines 190-196), where the system evaluates isVague(request) conditions. Upon activation, the advisor interrupts the standard generation workflow and initiates a consultative dialogue to establish concrete visual parameters before proceeding.

The Six Schools Framework

At the core of the advisor lies a taxonomy of six design schools, each representing a distinct philosophical approach anchored to real-world studios and brands. The advisor selects three schools from different rows to ensure aesthetic diversity.

The complete matrix includes:

• Information Architecture: Rational, data-driven hierarchy ideal for B2B dashboards and institutional products (anchored to Pentagram style)
• Editorial / Minimalist: Whitespace-heavy, refined typography suited for premium lifestyle brands (Kenya Hara style)
• Motion / Experimental: Bold, generative, kinetic approaches for tech storytelling and award showcases
• Brutalist / Raw: Anti-design, confrontational aesthetics for counter-culture and artist platforms
• Warm Humanist: Approachable, hand-touched textures perfect for education and community health products
• Modern Tool / Builder SaaS: Quiet luxury visual language for developer tools and AI platforms (Linear style)

Anchoring to Concrete References

Each school connects to named anchors—specific studios, brands, or designers that exemplify the aesthetic. These anchors provide immediate visual context and set expectations for the subsequent recipe generation. For instance, selecting "Information Architecture" references Pentagram's systematic approach, while "Modern Tool / Builder SaaS" draws from Linear's interface philosophy.

The Four-Step Workflow

According to skills/web-design-engineer/references/design-directions.md (lines 9-16), the advisor executes a structured consultation process:

1. Intake: Read the user request alongside four positioning questions covering narrative role, viewing distance, visual temperature, and capacity constraints.
2. Curation: Select three schools from different rows of the six-school matrix to ensure diverse aesthetic options.
3. Presentation: Recommend each school with a named anchor, a concise "why it fits you" rationale, 3-4 signature visual cues, and optional famous reference works.
4. Handoff: Upon user selection, load 2-3 concrete recipe files from the style-recipes folder (lines 36-44) containing palettes, typography, spacing rules, and AI prompt seeds.

Implementation and Code Structure

The advisor's logic manifests in TypeScript-style pseudocode within the skill definition. When the fallback condition triggers, the system switches modes and presents curated options:

// Switch to Design Direction Advisor when the request is vague
if (isVague(request)) {
  await switchMode('Design Direction Advisor');
}

// Present three schools (example for a B2B dashboard)
await sendMessage(`
  1️⃣ Information Architecture – Pentagram style…  
  2️⃣ Editorial / Minimalist – Kenya Hara style…  
  3️⃣ Modern Tool / Builder SaaS – Linear style…
  Which direction feels right for you?`);

Following user selection, the system retrieves concrete implementation files from the style-recipes directory:

// After user chooses "Information Architecture":
if (userChoice === 'Information Architecture') {
  // Load concrete recipes for the chosen school
  const recipes = await Promise.all([
    readFile('skills/web-design-engineer/style-recipes/pentagram.md'),
    readFile('skills/web-design-engineer/style-recipes/bloomberg-terminal.md'),
    readFile('skills/web-design-engineer/style-recipes/tufte-dataink.md')
  ]);
  // Merge recipe data into the brand spec and continue workflow
  await writeBrandSpec(recipes);
}

Style Recipes and Concrete Outputs

The style-recipes folder contains markdown files that transform abstract schools into actionable design systems. Files like pentagram.md, apple-hig.md, and bloomberg-terminal.md (referenced in lines 65-73 of design-directions.md) provide:

• Color palettes with hex values and accessibility ratings
• Typography scales with specific font families and weights
• Spacing grids and component density rules
• AI prompt seeds for generating consistent imagery

These recipes bridge the gap between philosophical direction and executable CSS, allowing the workflow to proceed immediately into implementation after school selection.

Summary

• The Design Direction Advisor activates automatically when web-design-engineer detects vague or underspecified design requests in SKILL.md.
• It organizes design philosophies into six distinct schools: Information Architecture, Editorial/Minimalist, Motion/Experimental, Brutalist/Raw, Warm Humanist, and Modern Tool/Builder SaaS.
• The consultation follows a four-step workflow: intake analysis, three-school curation, anchored presentation, and recipe handoff.
• Concrete style recipes in the style-recipes/ folder provide immediately usable design tokens and AI prompts.
• This architecture prevents arbitrary design generation by enforcing structured decision-making before visual execution.

Frequently Asked Questions

What triggers the Design Direction Advisor in web-design-engineer?

The advisor triggers through the fallback logic in skills/web-design-engineer/SKILL.md (lines 59-70) when the system classifies a request as vague—typically when users provide prompts like "make it nice" without specifying brand guidelines, visual hierarchies, or stylistic constraints. The isVague(request) check determines when to switch from standard generation to consultative mode.

How does the Design Direction Advisor prevent choice paralysis?

The advisor enforces cognitive limits by presenting exactly three curated schools from the six-school matrix, ensuring each option represents a different aesthetic row. By anchoring each school to recognizable studios like Pentagram or Linear and providing specific visual cues, the advisor transforms abstract preferences into concrete reference points, eliminating the overwhelming blank-canvas problem.

What files does the Design Direction Advisor access after school selection?

Upon user confirmation, the advisor loads 2-3 concrete recipe files from the skills/web-design-engineer/style-recipes/ directory. These markdown files—such as pentagram.md, bloomberg-terminal.md, or apple-hig.md—contain executable design specifications including color palettes, typography scales, spacing systems, and AI image generation seeds specific to the selected aesthetic school.

Can the Design Direction Advisor handle remix requests?

Yes. The advisor workflow explicitly includes a remix option (step 4 in design-directions.md) where users can request alternative schools or hybrid approaches before finalizing. If the initial three suggestions don't resonate, the advisor can regenerate options or combine visual cues from multiple schools, maintaining the structured consultation until the user commits to a direction and the system loads the corresponding recipe files.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}