web-design-mastery
✓Diseño de UI de aplicaciones web de nivel de producción basado en los principios de Refactoring UI. Active SIEMPRE para: página de inicio, panel de control, pantallas de autenticación, secciones principales, diseño de tarjetas, diseño de botones, entradas de formularios, navegación, diseños, decisiones de espaciado, jerarquía tipográfica, selección de colores, sombras, profundidad, estados vacíos, decoración de fondo. Proporciona flujo de trabajo de diseño, jerarquía visual, sistemas de espaciado (cuadrícula de 4 píxeles), escala de tipos, sistemas de color HSL, elevación de sombras y toques finales. 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. Inglés: hermosa interfaz, diseño elegante, sensación premium, jerarquía visual, espacios en blanco, paleta de colores, escala de tipografía.
Instalación
SKILL.md
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 |
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery- Categoría
- *Creatividad
- Verificado
- ✓
- Primera vez visto
- 2026-02-01
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es web-design-mastery?
Diseño de UI de aplicaciones web de nivel de producción basado en los principios de Refactoring UI. Active SIEMPRE para: página de inicio, panel de control, pantallas de autenticación, secciones principales, diseño de tarjetas, diseño de botones, entradas de formularios, navegación, diseños, decisiones de espaciado, jerarquía tipográfica, selección de colores, sombras, profundidad, estados vacíos, decoración de fondo. Proporciona flujo de trabajo de diseño, jerarquía visual, sistemas de espaciado (cuadrícula de 4 píxeles), escala de tipos, sistemas de color HSL, elevación de sombras y toques finales. 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. Inglés: hermosa interfaz, diseño elegante, sensación premium, jerarquía visual, espacios en blanco, paleta de colores, escala de tipografía. Fuente: anilcancakir/my-claude-code.
¿Cómo instalo web-design-mastery?
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor
¿Dónde está el repositorio de origen?
https://github.com/anilcancakir/my-claude-code
Detalles
- Categoría
- *Creatividad
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-01