Cualquiera puede hacer su propia página web con Agente: desde la estructura de la página web hasta la construcción de la estación de IA.

Ahora cualquiera puede crear sus propias páginas web con un agente.

Abra una herramienta de programación de IA (por ejemplo, Codex, Cursor, Claude Code) y dígale: "Ayúdame a crear una página de inicio personal ". Puede crear archivos, escribir código, ajustar estilos y luego iniciar una vista previa del navegador. Completar la primera versión de la página web, se ha vuelto muy sencillo.

Lo que realmente abre la brecha es la segunda ronda de enmiendas.

Una persona que entiende la estructura de una página web le dice al agente:

"Comprobar la ruta relativa de la carpeta de imágenes ".

"Cambiar el lado del teléfono a un diseño de columna individual ".

"Solo ajuste CSS, no modifique el contenido HTML. "

Tales instrucciones son claras y precisas, y el agente puede localizar el problema y completar las modificaciones rápidamente.

Y las personas que no entienden la estructura, generalmente solo pueden decir:

"¿Por qué no hay fotos? "

"Un poco más alto "

"¿Por qué no es lo mismo que antes? "

El agente solo puede seguir adivinando, el rango de modificación es cada vez más grande y la página es cada vez más difícil de controlar.

Por lo tanto, HTML, CSS, JavaScript, directorio raíz, rutas relativas, diseño responsivo, estos conocimientos de páginas web aparentemente tradicionales, en la era de la IA, se han convertido en la capacidad central de usar agentes.

No necesita escribir a mano cientos de líneas de código, pero necesita usar estos conceptos para describir el problema, definir el alcance de las modificaciones y juzgar si el resultado final es correcto.

Este artículo se divide en dos partes:

La primera parte, conocer el proyecto de página web desde cero y completar una página web simple con sus propias manos.

En la segunda parte, entra en la batalla real del agente, con una página de inicio personal de estilo punk amarillo, experimenta todo el proceso de "buscar referencias → diseño de análisis → generación de páginas web → modificación continua → aceptación del navegador".

---

Primero, entender las páginas web, sitios web y aplicaciones web

Estos tres conceptos a menudo se confunden.

Se puede entender simplemente:

• Página web: una página de papel;
• Sitio web: un libro;
• Aplicación web: una máquina.

Lo que estás haciendo ahora es una página web.

En el futuro, se unirá a varias páginas como exhibición de obras, blog, información de contacto, etc., y se convertirá gradualmente en un sitio web.

---

En segundo lugar, un proyecto de página web es en realidad un conjunto de estructuras de archivos

Un proyecto de página web no es sólo un archivo HTML.

Por lo general incluye:

• Estructura de la página;
• Archivo de estilo;
• guión interactivo;
• Recursos de imagen;
• Descripción de proyectos.

Se puede entender como una casa:

El directorio raíz del proyecto es la casa en sí, con HTML, CSS, JavaScript e imágenes ubicadas en habitaciones separadas.

Una estructura común es:

my-first-site/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── avatar.jpg
└── README.md

Entre ellos:

• index.html Es una página de entrada;
• css El estilo de almacenamiento;
• js Interacción de almacenamiento;
• images almacenar imágenes;
• README.md Documente la descripción del artículo.

El primer paso para un principiante, no hay necesidad de apresurarse a escribir código.

Crear primero:

• una carpeta de proyectos;
• css, js, imágenes tres subcarpetas;
• Un index.html;
• Un readme.md.

Después de emparejar la estructura, el agente sabe dónde debe colocar el archivo.

---

¿Qué son responsables de HTML, CSS y JavaScript?

Un botón en una página web, generalmente requiere tres archivos para completar juntos:

HTML:

Decida lo que tiene la página.

Css:

Decida cómo se ve la página.

Javascript:

Decida qué sucede después de hacer clic.

Puede ser registrado como:

HTML es el esqueleto, CSS es la apariencia y JavaScript es el comportamiento.

Por ejemplo:

Si quieres modificar el texto, busca HTML.

Si quieres cambiar el color, busca el CSS.

El botón no responde → Comprobar JavaScript.

Una vez que los archivos están separados, las páginas web son más fáciles de mantener y el agente es más fácil de localizar los problemas.

---

¿Por qué es importante index.html?

En un proyecto de página web simple,index.html Por lo general, es la página principal y también es el archivo de entrada.

Cuando un usuario abre un sitio web, el servidor suele dar prioridad a:

index.html

Así que:

• debe estar en el directorio raíz del proyecto;
• No cambie su nombre a voluntad;
• El nombre del archivo está en minúsculas.

Una página HTML se divide en dos partes:

head
└── 网页设置

body
└── 用户看到的内容

El head suele contener:

• Título de la página;
• Codificación de caracteres
• Adaptación del teléfono móvil;
• Direcciones CSS y JavaScript.

El cuerpo incluye:

• título;
• texto;
• imagen;
• botón;
• Contenido de la página.

Estructura común:

body
├── header
├── main
│   ├── section
│   ├── section
│   └── section
└── footer

Estas etiquetas ayudan a los navegadores y motores de búsqueda a entender la estructura de la página.

---

5 - Hacer una página web más pequeña a mano

Ahora crea la primera página que realmente se abre.

Primero, coloque el avatar en:

images/avatar.jpg

Luego edit index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>

<body>

<h1>你好，这是我的第一个网页。</h1>

<p>我正在学习网页是怎样组成的。</p>

<img src="images/avatar.jpg">

<button id="hello-button">
和我打个招呼
</button>

</body>
</html>

Después de guardar, abra con un navegador.

Si lo ves:

• título;
• texto;
• imagen;
• botón;

El HTML se ha ejecutado con éxito.

Si la imagen no se abre, normalmente se comprueba:

• Nombre del archivo;
• Mayúsculas y minúsculas
• Extensión;
• El camino.

Por ejemplo:

images/avatar.jpg

Debe coincidir exactamente con el documento real.

---

El CSS hace que la página web tenga un sentido de diseño

HTML es responsable del contenido y CSS es responsable de la visión.

en:

css/style.css

Adición:

body {
  margin:0;
  padding:48px;
  background:#f5f5f5;
  font-family:Arial,sans-serif;
}

img {
  width:240px;
  border-radius:24px;
}

button {
  padding:12px 20px;
  border-radius:999px;
}

Después de guardar la actualización:

• Cambios de contexto;
• reducción de imagen;
• Los botones aparecen redondeados.

CSS se puede entender fácilmente:

Encontrar a quién → modificar qué → cambiar en qué.

---

JavaScript hace que las páginas web sean interactivas

Conexión:

<script src="js/script.js"></script>

Y luego en:

js/script.js

Adición:

document
.querySelector("#hello-button")
.addEventListener("click",()=>{
 alert("你好呀！");
});

Para actualizar la página, haga clic en el botón.

Si aparece una ventana emergente, HTML, CSS y JavaScript se han conectado con éxito.

---

La ruta del archivo es el lugar más fácil de error para los principiantes.

Las páginas web necesitan saber dónde están las imágenes, CSS, JavaScript.

Este es el camino.

Por ejemplo:

css/style.css

js/script.js

images/avatar.jpg

Todos son caminos relativos.

Ten en cuenta tres reglas:

El mismo catálogo:

file.jpg

El siguiente nivel:

folder/file.jpg

Nivel superior:

../file.jpg

Al mismo tiempo:

• El nombre del archivo no puede ser incorrecto.
• Las letras mayúsculas y minúsculas no pueden estar equivocadas;
• La extensión no puede estar mal.

Muchas "imágenes desaparecen" y "estilos no se cargan", esencialmente son problemas de ruta.

---

IX. Desarrollar el proceso correcto para modificar la página web

Los hábitos más importantes en el desarrollo web:

修改
 ↓
保存
 ↓
刷新
 ↓
验证

Cambia un lugar a la vez.

No modifique al mismo tiempo:

• El HTML;
• css;
• Javascript.

De lo contrario, hay un problema y es difícil determinar la causa.

Este hábito también se aplica al agente.

Después de que el agente haya modificado el código, todavía necesitará:

Abra el navegador → Compruebe el efecto → Determine si es correcto.

---

X. Ingrese a la estación del agente desde la página web escrita a mano

El conocimiento anterior no está destinado a convertirte en un programador.

Sólo tienes que dominar tres cosas:

Primero, conocer las palabras clave.

Por ejemplo:

• css;
• Archivo de ruta;
• El directorio raíz;
• Responsive.

De esta manera, le puede decir al agente exactamente dónde está el problema.

Segundo, mantenga el hábito de verificación.

Después del cambio de agente:

Modificar → Comprobar el navegador → Continuar con la optimización.

Tercero, tener la capacidad de juicio.

La imagen se divide:

Puede ser un problema de ruta.

El botón no responde:

Puede que JavaScript no esté conectado.

Página móvil caótica:

Puede ser un problema de diseño responsivo.

No tienes que arreglarlo tú mismo, pero sabes dónde pedir al agente que lo compruebe.

---

XI. Crear una página personal de Punk Amarillo con Agente

Ahora entra en la batalla real completa.

Objetivos:

Hacer una página personal de estilo punk amarillo.

Contenidos:

• Nombre: punk
• Introducción: Uso IA, diseño y contenido para convertir ideas en obras;
• Estatus: MBA de la Universidad de Ciencia y Tecnología de China, diseñador jefe de HerName, decano ejecutivo de Stanley Business School;
• Páginas: Sobre mí, obras, información de contacto;
• Fotografía: images/punk.jpg.

---

Paso 1: Buscar páginas de referencia

No deje que el agente empiece a escribir.

Primero busque 1 ~ 2 referencias de diseño.

Preocupado:

• Colocación;
• Layout de la página;
• Fuente de nivel;
• Escala de imagen;
• Modo dinámico.

No copiar:

• El logotipo;
• imagen;
• Copiación;
• código fuente.

Lo que se aprende es la ley del diseño.

---

Paso 2: Permita que el agente analice primero, no cree

La primera instrucción solo hace análisis de diseño.

Diles al agente:

• Análisis de la estructura de la página;
• Análisis de color;
• Análisis de fuentes;
• Botón de análisis;
• Análisis del cambio del terminal del teléfono móvil;
• Resumen del ADN de diseño.

No dejes que escriba código de inmediato.

La razón es muy simple:

Cuanto más rápido se escriba el código, más retrabajo se producirá.

---

Paso 3: Confirme el diseño y deje que el agente lo haga.

Requisitos de fabricación:

• Utilice HTML nativo, CSS, JavaScript;
• La estructura del documento es clara;
• No se utiliza un marco;
• Uso de sus propias imágenes y contenidos;
• Mantenerse original;
• Completar las pruebas del lado de la computadora y el lado del teléfono.

Al mismo tiempo, se requiere al agente:

• Iniciar la vista previa local;
• 1440 × 900;
• Examen 390 × 844;
• botón de verificación;
• comprobar las imágenes;
• Compruebe los errores de la consola.

No escuches a los agentes decir "Terminado ".

Asegúrese de ver los resultados del navegador.

---

XII. Cómo continuar optimizando la primera edición

La primera edición no suele ser perfecta.

No digas cuando cambies:

"Un poco más alto ".

Esta descripción es demasiado vago.

Debería decir:

"Manteniendo la estructura sin cambios, aumenta el brillo del fondo amarillo ".

"Avatar ampliado en un 20%, pero manteniendo la pantalla completa ".

"Solo modifica CSS, no cambia HTML ".

Cuanto más específico sea, más fácil será ejecutar con precisión el agente.

---

XIII Aceptación final

Entregar al agente:

Inspección:

• Desktop final;
• terminal móvil;
• Carga de imágenes;
• CSS de carga;
• JavaScript;
• Función de botón;
• Página de desplazamiento;
• Error de consola.

Problemas encontrados:

Reparación → Revisar.

---

XIV, despliegue en línea

En el ordenador:

localhost

Sólo puede visitarlo.

La implementación es cargar el proyecto al servidor público.

Para proyectos simples de HTML / CSS / JavaScript, puede utilizar las páginas de GitHub.

Procesos básicos:

1. Crear un repositorio GitHub;
2. Cargar archivos de proyecto;
3. Confirme que index.html está en el directorio raíz;
4. Abrir páginas;
5. Adquisición de una dirección web pública;
6. Compruebe la página web de nuevo.

Verificación previa a la línea:

No subir:

• API clave;
• llamadas telefónicas privadas
• Dirección de domicilio;
• información interna;
• Imagen no autorizada.

---

Conclusión: El desarrollo web en el futuro, no es si escribirá código, sino si describirá problemas

La IA hace que la creación de páginas web sea fácil.

Pero lo que realmente determina el resultado no es si deja que el agente genere el código, sino:

¿Conoces la estructura de la página web?

¿Puedes describir el problema con precisión?

¿Sabes cómo aceptar el resultado?

HTML, CSS, JavaScript, estos conocimientos básicos no serán obsoletos debido a la aparición de AI.

Más bien, se están convirtiendo en el nuevo lenguaje para que las personas colaboren con los agentes.

En el futuro del desarrollo web, es probable que no sea el programador que escriba código solo, sino que las personas que entienden la estructura completen rápidamente el diseño, la implementación y la iteración a través del agente.