Sistemas de diseño

Beautiful Shadows

Tres utilidades de sombra de Tailwind listas para usar, con elevación neutra en capas.

Qué es

Un conjunto de clases de sombra arbitraria de Tailwind exactas en tres intensidades. Cada una apila varias capas neutras de baja opacidad en lugar de la escala de sombra por defecto de Tailwind.

Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows wit
Del SKILL.md original

Por qué importa para el diseño

  • La elevación se mantiene neutra, sin un brillo de color que tiña la superficie de debajo.
  • Tres intensidades fijas corresponden a controles, tarjetas y medios de hero respectivamente.
  • Las capas apiladas de baja opacidad se leen como profundidad real en vez de una sola sombra tosca.

Qué cubre

  • Use when
  • Shadow utilities
  • Examples
  • Usage rules
  • Avoid

Cómo instalarlo

Beautiful Shadows

  1. Clona el repositorio.

    git clone https://github.com/MengTo/Skills
  2. Señálale a Codex el archivo de la skill.

    agent-skills/web-design/beautiful-shadows/SKILL.md
  3. Luego describe la interfaz que quieres. Codex sigue la skill.

Cómo ejecutarlo con Codex

  1. Pídele a Codex que aplique la utilidad md a tarjetas, paneles y popovers.

  2. Reserva la utilidad lg para medios de hero y contenedores tipo modal.

  3. Empareja cada sombra con un relleno de superficie limpio y un radio coherente.

Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.

Más en la lista codex-design ↗

Siguiente paso

Diseña con Open Design, sin montar nada

Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.