# design

Guides an agent through Subframe work: build a page or component, line up design options on a canvas, adjust a theme.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 775 installs · ★ 450
- Author: SubframeApp
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/SubframeApp/subframe/tree/HEAD/plugins/subframe/skills/design/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/subframeapp-design

## What it does

The skill kicks in when the deliverable has to end up in Subframe rather than a code branch. It starts by working out what stays and what changes: the agent reads the real content of an existing page and looks at how it renders. For a website or codebase reference it pulls source and screenshots through the host's tools. A written description on its own is thin ground for rebuilding a screen.

Then comes the smallest operation that does the job: edit a page or snippet where it sits, clone it for an exact repeat, or generate something new. Source files and images go into the brief with a note on what to keep and what to alter, since the generator never sees the chat. Missing primitives get built before anything references them. Subframe tooling has to be reachable, otherwise the steps have nowhere to run.

When the work lands, the agent screenshots the result and checks it against the reference: lower sections, responsive layouts, states. A small tweak to shipped UI is often faster straight in code, unless the project keeps its designs in Subframe. Theme changes go through existing tokens instead of fresh near-duplicates.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add SubframeApp/subframe --skill design -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add SubframeApp/subframe --skill design -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add SubframeApp/subframe --skill design -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install SubframeApp/subframe design
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add SubframeApp/subframe --skill design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/SubframeApp/subframe --path plugins/subframe/skills/design
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add SubframeApp/subframe --skill design -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/SubframeApp/subframe/tree/HEAD/plugins/subframe/skills/design/SKILL.md

## When to use it
- build a new Subframe page from a reference
- compare several layout directions on one canvas
- restyle a single node without breaking its neighbours
- turn teammate comments into edits on the right elements
- update theme tokens so finished screens inherit them

## Example prompts
- Build a pricing page in Subframe from `pricing.png`, three columns
- Change the heading and spacing on the onboarding page in Subframe
- Make a second version of the landing screen focused on search

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

## Other versions with the same name
- [design · nextlevelbuilder](https://affpapa.org/en/nevibecode/skills/design.md) — 41300 installs
- [design · rshankras](https://affpapa.org/en/nevibecode/skills/rshankras-design.md) — 677 installs

From the same set: [subframeapp/subframe](https://affpapa.org/en/nevibecode/by/subframeapp/subframe.md) — 2 cards

---
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