AGENCIA DIGITAL · Claude Design · HTML

NovaPixel Studio — Prompt de diseño web para Claude AI

★★★★★4,6 3.275 descargas

Diseño y desarrollo de productos digitales Ideas audaces, experiencias precisas.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático para **NovaPixel Studio**, estudio ficticio de diseño de productos digitales. Usa **HTML5**, **Tailwind CSS (CDN)** y **JavaScript vanilla** en un único archivo. Replicar la estructura y estilo del sitio de referencia sin copiar texto ni imágenes originales.

**Paleta de colores** (hex):
- Fondo oscuro: #0A0A0A
- Fondo claro: #FFFFFF
- Primario: #1E40AF (azul marino intenso)
- Secundario: #3B82F6 (azul brillante)
- Texto principal: #111111
- Texto claro: #F9FAFB
- Acento: #F59E0B (ámbar)

**Tipografía**: Inter (Google Fonts) para títulos y cuerpo, peso 400‑700.

**Header**: barra full‑width, logo a la izquierda (texto "NovaPixel"), menú con items "Home", "Portfolio" (desplegable con 4 variantes), "About", "Blog", "Contact". Botón primario "Get in Touch" (outline azul) y botón secundario "Project Inquiry" (filled azul). Menú responsive con ícono hamburguesa.

**Footer**: fondo gris muy claro, enlaces a redes (Twitter, LinkedIn, Behance) y texto copyright "© 2026 NovaPixel Studio".

**Home – secciones**:
1. **Hero**: sección full‑screen con fondo de imagen abstracta (usar placeholder), título grande "Ideas audaces, experiencias precisas", subtítulo breve, botón "Learn More".
2. **Métricas**: grid 3‑columna con contadores animados (JS) mostrando "100+ Projects", "95% Client Satisfaction", "80%+ Conversion Rate".
3. **Portfolio latest**: grid de 4 tarjetas, cada una con imagen placeholder, título del proyecto, categoría entre paréntesis, breve descripción y efecto hover que eleva la tarjeta.
4. **Work Experience**: columna izquierda sticky con título "Work Experience", descripción y botón "Download CV" que enlaza a un PDF placeholder. Columna derecha muestra una lista vertical de experiencias (fecha, rol, empresa) con iconos circles.

**Otras páginas** (esqueleto):
- **Case Study**: header, banner del proyecto, descripción, galería de imágenes, resultados, footer.
- **Blog**: lista de artículos en cards, sidebar con categorías.
- **Contact**: formulario (nombre, email, mensaje) con validación básica, mapa embed placeholder.

**Interactividad**:
- Contadores que corren de 0 al número final en 3 s.
- Menú dropdown y responsive hamburger.
- Hover en botones y tarjetas (sombra y escala).
- Smooth scroll para anclas internas.

**Requisitos técnicos**:
- Todo el CSS vía `<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet">`.
- Incluir `<script>` al final del body para lógica de contadores y menú responsive.
- Mantener HTML semántico (header, nav, main, section, footer).
- Optimizar para carga rápida: imágenes con `loading="lazy"`.
- Compatibilidad con navegadores modernos.

Genera el código completo listo para copiar y pegar.

---

## 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.075 caracteres · 59 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú desplegable (Home, Pages, enlaces sueltos) y botones "Get in Touch" y "Project Inquiry"
1.2 Hero oscuro con fondo a pantalla completa, título grande y subtítulo introductorio
1.3 Bloque de métricas (Projects, Client Satisfaction, Conversion Rate) con animación de conteo
1.4 Galería de proyectos latest (4 tarjetas) con imagen, título, categoría y resumen
1.5 Sección Work Experience con texto explicativo y botón "Download CV"
1.6 Footer minimalista con enlaces de redes y texto de copyright

CASE STUDY

2.1 Header reutilizado
2.2 Imagen de cabecera del caso
2.3 Descripción detallada del proyecto
2.4 Galería de imágenes del proyecto
2.5 Testimonios y resultados
2.6 Footer reutilizado

BLOG

3.1 Header reutilizado
3.2 Lista de artículos en cards
3.3 Sidebar con categorías y últimas entradas
3.4 Footer reutilizado

CONTACT

4.1 Header reutilizado
4.2 Formulario de contacto (nombre, email, mensaje)
4.3 Mapa incrustado
4.4 Footer reutilizado

PROMPTS RELACIONADOS · AGENCIA DIGITAL

Otros prompts de la misma categoría

Ficha de marca

Nombre: NovaPixel Studio
Sector: Diseño y desarrollo de productos digitales
Claim: Ideas audaces, experiencias precisas

Bloques de la home

1.1 Header con logo, menú desplegable y botones de acción
1.2 Hero oscuro con fondo de imagen, título principal y breve descripción
1.3 Bloque de métricas con tres contadores animados
1.4 Galería de proyectos recientes en rejilla con tarjetas interactiva
1.5 Sección de experiencia profesional con texto descriptivo y botón de descarga de CV
1.6 Footer simple con enlaces de redes y copyright

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