·web-design-mastery
*

web-design-mastery

Progettazione dell'interfaccia utente dell'applicazione Web di livello produttivo basata sui principi dell'interfaccia utente di refactoring. Attiva SEMPRE per: pagina di destinazione, dashboard, schermate di autenticazione, sezioni degli eroi, design delle carte, design dei pulsanti, input dei moduli, navigazione, layout, decisioni sulla spaziatura, gerarchia tipografica, selezione dei colori, ombre, profondità, stati vuoti, decorazione dello sfondo. Fornisce flusso di lavoro di progettazione, gerarchia visiva, sistemi di spaziatura (griglia 4px), scala del tipo, sistemi di colore HSL, elevazione delle ombre, ritocchi finali. Turco: sayfa tasarımı, UI/UX, frontend tasarım, web tasarım, güzel arayüz, modern tasarım, card tasarımı, buton stili, form tasarımı, renk paleti, tipografi. Inglese: bella interfaccia, design elegante, sensazione premium, gerarchia visiva, spazi bianchi, tavolozza dei colori, scala tipografica.

24Installazioni·1Tendenza·@anilcancakir

Installazione

$npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery

Come installare web-design-mastery

Installa rapidamente la skill AI web-design-mastery nel tuo ambiente di sviluppo tramite riga di comando

  1. Apri il terminale: Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.)
  2. Esegui il comando di installazione: Copia ed esegui questo comando: npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery
  3. Verifica l'installazione: Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw

Fonte: anilcancakir/my-claude-code.

Production-grade UI design principles from Refactoring UI by Adam Wathan & Steve Schoger.

| 1 | 4 | Micro gaps | | 2 | 8 | Tight, within components | | 3 | 12 | Related elements | | 4 | 16 | Section padding | | 6 | 24 | Between sections | | 8 | 32 | Major separation | | 12 | 48 | Large gaps | | 16 | 64 | Hero spacing | | 24 | 96 | Maximum separation |

| 12 | Labels, meta, fine print | | 14 | Body text, default | | 16 | Emphasis, subheadings | | 18 | Section headings | | 20 | Card titles | | 24 | Page section titles | | 30 | Page headings | | 36 | Hero subheading | | 48 | Hero heading | | 60-72 | Display text |

Fatti (pronti per citazione)

Campi e comandi stabili per citazioni AI/ricerca.

Comando di installazione
npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery
Categoria
*Creatività
Verificato
Prima apparizione
2026-02-01
Aggiornato
2026-03-11

Browse more skills from anilcancakir/my-claude-code

Risposte rapide

Che cos'è web-design-mastery?

Progettazione dell'interfaccia utente dell'applicazione Web di livello produttivo basata sui principi dell'interfaccia utente di refactoring. Attiva SEMPRE per: pagina di destinazione, dashboard, schermate di autenticazione, sezioni degli eroi, design delle carte, design dei pulsanti, input dei moduli, navigazione, layout, decisioni sulla spaziatura, gerarchia tipografica, selezione dei colori, ombre, profondità, stati vuoti, decorazione dello sfondo. Fornisce flusso di lavoro di progettazione, gerarchia visiva, sistemi di spaziatura (griglia 4px), scala del tipo, sistemi di colore HSL, elevazione delle ombre, ritocchi finali. Turco: sayfa tasarımı, UI/UX, frontend tasarım, web tasarım, güzel arayüz, modern tasarım, card tasarımı, buton stili, form tasarımı, renk paleti, tipografi. Inglese: bella interfaccia, design elegante, sensazione premium, gerarchia visiva, spazi bianchi, tavolozza dei colori, scala tipografica. Fonte: anilcancakir/my-claude-code.

Come installo web-design-mastery?

Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw

Dov'è il repository sorgente?

https://github.com/anilcancakir/my-claude-code