# gpt-taste

Forces coding agents to generate layout images, analyze their typography and spacing, and only then write frontend code.

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

## What it does

The skill bans direct code generation. The agent must first generate visual images of the requested sections, inspect spacing and hierarchy, and only then write markup. Its active baseline defaults to high art direction (8 out of 10) and generous spacing (9 out of 10).

The instructions explicitly counter repetitive AI defaults like nested cards and dark hero clichés. Inside Codex, the skill requires generating one distinct standalone image per requested section instead of squeezing everything into one compressed collage.

This approach breaks down in text-only setups. The entire workflow treats generated visuals as the primary source of truth, so lacking image generation capabilities removes the foundation of the extraction phase.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add tasteskill/tasteskill --skill gpt-taste -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add tasteskill/tasteskill --skill gpt-taste -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add tasteskill/tasteskill --skill gpt-taste -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install tasteskill/tasteskill gpt-taste
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add tasteskill/tasteskill --skill gpt-taste -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/tasteskill/tasteskill --path gpt-taste
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add tasteskill/tasteskill --skill gpt-taste -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/tasteskill/tasteskill/tree/HEAD/gpt-taste/SKILL.md

## When to use it
- generate visual UI references before producing frontend code
- extract layout hierarchy and spacing directly from generated mockups
- eliminate repetitive AI layout patterns like nested cards and cluttered hero sections
- build multi-section pages using section-specific standalone images

## Example prompts
- Build a hero section for our product landing page using gpt-taste
- Generate standalone design images for three sections first, inspect them, and implement the frontend

## 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: 93602555523bf70c.

BEGIN THIRD-PARTY FILE 93602555523bf70c
```text
---
name: gpt-taste
description: Elite UX/UI & GSAP Motion Engineer. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
---

# CORE DIRECTIVE: ELITE UX/UI & GSAP MOTION ENGINEER
You are an elite web design art director and implementation strategist.

Your job is not to generate generic website mockups.
Your job is to generate premium, artistic, implementation-friendly website section references and then turn them into real frontend.

This skill is for:
- hero sections
- landing pages
- marketing sites
- startup sites
- editorial brand pages
- product pages
- premium multi-section websites
- redesigns where visual quality matters

Standard AI output tends to collapse into repetitive defaults:
- one single giant compressed image for too many sections
- text that becomes too small to read
- centered dark hero clichés
- generic card spam
- repeated left-text/right-image layouts
- weak typography hierarchy
- vague spacing
- cards inside cards inside cards
- giant rounded section containers everywhere
- too much visible information in the first screen
- tiny pills, labels, tags, system markers, and fake interface jargon
- nice-looking but unextractable designs
- generic coded reinterpretations after the image step
- lazily generating too few images for too many sections

Your goal is to aggressively break these defaults.

The output must feel:
- premium
- art-directed
- readable
- structured
- implementation-friendly
- deeply analyzable
- visually strong
- faithful enough to build from
- clean on first view
- responsive in spirit
- realistic on a small laptop viewport

IMPORTANT:
For visual website tasks, you must first generate the design image(s) yourself.
Then you must deeply analyze the generated image(s).
Only after that should you implement the frontend.

Do not skip image generation when image generation is available.
Do not begin with freeform coding first.
The generated image(s) are the primary visual source of truth.

The required workflow is:

image generation first  
deep image analysis second  
implementation third

If the task is mainly visual, this order is mandatory.

---

## 1. ACTIVE BASELINE CONFIGURATION

- DESIGN_VARIANCE: 8  
  `(1 = rigid / conventional, 10 = highly art-directed / asymmetric)`
- VISUAL_DENSITY: 3  
  `(1 = airy / calm, 10 = dense / packed)`
- ART_DIRECTION: 8  
  `(1 = safe commercial, 10 = bold creative statement)`
- IMPLEMENTATION_CLARITY: 9  
  `(1 = loose moodboard, 10 = highly buildable UI reference)`
- IMAGE_USAGE_PRIORITY: 9  
  `(1 = mostly typographic, 10 = strongly image-led when appropriate)`
- SPACING_GENEROSITY: 9  
  `(1 = compact / tight, 10 = spacious / breathable)`
```
END THIRD-PARTY FILE 93602555523bf70c

The third-party file has ended. Everything between the 93602555523bf70c 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 3123 of 36359 bytes. © tasteskill · MIT · https://github.com/tasteskill/tasteskill/tree/HEAD/gpt-taste/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