© 2026 ESTHER不二 (esthersjw) | CC BY-NC-SA 4.0 El uso de este Skill requiere atribución al autor original, está prohibido su uso comercial y cualquier modificación debe compartirse bajo la misma licencia.
Condición de activación: Se activa cuando el usuario solicita crear páginas HTML, páginas personales, páginas de tutoriales, páginas de presentación, landing pages, páginas de eventos, páginas tipo aplicación, portafolios, o cualquier tarea relacionada con diseño frontend. También se activa cuando el usuario dice "hacer imagen y texto", "tarjeta de imagen y texto", "imagen y texto para Xiaohongshu", "convertir artículo a tarjeta", "convertir a imagen y texto", o "hacer tarjeta".
Modo de uso (Flujo de trabajo de 7 pasos)
Paso 1: Aclarar los requisitos
Pregunte al usuario las siguientes 5 preguntas:
- Tipo — ¿Tutorial/Presentación/Divulgación? ¿Página de evento/Landing? ¿Aplicación/Funcional? ¿Tarjeta de imagen y texto? ¿Maquetación de WeChat?
- Audiencia — ¿Para quién es? ¿Nivel técnico?
- Número de secciones — ¿Aproximadamente cuántas pantallas de contenido?
- Materiales — ¿Qué textos/imágenes/datos hay disponibles?
- Restricciones estrictas — ¿Qué debe incluirse obligatoriamente? ¿Hay algún color de marca de un colaborador?
Paso 2: Leer las especificaciones
- Lectura obligatoria
brand-dna.md— Confirmar las especificaciones básicas de la marca. - Según el tipo, elegir el archivo de escenario correspondiente:
- Tipo tutorial/presentación/divulgación →
references/scene-tutorial.md - Página de evento/charla/Landing →
references/scene-landing.md - Tipo aplicación/funcional (tablero/estantería/Canvas) →
references/scene-app.md - Tarjeta de imagen y texto/imagen y texto para Xiaohongshu/convertir artículo a tarjeta →
references/scene-cards.md - Maquetación de WeChat/para distribución →
references/scene-wechat.md
- Tipo tutorial/presentación/divulgación →
Paso 3: Copiar la plantilla
Seleccionar la plantilla correspondiente de assets/ como punto de partida:
- Tutorial →
assets/template-tutorial.html - Página de evento/Landing →
assets/template-landing.html - Tipo aplicación/funcional →
assets/template-app.html - Tarjeta de imagen y texto →
assets/template-cards.html
Empezar modificando la plantilla, no desde cero.
Paso 4: Elegir combinaciones de layout
Seleccionar de 3 a 5 modos de layout de references/layouts.md y asignar un layout diferente a cada sección.
Cada sección debe tener un layout diferente.
(Para modo de tarjeta de imagen y texto: consultar las técnicas de diseño recomendadas en scene-cards.md y elegir una técnica diferente para cada página.)
Paso 5: Elegir componentes para rellenar
Seleccionar componentes de references/components.md para llenar cada sección.
Regla estricta: Prohibido usar cualquier estilo HTML por defecto. Todos los bloques de cita, listas, tablas y tarjetas deben usar el código correspondiente de components.md. No está permitido usar <blockquote> por defecto, citas con border-left por defecto, <ul>/<ol> sin estilo, ni <table> por defecto. Si no se encuentra un componente adecuado en components.md, diseñar uno que cumpla con las especificaciones de brand-dna.md, pero nunca usar los estilos por defecto del navegador.
Paso 6: Autoevaluación
Revisar punto por punto contra references/checklist.md:
- P0 debe cumplirse todo — Cualquier fallo requiere corrección.
- P1 debería cumplirse — Intentar satisfacerlo.
- P2 es opcional — Es un plus.
(Para modo de tarjeta de imagen y texto: revisar adicionalmente el Checklist al final de scene-cards.md; para modo de WeChat: revisar adicionalmente el Checklist al final de scene-wechat.md, verificando punto por punto si los títulos tienen saltos de línea no semánticos o palabras en inglés partidas.)
Paso 7: Entrega
Generar el archivo HTML final, asegurándose de que se pueda abrir directamente en un navegador.
Referencia rápida por tipo de escenario
| Tipo | Archivo de escenario | Plantilla |
|---|---|---|
| Tutorial/Presentación/Divulgación | references/scene-tutorial.md | assets/template-tutorial.html |
| Página de evento/Charla/Landing | references/scene-landing.md | assets/template-landing.html |
| Tipo aplicación/funcional | references/scene-app.md | assets/template-app.html |
| Tarjeta de imagen y texto/Xiaohongshu | references/scene-cards.md | assets/template-cards.html |
| Maquetación de WeChat | references/scene-wechat.md | assets/template-wechat.html |
Principios clave
- Empezar modificando la plantilla, no desde cero — Las plantillas ya incluyen las variables de marca y la estructura base.
- Cada sección debe tener un layout diferente — Evitar la monotonía eligiendo modos distintos de layouts.md.
- Siempre ejecutar el checklist después de terminar — P0 debe cumplirse todo para poder entregar.
Prohibiciones
Cumplir estrictamente con la lista de prohibiciones de brand-dna.md, no se repite aquí. El límite fundamental: que al hacer una captura de pantalla y publicarla en Twitter nadie diga "otra vez hecho por IA".