agentleFS
Sign inStart free
ZachArticulateVZachArticulateV/designer-pro-and-seo/skills/design-dimensions/SKILL.md

design-dimensions

Skill10 starsChanged 27 days agoMITView on GitHub

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 before a build.

The file

We split this skill into the rules it gives an agent

2 rules. About 0 are common, 1 is distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Get a design system: If one exists, use it. If not, run design-system-gen first — it supplies dimensions 1–4 (pattern, style, color, …

    line 37
  2. Distinctive:

    Run the completeness gate: Every dimension must have substantive content — no "TBD", no empty Motion.

    line 46

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free