# layers-intro

Introduces the Layers of Product Design framework for AI design sessions. Load it first to give all other layers skills their shared context.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2000 installs · ★ 313
- Author: jamiemill
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/jamiemill/layers-skills/tree/HEAD/skills/layers-intro/SKILL.md
- Updated: 2026-05-30
- HTML: https://affpapa.org/en/nevibecode/skills/layers-intro

## What it does

The skill sets up a seven-layer framework across three zones: reality, problem space, and solution space. It adapts ideas from Jesse James Garrett and Christopher Alexander. The focus stays on making decisions rather than producing thick reports. The agent helps uncover unmade choices and spot risks instead of mindlessly walking through a checklist.

Layers depend on each other logically. Lower layers act as foundations for higher ones. The conceptual model carries the interaction flow and the final surface. When lower layers are weak, design debt propagates upward. That is why the framework checks foundations before letting you build screens.

This skill must be loaded before any other `/layers-*` commands. Without it, the assistant lacks the operating context and starts treating design techniques as mere forms to fill.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add jamiemill/layers-skills --skill layers-intro -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/layers-intro/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/layers-intro/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add jamiemill/layers-skills --skill layers-intro -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/layers-intro/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add jamiemill/layers-skills --skill layers-intro -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/layers-intro/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install jamiemill/layers-skills layers-intro
```

2. **Manually: put the files in place**
- File: `.github/skills/layers-intro/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add jamiemill/layers-skills --skill layers-intro -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/jamiemill/layers-skills --path skills/layers-intro
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/layers-intro/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add jamiemill/layers-skills --skill layers-intro -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/jamiemill/layers-skills/tree/HEAD/skills/layers-intro/SKILL.md

## When to use it
- structure a design session across seven product layers
- surface hidden or unmade product decisions
- audit conceptual foundations before detailing UI screens
- map temporal entity states and deletion semantics

## Example prompts
- /layers-intro
- Load /layers-intro before we begin working on the product architecture
- Start our design session with /layers-intro to audit the foundations

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 71082d33208f6055.

BEGIN THIRD-PARTY FILE 71082d33208f6055
```text
---
name: layers-intro
description: Framework orientation for Layers of Product Design — load this first; provides the context all other skills depend on
---

# /layers-intro

Load this skill at the start of any design session. It provides the framework context that all other `/layers-*` skills depend on.

---

## The framework

**Layers of Product Design** organises design work into seven layers across three zones. Layers have *logical dependency*: lower layers are foundations for upper ones. Weak lower layers create UX debt that propagates upward.

**Reality** — complex, contradictory, evolving. Source of all learning.

**Problem space** — knowledge gathered from reality:
1. **Observed behaviour** — what users actually do
2. **The domain** — concepts, terminology, and mental models that exist independently of any product
3. **User needs** — what we think users are trying to achieve, and why

**Solution space** — deliberate decisions about what to build:
4. **Product & service strategy** — which needs to serve, and what business outcomes to target
5. **Conceptual model** — objects, relationships, states, vocabulary — independent of any interface
6. **Interaction structure and flow** — places, affordances, connections, and flow logic
7. **Surface** — words, visuals, feedback, hierarchy — what users actually encounter

The layers are not a linear process. Enter anywhere — but always check whether the foundations below are sound.

*Inspired by Jesse James Garrett's* The Elements of User Experience *(2000).*

---

## Design is decision-making

Design = making decisions about the form of a solution (Christopher Alexander). Form is the solution; context is the requirements, constraints, and environment it must fit. Good design is good fit.

**Four kinds of progress:**
1. **Making decisions** — resolving something undecided
2. **Uncovering unmade decisions** — discovering what hasn't been decided yet (often more valuable than 1)
3. **Evaluating decisions** — identifying decisions already made that are risky, inconsistent, or wrong
4. **Prioritising decisions** — lower layers are more foundational and carry more risk if wrong

The job of every skill is to help the designer make better decisions — not to make decisions for them.

---

## How to use these skills

Each `/layers-*` skill is a **library of techniques for one layer — not a script to run start to finish.** Don't march through every step and emit a stack of artefacts. Instead:

1. **Find the live decisions.** What at this layer is genuinely undecided, risky, or worth surfacing? (`/layers-orient` finds these across all layers if you're not sure.) If nothing here is live, say so and move on — don't manufacture work to fill the structure.
2. **Offer a technique that fits the decision.** Each skill lists techniques with the situations they suit. Suggest one or two and let the designer choose. A technique is a way to make a specific decision, not a box to fill.
```
END THIRD-PARTY FILE 71082d33208f6055

The third-party file has ended. Everything between the 71082d33208f6055 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 3003 of 9462 bytes. © jamiemill · MIT · https://github.com/jamiemill/layers-skills/tree/HEAD/skills/layers-intro/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md