# design-taste-frontend — Skill de Disseny Premium per a Claude Code
## Manual pràctic per a docents

---

## Què és?

La **taste-skill** (nom tècnic: `design-taste-frontend`) és una skill de Claude Code que converteix Claude en un **Enginyer Senior de UI/UX**. En lloc de generar interfícies genèriques i típiques de IA, aplica un conjunt de regles estrictes per produir dissenys visuals premium, moderns i amb personalitat.

S'activa automàticament quan treballes en dissenys web i tens la skill instal·lada.

---

## Els 3 Dials

La skill opera amb tres paràmetres globals que controlen l'estil de tota la generació:

| Dial | Valor per defecte | Rang | Descripció |
|------|:-----------------:|------|------------|
| **DESIGN_VARIANCE** | **8** | 1–10 | 1=simetria perfecta · 10=caos artístic. A 8: layouts asimètrics, espai negatiu massiu, graelles fraccionàries |
| **MOTION_INTENSITY** | **6** | 1–10 | 1=estàtic · 10=física cinematogràfica. A 6: transicions CSS fluides, delays en cascada, `cubic-bezier` |
| **VISUAL_DENSITY** | **4** | 1–10 | 1=galeria d'art · 10=cabina de pilot. A 4: app estàndard, espaiat normal |

Pots sobreescriure qualsevol dial dient-li a Claude: *"usa DESIGN_VARIANCE 5 per a aquest component"*.

---

## Com s'activa

La skill s'aplica automàticament quan Claude detecta que estàs treballant en UI/disseny web. Pots invocar-la explícitament:

```
"Usa la taste-skill per redissenyar la secció hero"
"Analitza aquesta pàgina amb la taste-skill i digues-me els problemes"
"Redisseny el component de descàrregues seguint les regles de design-taste"
```

---

## Regles clau que imposa

### Tipografia (CRÍTIQUES)

| Prohibit | Alternativa |
|----------|-------------|
| Font `Inter` | `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi` |
| H1 gegant que "crida" | Control jeràrquic amb pes i color, no mida |
| Serif en dashboards/software | Sans-serif exclusivament |
| Gradient text en titulars grans | Accent de color sobre base neutra |

```css
/* ✅ Correcte */
font-family: 'Satoshi', 'Outfit', system-ui;
font-size: clamp(2.5rem, 5vw, 4rem);
letter-spacing: -0.04em;
line-height: 1;

/* ❌ Prohibit */
font-family: 'Inter', sans-serif;
background: linear-gradient(to right, #7c3aed, #3b82f6);
-webkit-background-clip: text;
```

### Color (CRÍTIQUES)

| Prohibit | Alternativa |
|----------|-------------|
| Colors IA clichè (violeta/morat/blau neó) | Bases neutres Zinc/Slate + 1 accent singular |
| Negre pur `#000000` | Off-black `#0f0f0f` o Zinc-950 |
| Accents sobresaturats | Saturació < 80% |
| Més d'1 color d'accent | Màxim 1 accent · base neutra |

```css
/* ✅ Correcte: accent singular sobre base neutra */
--base: #18181b;       /* zinc-900 */
--accent: #f97316;     /* orange-500, saturació 100% → acceptat per contrast */
--surface: #27272a;    /* zinc-800 */

/* ❌ Prohibit */
--primary: #7c3aed;    /* THE LILA BAN */
box-shadow: 0 0 20px #7c3aed; /* neon glow */
```

### Layout (CRÍTIQUES)

| Prohibit | Alternativa |
|----------|-------------|
| Hero centrat (amb DESIGN_VARIANCE > 4) | Split-screen 50/50, alineat a l'esquerra/dreta |
| 3 targetes iguals en horitzontal | Zig-zag 2 columnes, graella asimètrica, scroll horitzontal |
| `h-screen` per seccions hero | `min-h-[100dvh]` (evita jump en iOS Safari) |
| Flex amb percentatges: `w-[calc(33%-1rem)]` | CSS Grid: `grid-template-columns: repeat(3, 1fr)` |

### Icones i Emojis (CRÍTIQUES — POLÍTICA ZERO EMOJIS)

**Els emojis estan TOTALMENT PROHIBITS** com a icones d'UI. Substituir per:
- Iconografia SVG: **Phosphor Icons**, **Radix Icons**, **Heroicons**
- Primitives SVG netes

```html
<!-- ❌ Prohibit -->
<div class="card__icon">⚡</div>
<span>📥 Descarregar</span>

<!-- ✅ Correcte -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
```

### Interaccions i Cursors

```css
/* ✅ Tots els elements clicables/hoverable */
cursor: pointer;
transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1),
            transform 200ms cubic-bezier(0.16, 1, 0.3, 1);

/* ✅ Feedback tàctil (simula push físic) */
.btn:active {
  transform: translateY(1px) scale(0.98);
}

/* ✅ Transició hover direccional */
```

### Rendiment i CSS

```css
/* ✅ Animeu SEMPRE transform i opacity */
transform: translateY(-4px);
opacity: 0.8;

/* ❌ PROHIBIT animar */
top: -4px;
width: 105%;
height: calc(100% + 4px);
```

---

## Patrons premium del Creative Arsenal

La taste-skill et proposa aquests patrons d'alt impacte quan construeix UI:

| Patró | Quan usar |
|-------|-----------|
| **Glassmorphism refractat** | Panels sobre fons amb textura. Afegeix `border-white/10` + inner shadow per simular vidre físic |
| **Bento Grid asimètric** | Seccions de features/objectius. Estil Apple Control Center: tiles de mides distintes |
| **Sticky Scroll Stack** | Targetes que s'apilen físicament mentre desplaces |
| **Kinetic Marquee** | Bandes de text infinites per a logos/partners/stats |
| **Spotlight Border Card** | Vora de targetes que s'il·lumina sota el cursor |
| **Staggered Load-in** | Llistes i graelles que apareixen en cascada (no totes alhora) |

---

## Checklist pre-entrega

Abans de lliurar qualsevol UI, la taste-skill verifica:

- [ ] Zero emojis com a icones (SVG en el seu lloc)
- [ ] Font no-Inter (Geist / Outfit / Satoshi / Cabinet Grotesk)
- [ ] Cap titular centrat en hero (DESIGN_VARIANCE > 4)
- [ ] Cap graella de 3 targetes iguals en horitzontal
- [ ] Tots els elements clicables: `cursor-pointer` + hover feedback
- [ ] Transicions: `cubic-bezier(0.16, 1, 0.3, 1)`, 150–300ms
- [ ] Seccions hero: `min-h-[100dvh]` (no `h-screen`)
- [ ] Ombres tintades al color de fons (no negre pur)
- [ ] Animacions: SEMPRE `transform`/`opacity`, mai `top`/`width`/`height`
- [ ] Contrast mínim 4.5:1 per a text normal
- [ ] Focus visible per a navegació de teclat

---

## Exemples de prompts

```
"Redisseny la secció d'objectius del curs IA seguint la taste-skill:
substitueix els emojis per SVG, canvia a una graella bento asimètrica
i afegeix staggered load-in"

"Analitza tota la pàgina index.html amb la taste-skill i genera
un informe de les violacions per prioritat"

"Crea una secció hero split-screen per al curs IA:
text a l'esquerra, element visual animat a la dreta,
DESIGN_VARIANCE 8, tipografia Satoshi"
```

---

## Recursos

- Repositori taste-skill: skill instal·lada a `~/.claude/skills/taste-skill/`
- Phosphor Icons (SVG): `https://phosphoricons.com/`
- Google Fonts — Outfit: `https://fonts.google.com/specimen/Outfit`
- Google Fonts — Satoshi (Fontshare): `https://www.fontshare.com/fonts/satoshi`

---

*Documentat durant el Curs IA Claude per a Docents · IES JMR · Abril 2026*