Frontend y UI
design-skills · Terracotta
Acento arcilla sobre crema, titulares en DM Serif Display, lectura de formato largo.
Qué es
Una skill de guía para una interfaz editorial de tonos tostados por el sol: superficies crema #F3E9D8, un único acento terracota #C56A3C, titulares en DM Serif Display, JetBrains Mono. Afinada para blogs y storytelling.
A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.
Por qué importa para el diseño
- Un único color de acento, así el énfasis se mantiene escaso y los titulares llevan la jerarquía.
- Las superficies crema cálidas reducen el deslumbramiento en artículos largos frente a las páginas de blanco puro.
- Los titulares serif de display sobre cuerpo de texto marrón tinta marcan un ritmo editorial claro.
Qué cubre
- Brand
- Style foundations
- Rules: do
- Rules: don’t
- Component rule expectations
- Quality gates
Cómo instalarlo
design-skills · Terracotta
-
Clona el repositorio.
git clone https://github.com/bergside/awesome-design-skills -
Señálale a Codex el archivo de la skill.
skills/terracotta/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Apunta a Codex a los tokens terracota y crema antes de que escriba ningún componente.
-
Pide anatomía, variantes y estados por componente, con los tokens de espaciado nombrados de forma explícita.
-
Pide antipatrones y notas de migración al readaptar una UI existente e inconsistente.
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 ↗Más plugins de diseño para Codex
Frontend y UI Qué hace gpt-taste Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos. 
Sistemas de diseño Qué hace Stitch Design Taste Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas. 
Frontend y UI Qué hace image-to-code Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente. 
Frontend y UI Qué hace imagegen-frontend-mobile Genera flujos de pantallas de apps móviles premium como imágenes, no como código. 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.