# Design Direction Setter

> Establishes the visual tone, typography, color, and feel of your product before a line of UI is written. Use when you're about to build your UI and need a clear aesthetic direction, or when your product looks generic and you can't articulate why. Produces a design-brief.md with specific font, color, and visual direction choices your agent can implement immediately.

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

## Install

```sh
agentstack add skill-gvkhosla-founder-skills-design-direction-setter
```

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

## About

# Design Direction Setter

## Quick Start

## Human-First Response

Default: answer in chat first with **Verdict**, **Do this now**, and **Details saved**.
Keep chat under 150 words unless asked; do not paste the full artifact.
Write/update the requested `.md` file as the durable record for agents.

Say: **"Set my design direction"** or **"What should my product look and feel like?"**

You'll answer 5 questions. Total time: 10 minutes.
Output: `design-brief.md` — specific typography, color palette, visual tone, and 3 reference products your agent can use to implement the UI.

## What You'll Get

A `design-brief.md` with: the emotional tone your product should communicate, specific font family names (heading + body pair), a 5-color palette with hex codes, 3 real-world design references your agent can draw from, and 3 visual patterns to avoid.

> **Example output excerpt:**
> **Tone:** Calm authority. Like a doctor who's also a friend — competent but approachable. Not clinical, not playful.
> **Heading font:** DM Serif Display — warmth and confidence without formality
> **Body font:** Inter — neutral, highly readable, won't compete with content
> **Palette:** #1B4332 (deep forest, primary), #D8F3DC (soft mint, background), #B7E4C7 (accent), #1C1C1E (text), #FFFFFF (surface)
> **References:** (1) Levels Health — data-forward but human, (2) Notion — structured calm, (3) Linear — precision without coldness
> **Avoid:** Purple gradients, generic sans-serif pairings, dashboard-heavy layouts that feel like enterprise software

## The Expert Judgment Embedded

This skill applies **Brand Personality Theory** (Jennifer Aaker's five brand dimensions) combined with the principle of **emotional fit** — the idea that the visual design of a product should make users feel the way they want to feel when the problem is solved, not just describe what the product does.

Most non-technical founders either pick fonts and colors at random, or choose the most "professional" options (which always means Inter + blue). Both produce forgettable products. Great design starts with a clear emotional intention and works backward to typography and color.

The key decision: pick one of five tonal directions and commit. Trying to be all five produces products that feel like nothing.

## The Process

### Step 1: The Emotional Destination

The agent asks: "When a user finishes a key task in your product, how do you want them to feel? Choose one primary emotion."

The five most useful options for product design:
- **Calm & in control** → muted palettes, generous whitespace, serif or neutral sans-serif
- **Energized & motivated** → bold colors, strong typography, dynamic layouts
- **Trusted & reassured** → conservative palettes, established font families, clean hierarchy
- **Delighted & playful** → saturated accents, rounded corners, friendly typefaces
- **Focused & precise** → dark mode friendly, monospace accents, information density

### Step 2: The User's Context

The agent asks: "Where and when will users use this product — at their desk focused, on their phone briefly, in a stressful moment, or during a reflective pause?"

Context determines density, font size, and mobile vs. desktop priority.

### Step 3: Reference Products

The agent asks: "Name 3 products you personally find well-designed — not necessarily in your category."

These become the reference palette. The agent extracts what those products have in common (not copies them) and applies it to your direction.

### Step 4: Typography Selection

Based on tone and context, the agent recommends a specific **heading + body font pair** from Google Fonts or system fonts. Both are named explicitly — no "choose a professional font" vagueness.

**Pairing logic:**
- High contrast pair (display + neutral): for products where content is the hero
- Harmonious pair (same family at different weights): for data-heavy or functional products
- Personality-forward pair (distinctive display + workhorse body): for consumer products

### Step 5: Color Palette

The agent produces a 5-color palette with hex codes:
1. **Primary** — brand color, used for key actions and highlights
2. **Background** — the dominant surface color (often off-white or very light tint of primary)
3. **Accent** — a lighter version of primary for secondary elements
4. **Text** — near-black (rarely pure #000000)
5. **Surface** — card/modal background (usually white)

### Step 6: Output

`design-brief.md` — everything an agent needs to implement consistent UI without you making micro-decisions on every screen.

## Worked Example

**Founder:** Building a financial tracking tool for freelancers.

**Output:**
> **Design Brief — Freelancer Finance Tracker**
>
> **Emotional destination:** Calm + in control. When a freelancer checks their numbers, they should feel like a competent professional, not like they're doing homework they've been avoiding.
>
> **User context:** Primarily desktop, focused mode, used weekly during admin time. Not a crisis tool — a planning tool.
>
> **Tone:** Sophisticated simplicity. Think: a well-organized financial advisor's desk. Nothing flashy. Everything has a place.
>
> **Typography:**
> - Headings: **Playfair Display** — adds gravitas without feeling stuffy
> - Body: **Inter** (400 + 500 weight) — maximum readability, never competes
>
> **Color Palette:**
> | Role | Name | Hex |
> |------|------|-----|
> | Primary | Deep Slate | #1E293B |
> | Background | Warm White | #FAFAF8 |
> | Accent | Sage | #6EE7B7 |
> | Text | Near-Black | #0F172A |
> | Surface | Pure White | #FFFFFF |
>
> **Design references:**
> 1. **Mercury** (newsletter platform) — calm editorial typography
> 2. **Framer** — sophisticated dark/light balance without coldness
> 3. **Bench** (accounting) — financial data made human
>
> **Explicitly avoid:**
> - Bright blue (#2196F3 "corporate blue") — looks like every SaaS tool from 2015
> - Chart overload on the dashboard — data density triggers anxiety, not control
> - Rounded-corner cards stacked on gray backgrounds — overused, zero personality

## Related Skills

- Use **ux-flow-designer** before this — map flows before setting visual direction
- Use **ux-heuristics-reviewer** after building — check your implemented design against UX principles
- Use **landing-page-copywriter** (Launch phase) — this brief feeds your landing page's visual tone

## Source & license

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

- **Author:** [gvkhosla](https://github.com/gvkhosla)
- **Source:** [gvkhosla/founder-skills](https://github.com/gvkhosla/founder-skills)
- **License:** MIT
- **Homepage:** https://fskills.xyz

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-gvkhosla-founder-skills-design-direction-setter
- Seller: https://agentstack.voostack.com/s/gvkhosla
- 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%.