Claude Code · Codex · Cursor · OpenCode

Skill di design per Claude Code, Codex e il tuo agente.

138 skill open-source per presentazioni PPT e slide, design frontend e UI, sistemi di brand, motion e revisione del design — catalogate dai file SKILL.md reali. Inizia dal nome della skill o dal lavoro da completare.

Scarica OpenDesign Sfoglia tutte le 138 skill

Conosci l'attività ma non il nome della skill? Filtra il catalogo per attività

anthropics/skills01

--- name: frontend-design description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults. --- # Frontend Design Approach this as the design lead at a design studio known for giving every client a distinct visual identity that is not mistaken for anyone else's. This client has already rejected proposals that felt cliché or templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take aesthetic risk …

nextlevelbuilder/ui-ux-pro-max-skill02

--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, … ---

pbakaus/impeccable03

--- name: impeccable description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, … ---

Front matter dai file SKILL.md upstream · frontend-design, ui-ux-pro-max, impeccableSnapshot 2026-09-14

Skills

138 per Claude Code & CodexLette dai file SKILL.md reali, non da elenchi di directory

Sources

34 repository open-sourceOgni voce rimanda al file originale

Licenses

MIT · Apache-2.0 · altre 3Verificate a livello di file o repository, mostrate su ogni card

Ultima verifica

2026-09-14Fonti, licenze e stelle dei repository verificate in questa data

01 Tutte le skill

Tutte le 138 skill di design, per attività.

Presentazioni PPT e slide, frontend e UI, mobile, design system, motion e video, design review. Ogni card rimanda al SKILL.md della skill.

Nessuna skill corrispondente.

02 Come scegliere e iniziare

Come scegliere una design skill e utilizzarla in Claude Code o Codex.

Scegli in base a task e output, verifica cosa richiede la skill, quindi installala nel tuo agente ed esegui un task reale. Gli stessi tre passaggi funzionano in Claude Code, Codex, Cursor e OpenCode.

1
Scegli il task, non il nome della skill
Filtra in base a ciò che devi creare — una landing page, una presentazione, un sistema di brand, una review. Confronta l'uso sintetico e il tipo di output prima di confrontare le stelle.
VerificaDue o tre candidate il cui output corrisponde al file che ti serve effettivamente.
2
Verifica cosa richiede la skill
Apri il source e leggi i requisiti. Alcune skill funzionano solo con uno strumento specifico come Google Stitch, HyperFrames o GSAP; altre richiedono un servizio di generazione immagini. Il catalogo li elenca sotto Needs quando il SKILL.md li dichiara.
VerificaLo strumento o il servizio che la skill indica sia disponibile nel tuo progetto prima di installarla.
greensock/gsap-skills · SKILL.md02

gsap-scrolltrigger

Animazioni collegate allo scroll con ScrollTrigger: pinning, scrub, trigger, parallasse.

Needs: GSAP nel progetto

--- name: gsap-scrolltrigger description: Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks … ---
3
Installala nel tuo agente ed esegui un task reale
Installa la skill nel modo documentato dal suo autore — per la maggior parte dei repository è un comando npx skills add — quindi esegui un task reale con i tuoi contenuti in Claude Code, Codex o nel tuo agente. Copiare un comando non è un'installazione riuscita finché l'agente non riconosce e usa la skill.
VerificaL'agente elenca la skill per nome e il suo output cambia quando la invochi.
Terminal03
```
$ npx skills add https://github.com/greensock/gsap-skills --skill gsap-scrolltrigger
✓ gsap-scrolltrigger added for 1 agent
$ claude
› /gsap-scrolltrigger  pin the hero and scrub the timeline on scroll…
```
Sessione illustrativa · i passaggi di installazione e l'output variano per agente

03 Usarle in OpenDesign

38 di Questi Skill Sono Inclusi in OpenDesign. Importa gli Altri da un Link.

OpenDesign legge lo stesso formato SKILL.md che usa Claude Code, quindi qualsiasi skill in questo catalogo funziona con esso — con Claude Code, Codex, Cursor o OpenCode come motore.

38
Già Inclusi
frontend-design, ui-ux-pro-max, impeccable, guizang-ppt-skill, gli otto skill GSAP e altri sono in Plugins → Skills dopo l'installazione. Hanno un tag In OpenDesign nel catalogo qui sopra.
↗
Importa Qualsiasi Altro Skill dal Suo Link
Plugins → Add → Skill → Import from link, incolla il link GitHub della cartella dello skill — lo stesso link di Source su ogni card — e arriva nei tuoi skill personali. Funziona anche il caricamento di una cartella locale.
›_
Funziona con l'Agente che Usi Già
Scegli lo skill nella barra superiore e il suo SKILL.md viene composto nel prompt insieme al tuo DESIGN.md. Claude Code, Codex, Cursor o OpenCode fa il lavoro; l'anteprima e gli export sono di OpenDesign.

OpenDesign

Esegui Skill di Design con gli Agenti di Codice che Usi Già.

OpenDesign è uno spazio di lavoro di design open-source e local-first. Trasforma gli agenti di codice in un motore di design per prototipi, pagine web, slide e video HTML — file reali ed eseguibili, sulla tua macchina, con le tue chiavi.

Scarica OpenDesign Leggi la guida rapida

Le skill in questo catalogo sono progetti open-source indipendenti. 38 sono integrate in OpenDesign; le altre si importano dal link del repository. La guida di ciascuna skill resta valida.

Dipinto a olio di un villaggio su un pendio sopra una baia azzurra, nello stile pittorico usato in tutto il sito OpenDesign

Skill di design per Claude Code, Codex e il tuo agente.

Tutte le 138 skill di design, per attività.

Come scegliere una design skill e utilizzarla in Claude Code o Codex.

Scegli il task, non il nome della skill

Verifica cosa richiede la skill

Installala nel tuo agente ed esegui un task reale

38 di Questi Skill Sono Inclusi in OpenDesign. Importa gli Altri da un Link.

Già Inclusi

Importa Qualsiasi Altro Skill dal Suo Link

Funziona con l'Agente che Usi Già

Esegui Skill di Design con gli Agenti di Codice che Usi Già.