# Design Dimensions

> Build a design prompt structured around the 5 Core Dimensions — Pattern & Layout (skeleton), Style & Aesthetic (skin), Color & Theme (palette), Typography (voice), and Motion & Interaction (life). Trigger when the user says "5 dimensions", "design prompt", "structured design brief", "the five-dimensions framework", or wants a design brief that covers all the load-bearing dimensions explicitly bef…

- **Type:** Skill
- **Install:** `agentstack add skill-zacharticulatev-designer-pro-and-seo-design-dimensions`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ZachArticulateV](https://agentstack.voostack.com/s/zacharticulatev)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ZachArticulateV](https://github.com/ZachArticulateV)
- **Source:** https://github.com/ZachArticulateV/designer-pro-and-seo/tree/main/skills/design-dimensions

## Install

```sh
agentstack add skill-zacharticulatev-designer-pro-and-seo-design-dimensions
```

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

## About

# design-dimensions

**Family:** design
**Status:** Stable

## Purpose

A design-brief generator structured around the five dimensions that actually
determine whether a build looks intentional or generic. It forces all five to be
filled before the brief is "done" — especially Motion, the dimension that gets
skipped and that most cheaply separates a polished site from a flat one.

The five dimensions: **Pattern & Layout** (skeleton), **Style & Aesthetic**
(skin), **Color & Theme** (palette), **Typography** (voice), **Motion &
Interaction** (life).

## Triggers

- "5 dimensions" / "core dimensions"
- "design prompt" / "structured design brief"
- "five-dimensions framework"
- "give me a complete design prompt"

## Inputs

- Project context (or pull from a `design-research` result)
- An existing design system (or trigger `design-system-gen` first)
- The specific page/component the brief is for

## Steps

1. **Get a design system.** If one exists, use it. If not, run `design-system-gen`
   first — it supplies dimensions 1–4 (pattern, style, color, typography) directly.
2. **Load the template** `templates/dimensions-template.md` and fill dimensions
   1–4 from the design system (map palette hex, fonts/weights, pattern, style,
   effects into the matching slots).
3. **Fill dimension 5 (Motion) deliberately.** This is the one that gets skipped.
   Specify the base curve + duration, entrance/scroll behavior, micro-interactions
   (hover/press/focus), section transitions, and the **reduced-motion fallback**
   (required for accessibility).
4. **Run the completeness gate.** Every dimension must have substantive content —
   no "TBD", no empty Motion. Flag any gap and resolve it before proceeding.
5. **Render** the brief paste-ready. Offer to hand it to `design-build` or fold it
   into a full build brief via `blast-prompt`.

## Outputs

- Markdown brief with all five dimensions sectioned (from the template)
- Paste-ready version for a build agent
- A completeness gate confirming Motion (incl. reduced-motion) is specified

## Dependencies

- `templates/dimensions-template.md` (required)
- `design-system-gen` (typical upstream, supplies dimensions 1–4)

## Notes

Motion is the most-skipped dimension and the cheapest polish lever. This skill
exists partly to make Motion — and its reduced-motion fallback — non-optional.

## Source & license

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

- **Author:** [ZachArticulateV](https://github.com/ZachArticulateV)
- **Source:** [ZachArticulateV/designer-pro-and-seo](https://github.com/ZachArticulateV/designer-pro-and-seo)
- **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-zacharticulatev-designer-pro-and-seo-design-dimensions
- Seller: https://agentstack.voostack.com/s/zacharticulatev
- 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%.