Practica el Diseño de interfaces con ChatGPT y Codepen.io

Curso de ChatGPT para Product Designers: Diseño asistido por AI

Contenido del curso

Introducción a la inteligencia artificial y diseño de productos

Implementación práctica de inteligencia artificial en el diseño de productos

Cierre

12
Inteligencia Artificial en Diseño de Productos Digitales
03:33 min

Tomar examen

Practica el Diseño de interfaces con ChatGPT y Codepen.io

Resumen

En este Playground podrás experimentar con el resultado del Prompt: "Crea el HTML y CSS del punto 1 Header: Logotipo de la fundación Menú de navegación (Inicio, Acerca de nosotros, Adopción, Donación, Contacto)" que ChatGPT le proporcionó al profesor Daniel Torres Burriel.

¡También puedes practicar copiando y pegando el HTML y CSS con tus resultados para hacer tus propios experimentos!.

Leyder Sanchez

Estudiante

Aquí tienes el Header completo (HTML + CSS) usando exactamente la paleta de colores que definiste. Es limpio, moderno y alineado con una fundación de salud.

🧩 HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fundación Salud Solidaria</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="header">
    <div class="container">

        <!-- Logo -->
        <div class="logo">
            <img src="logo.png" alt="Logo Fundación">
            <span>Salud Solidaria</span>
        </div>

        <!-- Navegación -->
        <nav class="nav">
            <ul class="nav-menu">
                <li><a href="#" class="active">Inicio</a></li>
                <li><a href="#">Acerca de nosotros</a></li>
                <li><a href="#">Donación</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>

        <!-- Botón CTA -->
        <a href="#" class="btn-donar">Donar ahora</a>

    </div>
</header>

</body>
</html>

🎨 CSS (styles.css)

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables de color */
:root {
    --verde-principal: #27AE60;
    --verde-hover: #219150;
    --verde-claro: #E9F7EF;
    --blanco: #FFFFFF;
    --gris: #555;
}

/* Tipografía */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--verde-claro);
}

/* Header */
.header {
    background-color: var(--blanco);
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Contenedor */
.container {
    max-width: 1200px;
    margin: auto;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.logo span {
    font-size: 18px;
    font-weight: bold;
    color: var(--verde-principal);
}

/* Navegación */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-menu li a {
    text-decoration: none;
    color: var(--gris);
    font-size: 15px;
    font-weight: 500;
    position: relative;
    transition: all 0.3s ease;
}

/* Hover con línea */
.nav-menu li a::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    left: 0;
    bottom: -5px;
    background-color: var(--verde-principal);
    transition: width 0.3s;
}

.nav-menu li a:hover {
    color: var(--verde-principal);
}

.nav-menu li a:hover::after {
    width: 100%;
}

/* Activo */
.nav-menu li a.active {
    color: var(--verde-principal);
    font-weight: 600;
}

/* Botón Donar */
.btn-donar {
    background-color: var(--verde-principal);
    color: var(--blanco);
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.3s;
}

.btn-donar:hover {
    background-color: var(--verde-hover);
}

/* Responsive */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .logo span {
        font-size: 16px;
    }

    .btn-donar {
        padding: 8px 14px;
    }
}

✅ Resultado

Con este código tienes:

Identidad visual alineada a salud 💚
Header limpio y profesional
Botón de donación destacado
Base responsive lista para móvil

Tania Sosa

Patricio Sánchez Fernández

Lilian Zamora

Eduardo Monzón

Andrea Alejandra Mondaca Almonte

Victor Francisco Ramos

Luciana Cisneros

Raquel Palis

Vladyslav Kuchmenko

Juan Ortega

Andres Pinzon

Leonardo Aldana

Gabriela Lucia Echeverri Ahumada

Tatiana Nieto

Paulina Ramírez Rosas

Fernando Sánchez Mejía

Kevin Alzate Bedoya

EDER YEIS GONZALEZ MONTOYA

Practica el Diseño de interfaces con ChatGPT y Codepen.io

Introducción a la inteligencia artificial y diseño de productos

IA con ChatGPT para Product Design

Historia de la IA en el diseño de producto

Aplicación de IA en el Diseño de Productos Digitales

Registro y Acceso a ChatGPT Paso a Paso

Implementación práctica de inteligencia artificial en el diseño de productos

ChatGPT para prototipar personas y pantallas

ChatGPT para investigar negocio y usuarios

IA para crear wireframes y código HTML