NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Manuscripta Docs" (plataforma de documentación para desarrolladores) usando HTML único, Tailwind CSS CDN y JavaScript vanilla. El proyecto debe replicar el diseño analizado:
- Paleta de colores: fondo principal #fefefe, texto principal #545454, acento rojo #d91e18 (iconos y resaltado), acento púrpura #7928a1 (keywords en código), blanco #ffffff para contenedores.
- Tipografía: fuente sans-serif moderna (interchangeable con "Inter" o "Helvetica Neue"), tamaños: display-2xl (48px), h2 (32px), body-l (18px), body-s (14px), display-xs (12px).
- Header: barra superior con logo a la izquierda, etiqueta de versión "v.1.3" y botón de menú hamburguesa (animación simple). Debe colapsar un sidebar lateral con enlaces de navegación (Getting Started
4.307 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.307 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Barra de navegación superior con logo, versión y menú colapsable
- 1.2 Breadcrumb y título principal de la página
- 1.3 Bloque introductorio con subtítulo y párrafo descriptivo
- 1.4 Sección de código CDN con bloque de resaltado
- 1.5 Sección Bundler con texto y comandos de terminal
- 1.6 Bloque de código JavaScript adicional
- 1.7 Sección “Next steps” con lista de enlaces internos
- 1.8 Lista de artículos populares en cuadrícula de tarjetas
- 1.9 Footer con enlaces de administración y créditos
- 1.10 Modal de búsqueda overlay
- 1.11 Indicador de progreso de lectura
ARTICLE QUICKSTART
- 1.1 Encabezado con título del artículo y breadcrumbs
- 1.2 Contenido enriquecido (texto, imágenes, bloques de código)
- 1.3 Navegación lateral a otras secciones del doc
ARTICLE INSTALLATION
- 1.1 Encabezado con título del artículo y breadcrumbs
- 1.2 Texto descriptivo y pasos de instalación
- 1.3 Bloques de código y ejemplos
ARTICLE EXAMPLES
- 1.1 Encabezado con título del artículo y breadcrumbs
- 1.2 Lista de ejemplos con miniaturas y descripciones
- 1.3 Código embebido para demostraciones
ARTICLE DEMOS
- 1.1 Encabezado con título del artículo y breadcrumbs
- 1.2 Descripción de demos y enlaces de vista previa
- 1.3 Código de integración
ARTICLE OVERVIEW
- 1.1 Encabezado con título del artículo y breadcrumbs
- 1.2 Visión general del producto y arquitectura
- 1.3 Diagrama e imágenes ilustrativas
Imagen generada con OpenRouter · Nano Banana (Gemini 2.5 Flash Image) · google/gemini-2.5-flash-image · 17/06/2026
PROMPTS RELACIONADOS · MODA
