# Design Direction

> Establish a deliberate aesthetic point of view before building anything visual. Use this skill FIRST whenever starting any visual work — a website, landing page, app UI, dashboard, data visualization, slide deck, game screen, generative art piece, poster, or component library — even if the user only says "make it look good", "build me a page", or "design a UI". Also use it when the user complains…

- **Type:** Skill
- **Install:** `agentstack add skill-jangles-byte-atelier-design-direction`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [jangles-byte](https://agentstack.voostack.com/s/jangles-byte)
- **Installs:** 0
- **Category:** [Data & Analytics](https://agentstack.voostack.com/c/data-and-analytics)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [jangles-byte](https://github.com/jangles-byte)
- **Source:** https://github.com/jangles-byte/atelier/tree/main/skills/design-direction

## Install

```sh
agentstack add skill-jangles-byte-atelier-design-direction
```

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

## About

# Design Direction

Generic output happens when implementation starts before intent exists. This skill
forces the intent step: a short, written design philosophy that commits to one
aesthetic point of view — and names what it is *not* — before a single pixel exists.

## Workflow

1. **Interrogate the brief** — answer the five questions in
   [references/interrogation.md](references/interrogation.md). If the user's request
   doesn't answer them, infer defensible answers from context and state your
   assumptions; do not stall on questions when the user isn't available.
2. **Write the philosophy** — a named direction plus 4–6 tight paragraphs, using the
   format in [references/philosophy-format.md](references/philosophy-format.md).
   Write it into the project (e.g. `DESIGN.md`) or state it in full before implementing.
3. **Pick a point of view** — choose or blend a direction from
   [references/aesthetic-vocabularies.md](references/aesthetic-vocabularies.md), and
   check the result against [references/anti-generic.md](references/anti-generic.md)
   (the catalog of default-AI tells to avoid).
4. **Then implement** — loading the other Atelier skills (`color`,
   `typography-and-layout`, `motion`) as the work requires them.
5. **Render, critique, iterate** — never ship a visual without rendering the real
   result and running the `critique` skill on it.

## Which reference to load

| Situation | Load |
|---|---|
| Starting any visual work | `references/interrogation.md` then `references/philosophy-format.md` |
| Choosing/naming an aesthetic | `references/aesthetic-vocabularies.md` |
| Work is drifting generic, or reviewing for genericism | `references/anti-generic.md` |

## The one rule

Every project gets **one signature move** — a single distinctive decision (a color no
template uses, an unusual type pairing, a bold grid break, a characteristic motion) that
someone could describe from memory. If nothing about the design is describable, the
direction step failed. Go back to step 2.

## Source & license

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

- **Author:** [jangles-byte](https://github.com/jangles-byte)
- **Source:** [jangles-byte/atelier](https://github.com/jangles-byte/atelier)
- **License:** MIT

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-jangles-byte-atelier-design-direction
- Seller: https://agentstack.voostack.com/s/jangles-byte
- 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%.