CREATIVO · Claude Design · Tailwind · Vanilla JS

Línea Ágil – Plantilla UI limpia y consistente

★★★★★4,9 1.351 descargas

Línea Ágil es una biblioteca de componentes UI basada en Tailwind, diseñada para crear sitios web coherentes y ágiles. Incluye un layout completo con barra superior, sidebar colapsable, hero impactante y secciones de componentes y estilos.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo llamado "Línea Ágil" que reproduzca el diseño visual y la estructura del sitio analizado, sin copiar ningún texto original. Usa solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. 

**Requisitos de stack**
- `<script src="https://cdn.tailwindcss.com"></script>` para estilos.
- Todo el HTML debe estar en un solo documento, con clases Tailwind que representen la tipografía, colores y espaciados.
- JavaScript debe manejar la apertura/cierre del menú hamburguesa y la expansión de la barra lateral.

**Paleta de colores** (usar como variables Tailwind):
- Primario: #0D3B66
- Secundario: #FAF0CA
- Accent: #F4D35E
- Texto oscuro: #1A1A1A
- Fondo claro: #FFFFFF

**Tipografía**
- Fuente principal: "Inter", sans-serif (cargar desde Google Fonts).
- Títulos: peso 700, tamaño variable (display-2xl, display-xl, display-m).
- Texto cuerpo: peso 400, size lg.

**Estructura**
1. **Header superior** (`<header class="flex justify-between items-center p-4 bg-white border-b border-gray-200">`)
   - Logotipo (texto "Línea Ágil" + icono SVG ficticio).
   - Botón hamburguesa (`<button id="menuBtn" ...>`)
2. **Barra lateral** (`<nav id="sidebar" class="fixed inset-y-0 left-0 w-64 bg-gray-50 transform -translate-x-full transition-transform duration-200">`)
   - Enlaces: Home, Componentes, Estilos, Changelog, Soporte.
   - Botón secundario "Open Workspace".
3. **Hero** (`<section class="pt-16 pb-12 text-center bg-white">`)
   - `<h1 class="text-5xl font-bold text-primary">Línea Ágil</h1>`
   - `<p class="mt-4 text-lg text-gray-700">Biblioteca ligera de componentes UI para proyectos consistentes.</p>`
   - Botones CTA: "Obtener plantilla" (terciario) y "Explorar" (secundario, ancla #explore).
4. **Imagen ilustrativa** (`<img src="https://via.placeholder.com/1500x800" alt="Mockup" class="w-full mt-8"/>`).
5. **Bloque "Uso"** (`<section class="max-w-4xl mx-auto mt-12">`)
   - Título `<h2 class="text-3xl font-semibold">Uso</h2>`
   - Párrafo descriptivo.
6. **Sección Componentes** (`id="explore"`)
   - Cabecera con icono SVG ficticio y título "Componentes".
   - Enlace botón pequeño a Figma.
   - Grid responsive `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6` con tarjetas de componente. Cada tarjeta:
     * Nombre del componente.
     * Íconos y contadores para "Components" y "Variants".
     * Etiqueta "New" opcional.
7. **Sección Estilos**
   - Similar a Componentes, contiene tarjetas para "Colors" y "Typography".
8. **Footer** (`<footer class="mt-16 py-8 bg-gray-100 text-center text-sm text-gray-600">`)
   - Texto de copyright y enlaces ficticios.

**Interactividad**
- El botón hamburguesa toggles la clase `-translate-x-full` del sidebar.
- Los enlaces internos con `href="#explore"` hacen scroll suave (`behavior: 'smooth'`).
- Los botones con `target="_blank"` abren los enlaces a Figma.

**Accesibilidad**
- Añade atributos `aria-label` a botones y `role="navigation"` a nav.
- Usa `focus:outline-none focus:ring-2` en elementos interactivos.

**Salida**: Proveer el código HTML completo listo para copiar, con los estilos Tailwind inlined y el script de interacción al final del body.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

3.506 caracteres · 73 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra superior con logotipo y menú hamburguesa
1.2 Navegación lateral colapsable con enlaces principales y botón Workspace
1.3 Hero con título, descripción y CTA primaria y secundaria
1.4 Imagen ilustrativa del producto
1.5 Bloque "Uso" con texto explicativo
1.6 Sección "Componentes" con encabezado, botón Figma y grid de tarjetas de componentes
1.7 Sección "Estilos" con encabezado, botón Figma y grid de tarjetas de estilos
1.8 Footer minimalista con enlaces y redes sociales

COMPONENTES

2.1 Página genérica de detalle de componente (título, descripción, ejemplos, código)

ESTILOS

3.1 Página de paleta de colores (tarjetas con nombre y muestra)
3.2 Página de tipografía (ejemplos de fuentes, tamaños y pesos)

CHANGLOG

4.1 Lista de cambios y versiones del sistema UI

SUPPORT

5.1 Formulario de contacto y enlaces a documentación

PROMPTS RELACIONADOS · CREATIVO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Línea Ágil
Sector: Plantilla y biblioteca de componentes UI para diseñadores y desarrolladores web
Claim: Estructura limpia para proyectos consistentes

Bloques de la home

1.1 Barra superior con logotipo y menú hamburguesa
1.2 Navegación lateral colapsable con enlaces a Home, Componentes, Estilos, Changelog y Soporte, y botón de Workspace
1.3 Hero principal con título, descripción y dos botones de acción
1.4 Imagen ilustrativa del producto
1.5 Bloque "Uso" con texto descriptivo
1.6 Sección "Componentes" con encabezado, enlace a Figma y cuadrícula de tarjetas de componentes (nombre, estadísticas, etiquetas de nuevo)
1.7 Sección "Estilos" con encabezado, enlace a Figma y cuadrícula de tarjetas de estilos (colores, tipografía)
1.8 Footer sencillo con enlaces de información y redes sociales (implícitos)

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada

Línea Ágil – Plantilla UI limpia y consistente

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

COMPONENTES

ESTILOS

CHANGLOG

SUPPORT

Otros prompts de la misma categoría

CalleArte

Línea Aurora

Línea Íntima

Línea Negra