stitch-design-tastepor Leonxlnx

Stitch Design Taste Skill.

Un skill de Claude Code y Codex para trabajo de marca y diseño de sistemas: escribe un DESIGN.md para Google Stitch con énfasis en la distinción visual.

Marca y sistemas de diseño
DESIGN.md

Descargar OpenDesign Ver guía de uso

Leonxlnx/taste-skill · skills/stitch-skill/SKILL.mdSKILL.md

--- name: stitch-design-taste description: Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance. --- ## Prerequisites ## The Goal ## Analysis & Synthesis Instructions ## Output Format (DESIGN.md Structure) ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

Front matter y encabezados de sección leídos del archivo original el 14 de septiembre de 2026 · 11 732 caracteres en total

01 Qué hace

Qué hace la Skill stitch-design-taste en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Esta skill genera archivos DESIGN.md optimizados para la generación de pantallas de Google Stitch. Traduce directivas de ingeniería frontend anti-slop al lenguaje de diseño semántico nativo de Stitch: reglas descriptivas en lenguaje natural combinadas con valores precisos que el agente de IA de Stitch puede interpretar. El archivo sirve como fuente única de verdad para instruir a Stitch a generar interfaces premium y no genéricas.

Impone reglas tipográficas estrictas, paletas de color calibradas, layouts asimétricos, micro-movimiento perpetuo y rendimiento acelerado por hardware. La skill incluye listas explícitas de anti-patrones que prohíben clichés de diseño de IA como la fuente Inter, los brillos neón, las secciones hero centradas y el contenido de relleno genérico.

Qué produce

Un archivo DESIGN.md con siete secciones estructuradas: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles, Motion & Interaction y Anti-Patterns

Ver el ejemplo de prompt ↗

Cómo funciona

01
Definir la Atmósfera
Evalúe la intención del proyecto objetivo usando adjetivos evocadores del espectro de gusto en tres dimensiones: Densidad (1-10, de Airy a Cockpit Dense), Varianza (1-10, de Symmetric a Chaotic) y Movimiento (1-10, de Static a Cinematic).
02
Mapear la Paleta de Color
Para cada color, proporcione un nombre descriptivo, el código hex y el rol funcional. Máximo un color de acento con saturación por debajo del 80%.
03
Definir la Sección Hero
Cree primeras impresiones llamativas usando tipografía con imágenes en línea (fotos pequeñas incrustadas entre palabras a la altura del tipo), estructuras asimétricas cuando la varianza supere 4, y un máximo de un CTA principal.
04
Describir los Estilos de Componentes
Especifique forma, color, profundidad de sombra y comportamiento de interacción para botones, tarjetas, campos de entrada, estados de carga y estados de error.
05
Codificar la Filosofía de Movimiento
Defina valores predeterminados de física de resortes (stiffness: 100, damping: 20), micro-interacciones perpetuas para componentes activos, orquestación escalonada para revelados de listas y restricciones de rendimiento que limitan la animación a transform y opacity únicamente.

02 Encuentra tu caso de uso

Cuándo usar la skill stitch-design-taste

Usar el skill stitch-design-taste en Claude Code o Codex cuando el trabajo sea de marca y sistema de diseño de este tipo. El alcance y los límites que siguen están tomados del archivo propio del skill.

Buen caso de uso

Generación de archivos DESIGN.md optimizados para la generación de pantallas de Google Stitch que codifican estándares de diseño premium y no genéricos
Proyectos que requieren una aplicación estricta de anti-patrones para evitar clichés de diseño de IA como brillos neón, la fuente Inter y contenido de relleno genérico
Dashboards de alta densidad o interfaces estilo cockpit que requieren numerales monoespaciados y escaneabilidad compacta

Conozca los límites

Proyectos que requieren la fuente Inter o fuentes genéricas del sistema para contextos premium
Interfaces que usan diseños de héroe centrados cuando la varianza supera 4, o diseños de tarjetas de tres columnas iguales
Diseños con emojis, sombras de resplandor neón exterior, cursores de mouse personalizados o clichés de redacción de IA como Elevate, Seamless, Unleash

Qué proporcionar

Intención del proyecto objetivoComprensión de si el proyecto es una galería de arte, una app diaria, una interfaz de cabina o de otra categoría, para evaluar la densidad, varianza y espectro de movimiento adecuados.

03 Dentro del skill

Reglas que el skill stitch-design-taste le da a Claude Code y Codex

5 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Línea Base de Atmósfera Predeterminada
La línea base predeterminada para proyectos nuevos es Varianza 8, Movimiento 6, Densidad 4. Estos valores deben adaptarse dinámicamente según la descripción del ambiente del usuario.
Sin Secciones de Héroe Centradas por Encima de Varianza 4
Los diseños de héroe centrado están prohibidos cuando la varianza supera 4. En su lugar, se debe forzar diseños de Pantalla Dividida, Alineados a la Izquierda o de Espacio Blanco Asimétrico.
El Viewport Móvil Usa min-h-[100dvh]
Las secciones de altura completa deben usar min-h-[100dvh], nunca h-screen, para evitar el comportamiento catastrófico de salto de la barra de direcciones en iOS Safari.
Objetivos de Toque Mínimos de 44px
Todos los elementos interactivos deben tener un objetivo de toque mínimo de 44px para garantizar la accesibilidad y usabilidad en dispositivos móviles.
Sin Elementos Superpuestos
El texto nunca debe superponerse con imágenes u otro texto. Cada elemento ocupa su propia zona espacial limpia con una separación espacial clara. No se permite el apilamiento de contenido con posición absoluta.

04 Ponlo a trabajar

Instalar stitch-design-taste en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar stitch-design-taste a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill stitch-design-taste

Forma genérica de CLI de skills para skills/stitch-skill/SKILL.md; el repositorio puede documentar su propia ruta.

Dale a la skill una primera tarea de trabajo de marca y sistema de diseño

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Generate a DESIGN.md for [project name], a high-density financial dashboard targeting professional traders. The atmosphere should feel like a cockpit interface — variance 8, motion 6, density 9. Use a single cool accent (cyan or sky blue) and ban all generic patterns. All numbers must be monospace, and the hero section should use asymmetric layout with inline image typography showing [trading floor photos] between headline words.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Verifique que todas las entradas de color incluyan nombre descriptivo, código hexadecimal y rol funcional, con un máximo de un color de acento con saturación por debajo del 80%
Confirme que la lista de antipatrones prohíba explícitamente la fuente Inter, las serifas genéricas, el negro puro, los resplandores neón, los emojis y los clichés de redacción de IA
Asegúrese de que las reglas de respuesta móvil impongan el colapso a una sola columna por debajo de 768px, objetivos de toque mínimos de 44px y min-h-[100dvh] para secciones de altura completa

En OpenDesign importe stitch-design-taste desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Rama main
Archivo de skill: skills/stitch-skill/SKILL.md Checksum de contenido registrado en la verificación; commit ccbc156
License: MIT De LICENSE. Casi duplicado de taste-design de Google Stitch; la versión de Google no se cuenta por separado.
Estrellas del repositorio: 86,946 Instantánea de GitHub tomada el 2026-09-14 para todo el repositorio Leonxlnx/taste-skill, que contiene 11 skills en este catálogo. No es una calificación ni un conteo de uso para stitch-design-taste.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

ResumenDefine el propósito del skill: generar archivos DESIGN.md para Stitch utilizando lenguaje de diseño semántico y estándares anti-genéricos.
Requisitos previosEnumera los requisitos de acceso: Google Stitch a través de labs.google/stitch y, opcionalmente, Stitch MCP Server para integración programática.
El objetivoDescribe siete objetivos de codificación: atmósfera visual, calibración de color, arquitectura tipográfica, comportamientos de componentes, principios de diseño, filosofía de movimiento, antipatrones.
1. Defina la atmósferaUse adjetivos evocadores a lo largo de los espectros de densidad, varianza y movimiento, con línea base predeterminada de Varianza 8, Movimiento 6, Densidad 4.
2. Definir la Paleta de ColoresIndique nombre descriptivo, código hexadecimal y función con un máximo de un color de acento por debajo del 80% de saturación, prohibiendo estéticas neón.
3. Establecer Reglas de TipografíaProhíba Inter en contextos premium y las serifas genéricas; exija fuentes distintivas con jerarquía mediante peso y color, no tamaño.
4. Definir la Sección HeroCree primeras impresiones impactantes usando tipografía integrada en imágenes, estructuras asimétricas con varianza superior a 4 y un máximo de un CTA.
5. Describir los Estilos de ComponentesEspecifique forma, color, profundidad de sombra y comportamiento de interacción, usando tarjetas solo cuando la elevación comunique jerarquía.
6. Definir Principios de DiseñoSin elementos superpuestos, heroes centrados prohibidos con varianza superior a 4, CSS Grid en lugar de Flexbox, contención con max-width, min-h-[100dvh] para altura completa.
7. Definir Reglas de Diseño ResponsivoColapso a columna única por debajo de 768px con enfoque mobile-first, objetivos táctiles de 44px, escalado tipográfico con clamp, imágenes integradas apiladas en móvil.
8. Codificar la Filosofía de MovimientoFísica de resorte por defecto con rigidez 100 y amortiguación 20, microinteracciones perpetuas, orquestación escalonada, solo transformaciones aceleradas por hardware.
9. Enumerar Antipatrones (Señales de IA)Reglas explícitas de PROHIBIDO: sin emojis, sin Inter, sin serifas genéricas, sin negro puro, sin resplandores neón, sin elementos superpuestos, sin clichés de IA, sin texto de relleno.

La descripción propia del Skill

"Skill de Sistema de Diseño Semántico para Google Stitch. Genera archivos DESIGN.md amigables para agentes que imponen estándares de UI premium y anti-genéricos: tipografía estricta, color calibrado, layouts asimétricos, micro-movimiento perpetuo y rendimiento acelerado por hardware."

Descripción del front-matter de SKILL.md. El archivo completo tiene alrededor de 11,732 caracteres. Lee el archivo completo en GitHub.

Stitch Design Taste

Ejecuta stitch-design-taste en una Marca Real y una Tarea de Trabajo de design-system.

Descargue OpenDesign, importe stitch-design-taste desde su enlace SKILL.md, pegue el prompt de arriba y lea el plan antes del resultado.

Descargar OpenDesign Ver todas las skills