Monochrome Stealth.
Cero sombras de caja. Cero colores primarios ruidosos. Total dominancia de grises finos, tipografía nítida y exactitud de píxeles. El Santo Grial de las interfaces de desarrolladores modernas.
Instalación del Framework 🦇
Para lograr el efecto 'Stealth' es absolutamente imperativo que tu `body` sea de color netamente negro (`#000000`). Ningún gris de fondo. Este contraste puro maximiza la efectividad de los delgados bordes `#333333` que delimitan nuestra geometría estructural.
Paso 1: Importar CSS Monocromático
Añade este documento a tus recursos para sobreescribir y aplanar todos los componentes visuales hacia su forma cruda.
src/css/theme-monochrome.css
/* =========================================================================
🦇 GOOGLE STITCH STYLES : MONOCHROME STEALTH (LEVEL 5)
========================================================================= */
:root {
--stitch-color-text: #ffffff;
--stitch-color-text-muted: #888888;
--stitch-color-bg: #000000;
--stitch-color-surface: #0a0a0a;
--stitch-color-surface-hover: #171717;
--stitch-color-border: #333333;
...
/* CERO BOX-SHADOWS en toda la declaración del código:
Se favorece el contraste de los grises profundos al #000 */
}
/* Revisa el archivo CSS completo en repo original. */Paso 2: Injectar el 'System Prompt'
Fuerza a la IA a que aplique exclusimas etiquetas precisas, logrando interfaces estéticas que parecen codificadas por ingenieros senior.
docs/AI_Prompt_Directive.md
Eres un Desarrollador Front-end senior actuando en un sistema UI puro y oscuro de alta tecnología (Stealth Design).
=========================================
OBJETIVO: Generar una vista terminal para [RELLENA AQUÍ].
=========================================
REGLAS ESTRICTAS:
- NO generes archivos CSS ni estilos en línea.
- Solo debes usar etiquetas HTML puras y limpias adosando las siguientes de nuestras clases:
- `.stitch-container` para paneles delimitadores.
- Tipografías nítidas: `.stitch-h1`, `.stitch-h2`, `.stitch-body` y `.stitch-muted`. Emplea `
` para ritmos limpios.
- Componentes minimalistas: `.stitch-btn-primary`, `.stitch-btn-outline`.
- Formularios lineales: `.stitch-form-group`, `.stitch-input`. Evita los colores pasteles a toda costa.
Entrega la maqueta HTML más refinada y limpia posible.01 / Contenedores y Texto
Minimalismo Lineal
Las tipografías son austeras y nítidamente legibles sobre el fondo oscuro absoluto. Notarás la carencia absoluta de colores. Es puro contraste de grises.
Referencia suplementaria de contexto oscuro.Ver HTML
<!-- Mismo HTML limpio y semántico. Estética técnica extrema -->
<div class="stitch-container">
<h1 class="stitch-h1">Minimalismo Lineal</h1>
<p class="stitch-body">Sin sombras flotantes ni adornos.</p>
</div>03 / Entradas de Datos
04 / Telemetría (Badges)
05 / Paneles Desacoplados
Los contenedores tienen un leve aclarado en el hover (`#0a0a0a` a `#171717`). Esto engaña al ojo para separar planos de UI sin tener que meter las sucias sombras desenfocadas o distractorias.
05.X / Componente Modal de Crisis
06 / Data Matrix Log
| Build Node ID | Commit SHA | Build Time | Status |
|---|---|---|---|
|
Node-us-east-1 Deploy via
Git
|
a3b9c2f | 48s | Ready |
|
Node-eu-west-3 Manual
Trigger
|
bf08ea1 | 122s | Fail |
Gráficos y Líneas de Tiempo
Visualización de datos construida 100% con CSS. Ideal para Dashboards sin librerías externas.
Bar Chart Horizontal
Donut Chart (Conic Gradient)
Timeline (Historial de Actividad)
.stitch-grid-*.
Toasts, Empty States y Steps
Micro-interacciones y estados vacíos para flujos de usuario profesionales.
Toast Notification (Simulación Fija)
Empty State (Sin Datos)
Step Indicator (Onboarding)
Inputs Avanzados y Dropzones
Controles de formulario de nivel Enterprise: búsquedas con iconos, chips y zonas de arrastre.