Cómo crear una página web con MGPanel y Claude

Crea tu página sin empezar desde cero

Necesitas una landing o una página nueva ya, pero no quieres renunciar al código limpio ni a poder iterar después.

Piensa en Claude como un colaborador invisible que redacta el primer borrador de maquetación: tú sigues siendo quien valida, ajusta y publica en el módulo de Editar Web de MGPanel. Así aceleras el arranque sin perder el timón del sitio.

Por qué tiene sentido usar Claude con MGPanel

MGPanel (www.mgpanel.co) está pensado para crear tu sitio web y gestionar clientes desde un mismo ecosistema. El módulo de Editar Web es donde vive el código por página y sección: encaja con un flujo en el que la IA produce borradores y tú los integras en una estructura versionada.

Según el informe The economic potential of generative AI (McKinsey Global Institute, 2023), el uso de herramientas generativas puede acelerar tareas de ingeniería de software en un orden de magnitud relevante cuando se combina con revisión humana. Traducción práctica: Claude te ahorra tiempo en el scaffolding; MGPanel te da el lugar donde ese código se guarda, prueba y publica con disciplina.  

Ver: https://www.mckinsey.com/capabilities/tech-and-ai/our-insights/the-economic-potential-of-generative-ai-the-next-productivity-frontier

Por qué no basta con «solo copiar y pegar»: el código generado puede incluir enlaces rotos, dependencias CDN innecesarias o scripts poco claros. La lógica es: generar → revisar → pegar por secciones / páginas → probar en borrador → publicar.

Pasos: de Claude a tu sitio en MGPanel

A. Generar el borrador con Claude

1. Abre una conversación nueva en https://claude.ai/new.
2. Pega uno de los prompts de ejemplo del subapartado «Prompts listos para Claude» (más abajo en esta misma sección) o adáptalo a tu negocio.
3. Pide explícitamente la salida separada en tres bloques: HTML, CSS y JavaScript (así encaja con las pestañas del editor de MGPanel).

B. Crear la página en el módulo de Editar Web de MGPanel

1. En el panel, ve a Sitio Web → Editar Web (requiere rol con permisos de programador).
2. En el bloque Sitio Web, pulsa «+» para crear una página nueva.
3. Completa al menos: nombre interno, título público (etiqueta <title>), URL amigable y descripción (meta descripción a nivel de página en el flujo de creación de página).

C. Crear la sección y pegar el código

1. En esa página, crea una sección nueva (no importada) con el asistente: nombre interno, código único generado y, si aplica, formato de JavaScript.
2. Abre la sección en el editor y pega el contenido en las pestañas HTML, CSS y JS que entregó Claude.
3. Revisa enlaces (href, src), imágenes (usa rutas de tu Gestor Multimedia cuando puedas) y elimina scripts de terceros en los que no confíes.

D. Guardar, previsualizar y publicar

1. Guarda con el botón Guardar o el atajo Ctrl + S (según la documentación interna de Editar Web).
2. Comprueba la vista en desarrollo (draft) antes de afectar la versión pública.
3. Publica según la configuración de tu cuenta: solicitud de publicación, snapshot o publicación automática.

Antes de cerrar: revisa seguridad y calidad

• No pegues en tu sitio código o scripts de fuentes que no entiendas; Claude puede equivocarse (alucinaciones).
• Respeta las políticas de Anthropic y el tratamiento de datos al subir información sensible al chat.
• CDN y librerías externas añaden dependencias; valora si puedes resolverlo con CSS y JS propios en la sección.

Prompts listos para Claude

Prompt 1 — Landing simple MGPanel-friendly

Actúa como desarrollador front-end. Genera una landing de una sola columna para [DESCRIBE TU NEGOCIO: sector, nombre, propuesta de valor].

Requisitos:
- HTML5 semántico (header, main, section, footer).
- CSS en un solo bloque, sin frameworks; diseño responsive con mobile-first.
- JavaScript mínimo solo si hace falta (por ejemplo menú móvil); sin jQuery.
- Sin formularios con envío real; si incluyes formulario, que sea solo maqueta con labels accesibles.
- Entrega tres bloques claramente etiquetados: HTML, CSS y JavaScript (si no hay JS, di "JavaScript: vacío").
- Comentarios breves en español donde ayude.

Prompt 2 — Página con hero + beneficios + CTA

Necesito código para una página de "servicios profesionales" con: hero con título y subtítulo, tres tarjetas de beneficios con iconos simulados (SVG inline o Unicode), bloque de testimonio ficticio claramente marcado como ejemplo, y CTA final.

Restricciones para usarlo dentro de MGPanel Editar Web (una sección con pestañas HTML / CSS / JS):
- Colores en variables CSS :root.
- Tipografía: sistema-ui o pila segura; si usas Google Fonts, indícalo en un comentario en CSS (yo pegaré el link en head global si lo necesito).
- Separar siempre HTML, CSS y JS en bloques distintos listos para copiar.
- Español en los textos visibles.

Una voz del equipo

La primera vez que probamos este flujo en serio fue con una landing sencilla: alguien del equipo abrió Claude, pidió HTML/CSS separados, y en menos de media tarde ya teníamos algo navegable en el módulo de Editar Web en vista en desarrollo (draft). No era el diseño final, pero dejó de ser la pantalla en blanco que paraliza. Ese “ya está montado, ahora solo lo pulimos” es exactamente lo que buscábamos.