·design-foundation
</>

design-foundation

sanky369/vibe-building-skills

Establezca o formalice la base de su sistema de diseño. Cree tokens de diseño (color, tipografía, espaciado, sombras, bordes), defina la arquitectura de componentes, documente los principios de diseño y cree la estructura que permita la coherencia y la escalabilidad. Funciona con Tailwind CSS y enfoques independientes del marco.

20Instalaciones·1Tendencia·@sanky369

Instalación

$npx skills add https://github.com/sanky369/vibe-building-skills --skill design-foundation

SKILL.md

A design foundation is the bedrock upon which all great products are built. It's not just a collection of colors and fonts—it's a system of decisions that enables your team to build consistently, quickly, and with intention.

This skill helps you create or formalize your design foundation, whether you're starting from scratch or documenting what already exists. It covers design tokens, component structure, design principles documentation, and the governance model for your system.

Modern design systems are built on the concept of design tokens—named entities that store design decisions. Rather than hardcoding colors or spacing values throughout your codebase, tokens centralize these decisions, making them easy to maintain, theme, and scale.

Establezca o formalice la base de su sistema de diseño. Cree tokens de diseño (color, tipografía, espaciado, sombras, bordes), defina la arquitectura de componentes, documente los principios de diseño y cree la estructura que permita la coherencia y la escalabilidad. Funciona con Tailwind CSS y enfoques independientes del marco. Fuente: sanky369/vibe-building-skills.

Ver original

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/sanky369/vibe-building-skills --skill design-foundation
Categoría
</>Desarrollo
Verificado
Primera vez visto
2026-02-01
Actualizado
2026-02-18

Respuestas rápidas

¿Qué es design-foundation?

Establezca o formalice la base de su sistema de diseño. Cree tokens de diseño (color, tipografía, espaciado, sombras, bordes), defina la arquitectura de componentes, documente los principios de diseño y cree la estructura que permita la coherencia y la escalabilidad. Funciona con Tailwind CSS y enfoques independientes del marco. Fuente: sanky369/vibe-building-skills.

¿Cómo instalo design-foundation?

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/sanky369/vibe-building-skills --skill design-foundation 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/sanky369/vibe-building-skills