# designing-beautiful-websites

A skill for planning, building and reviewing web interfaces: page structure, responsive behaviour, visual language and interaction states.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2800 installs · ★ 3
- Author: tristanmanchester
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/tristanmanchester/agent-skills/tree/HEAD/designing-beautiful-websites/SKILL.md
- Updated: 2026-09-14
- HTML: https://affpapa.org/en/nevibecode/skills/designing-beautiful-websites

## What it does

The skill starts by reading the request, the existing code, the design system and the content on hand. It works out who the user is, what the page is for, which journey matters, and what constraints apply. A small polish request stays small unless a structural problem blocks the result. A new site gets a chosen direction and an actual deliverable, not just a planning document.

Reference files load one at a time depending on the task: typography and composition, navigation and structure, controls and forms, labels and microcopy, content-led responsive layouts, accessibility checks, an audit format, page patterns. An optional contrast helper for opaque-sRGB needs Python 3.9+. Design reasoning runs on supplied content and screenshots; implementation and browser verification depend on what the project already has. Without a browser environment the agent cannot confirm keyboard or screen-reader behaviour, and the skill says a screenshot is not a substitute for that.

Some things are ruled out on purpose. No invented client logos, reviews, awards or statistics to fill a layout. No fake scarcity. No hiding important content behind a JavaScript reveal that may fail. Placeholder content gets marked as such. Restyling keeps refs, focus, validation and form submission intact, and a control that looks disabled still has to behave correctly.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill designing-beautiful-websites -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill designing-beautiful-websites -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill designing-beautiful-websites -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install tristanmanchester/agent-skills designing-beautiful-websites
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill designing-beautiful-websites -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/tristanmanchester/agent-skills --path designing-beautiful-websites
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill designing-beautiful-websites -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/tristanmanchester/agent-skills/tree/HEAD/designing-beautiful-websites/SKILL.md

## When to use it
- plan page structure around real content
- work out responsive behaviour for narrow screens and zoom
- define loading, error and empty states
- run an interface audit with locations and impact
- move forms and dialogs onto semantic patterns with focus handling

## Example prompts
- Build the pricing page from this mockup and show where it breaks at 360 px
- Audit the signup form: where does focus get lost and which errors are unclear
- Rework the dashboard navigation while keeping the current component system

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

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