Explica como si tuviera 5 años con un artefacto HTML
De Wikiprompt, la enciclopedia libre de prompts
Explica como si tuviera 5 años con un artefacto HTML Un mensaje conciso que obligue a la IA a generar una página HTML interactiva con imágenes grandes y texto mínimo, ideal para simplificar conceptos técnicos complejos.
Contenido del PromptGuardar
🌐
Here is the Spanish translation of your HTML artifact, preserving all placeholders, structure, and technical elements as requested.
```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explicación simple: [X]</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
}
.card {
background: white;
border-radius: 16px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
max-width: 800px;
margin: 20px auto;
padding: 30px;
text-align: center;
}
h1 {
color: #2c3e50;
font-size: 2.2em;
margin-bottom: 10px;
}
.subtitle {
color: #7f8c8d;
font-size: 1.2em;
margin-bottom: 20px;
}
.big-image {
width: 100%;
max-height: 300px;
object-fit: cover;
border-radius: 12px;
margin: 20px 0;
}
.step {
background: #ecf0f1;
border-left: 6px solid #3498db;
padding: 15px;
margin: 15px 0;
border-radius: 8px;
font-size: 1.1em;
}
.highlight {
background: #f9e79f;
padding: 5px 10px;
border-radius: 6px;
font-weight: bold;
}
.note {
background: #e8f8f5;
border-left: 6px solid #1abc9c;
padding: 15px;
margin: 15px 0;
border-radius: 8px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', monospace;
overflow-x: auto;
text-align: left;
margin: 15px 0;
}
.param {
background: #e8daef;
padding: 3px 8px;
border-radius: 4px;
font-family: monospace;
color: #6c3483;
}
.image-text {
font-style: italic;
color: #555;
background: #fdfefe;
border-left: 4px solid #bbb;
padding: 8px;
margin: 10px 0;
}
.button {
background: #3498db;
color: white;
border: none;
padding: 12px 24px;
border-radius: 30px;
font-size: 1em;
cursor: pointer;
transition: 0.3s;
}
.button:hover {
background: #2980b9;
transform: scale(1.05);
}
@media (max-width: 600px) {
.card { padding: 15px; }
.big-image { max-height: 200px; }
h1 { font-size: 1.8em; }
}
</style>
</head>
<body>
<div class="card">
<h1>¿Qué es [X]?</h1>
<p class="subtitle">Te lo explico simple, sin tecnicismos.</p>
<!-- Imagen grande -->
<img src="https://via.placeholder.com/800x300?text=Imagen+grande+de+[X]" alt="Imagen ilustrativa de [X]" class="big-image">
<p>Imagina que [X] es como una <span class="highlight">caja mágica</span> que hace algo increíble. No necesitas saber cómo funciona por dentro, solo qué hace.</p>
<div class="step">
<strong>Paso 1:</strong> Tienes algo en la mano (por ejemplo, un dato, una imagen, un texto). Lo pones en la caja.
</div>
<div class="step">
<strong>Paso 2:</strong> La caja lo transforma. No preguntes cómo, solo confía.
</div>
<div class="step">
<strong>Paso 3:</strong> Sacas el resultado. ¡Listo! Eso es [X] en su forma más básica.
</div>
<!-- Otra imagen -->
<img src="https://via.placeholder.com/800x300?text=Proceso+simple" alt="Proceso simple" class="big-image">
<p>Para que lo veas con un ejemplo real:</p>
<div class="note">
<strong>Ejemplo:</strong> Si [X] fuera una tostadora, tú metes pan (entrada) y obtienes tostada (salida). No necesitas saber cómo se calientan las resistencias.
</div>
<!-- Código o parámetros -->
<p>Si ves algo así:</p>
<div class="code-block">
--ar 85mm 4K 24fps
</div>
<p>Son solo <span class="param">ajustes</span> que le dices a la caja. Como elegir el color de la tostada: <span class="param">--ar</span> es el tamaño, <span class="param">85mm</span> es el lente, <span class="param">4K</span> es la calidad, <span class="param">24fps</span> es la fluidez. Nada más.</p>
<!-- Texto dentro de imagen -->
<div class="image-text">
"Texto dentro de la imagen: 'Hola, soy [X]'"
</div>
<!-- Botón -->
<button class="button">Haz clic para saber más</button>
<p style="font-size:0.9em; color:#95a5a6;">No te preocupes por los detalles. Solo recuerda: [X] es una herramienta que hace algo útil por ti.</p>
</div>
</body>
</html>
```
Iniciá sesión para ver el prompt completo
Continuar con:
Al iniciar sesión, aceptás nuestros Términos de uso y Política de privacidad
Uso
Este prompt está diseñado para usarse con education. Copiá el contenido de arriba y pegalo en tu herramienta de IA preferida.
Para mejores resultados, personalizá los marcadores (indicados con corchetes o mayúsculas) con tus requisitos específicos.
Referencias
- Categoría: Prompts de education
- Fuente: https://x.com/AYi_AInotes/status/2091034488285417844
Discusión
0 comentarios