PortfolioFlow

Skill de PortfolioFlow

Convierte una frase en un sitio web de portafolio completo para diseñadores.

PortfolioFlow está orientado a 5 grandes disciplinas del diseño (Paisajismo / Gráfico / Interiores / Industrial / UX) como una skill para crear portafolios. El usuario describe su necesidad en una frase en chino o inglés, y esta skill genera automáticamente:

• Sitio frontal completo del portafolio (Hero + Cuadrícula de proyectos + Página de detalle + Acerca de + Asistente de IA)
• Panel de administración para el diseñador (Inicio de sesión + CRUD de proyectos + Generación de descripciones con IA + Panel de estadísticas)
• Personalización de colores del tema (5 temas predefinidos + combinación libre con colores hex proporcionados por el usuario)
• Capacidades full-stack con Edge Functions / KV / Middleware / Autenticación JWT

Finalmente, se despliega con un solo clic en EdgeOne Pages mediante edgeone-pages-deploy.

---

Flujo de ejecución después del disparo (Árbol de decisiones)

Al recibir una solicitud del usuario que cumple con las condiciones de activación de esta skill, ejecutar en el siguiente orden:

Paso 1 — Recopilar información obligatoria

Si la descripción del usuario carece de alguno de los siguientes campos, preguntar al usuario de una sola vez (no preguntar repetidamente):

Campo	Obligatorio	Ejemplo	Valor predeterminado
Nombre del diseñador	✅	"李博" / "Alex Chen"	Nombre de usuario
Disciplina de diseño	✅	Paisajismo / Gráfico / Interiores / Industrial / UX	Preguntar y elegir uno
Título del sitio	❌	"Lee · Portafolio de Diseño Paisajista"	"{Nombre} Portafolio"
Declaración de posicionamiento en una frase	❌	"Devolver el diseño a la tierra y la habitación humana"	Valor predeterminado según la disciplina
Esquema de tema	❌	"Bosque Nocturno" / color hex	"Bosque Nocturno"
Número de proyectos prellenados	❌	3-6	3 proyectos de ejemplo por defecto

Ejemplo de pregunta:

Necesito confirmar algunos datos clave:

1. ¿Cuál es tu disciplina de diseño? (Paisajismo/Gráfico/Interiores/Industrial/UX)
2. ¿Nombre del diseñador?
3. ¿Esquema de tema? (Bosque Nocturno/Beige Amanecer/Azul Océano Profundo/Naranja Sol Cálido/Blanco Minimalista, o proporciona un color hex)

Paso 2 — Determinar la estructura del proyecto

view uno de los siguientes archivos de referencia y cargar el contenido correspondiente según la disciplina del usuario:

• Paisajismo / Interiores / Industrial → Sección correspondiente en references/portfolio-knowledge.md
• Gráfico / UX → Mismo archivo

Paso 3 — Generar el esqueleto del proyecto

Crear los siguientes archivos en /tmp/portfolio-{slug}/ (Prohibido usar cd para entrar en rutas con caracteres especiales, todas las rutas deben ser absolutas o rutas limpias en ~/Desktop/):

portfolio-{slug}/
├── index.html              # Página principal frontal (usar plantilla de templates/index.html)
├── portfolio-detail.html   # Detalle del proyecto
├── admin.html              # Panel de administración
├── login.html              # Página de inicio de sesión
├── assets/                 # Recursos de imagen (subidos por el usuario o imágenes de relleno)
├── functions/
│   ├── api/
│   │   ├── auth.js         # Autenticación de inicio de sesión + Emisión de JWT (referencia: references/auth-jwt.md)
│   │   ├── portfolios.js   # CRUD de proyectos (referencia: references/portfolio-crud.md)
│   │   ├── generate.js     # Generación de descripciones con IA (referencia: references/ai-generate.md)
│   │   └── stats.js        # Estadísticas de visitas (referencia: references/stats-kv.md)
│   └── _middleware.js      # Validación JWT + CORS
└── README.md

Paso 4 — Inyección de colores del tema

El esquema de tema seleccionado por el usuario debe inyectarse simultáneamente en:

• Las variables CSS en <style> de index.html
• La misma ubicación en admin.html
• La misma ubicación en login.html

Los valores específicos de las variables CSS de los 5 temas predefinidos se encuentran en references/design-system.md.

Si el usuario proporciona un color hex (como #FF6B6B), generar la escala de colores complementaria según el algoritmo de "conversión de hex a tema completo" en references/design-system.md.

Paso 5 — Invocar la skill de despliegue

Después de generar todos los archivos, invocar la skill edgeone-pages-deploy para realizar el despliegue:

Frase de activación: deploy this portfolio to EdgeOne Pages
Directorio del proyecto: ~/Desktop/portfolio-{slug}/

Después de un despliegue exitoso, es obligatorio:

1. Guiar al usuario en la consola de EdgeOne Pages para vincular los siguientes espacios de nombres KV (operación manual única):
   • Nombre de variable PORTFOLIO_USERS ← Base de datos de cuentas de usuario
   • Nombre de variable PORTFOLIO_WORKS ← Base de datos de proyectos
   • Nombre de variable PORTFOLIO_STATS ← Estadísticas de visitas
   • Importante: Los nombres de variable deben coincidir estrictamente. Después de la vinculación KV, se accede en Edge Function como variable global, no como env.PORTFOLIO_WORKS (esta es una norma especial de EdgeOne Pages).
2. Realizar un nuevo despliegue para que la vinculación KV tenga efecto.
3. Devolver la URL de acceso + las credenciales predeterminadas del administrador (se escriben automáticamente en KV durante el primer despliegue).

---

Tabla de enrutamiento (references/ se cargan según demanda)

La siguiente tabla ayuda a la IA a decidir cuándo abrir cada referencia:

Palabras clave del escenario del usuario	Referencia a cargar
"Colores del tema / paleta de colores / estilo visual / hex / color personalizado"	references/design-system.md
"Inicio de sesión / autenticación / JWT / contraseña / token"	references/auth-jwt.md
"Proyectos / CRUD / añadir / editar / eliminar / altas-bajas-modificaciones"	references/portfolio-crud.md
"Generación con IA / descripción de proyecto / generación de descripción / relleno inteligente"	references/ai-generate.md
"Estadísticas / visitas / PV / proyectos populares / panel"	references/stats-kv.md
"Despliegue / publicación / EdgeOne / dominio / vinculación KV"	references/deploy-workflow.md
"Paisajismo / gráfico / interiores / industrial / UX jerga del sector"	references/portfolio-knowledge.md

---

Restricciones principales (deben cumplirse)

1. No depender de ninguna clave de API externa — en el modo predeterminado, todas las funciones (incluida la generación con IA) deben poder ejecutarse sin configuración adicional. references/ai-generate.md describe un modo mejorado opcional con DeepSeek, pero no es el comportamiento predeterminado.

2. No escribir nunca en rutas de usuario que contengan caracteres especiales — priorizar rutas limpias en ~/Desktop/ que no contengan × ' " /.

3. No hacer comprobaciones de respaldo con startsWith('http') en los campos de imagen — confiar directamente en el campo img proporcionado, y usar tanto las rutas locales /assets/xxx.jpg como las remotas https://... tal cual.

4. El secreto JWT no debe estar codificado en el código — debe leerse desde la variable de entorno JWT_SECRET de EdgeOne Pages, y después del despliegue guiar al usuario para que lo configure manualmente en la consola.

5. Después del primer despliegue, es obligatorio devolver:

   • URL de acceso público
   • Enlace a la consola
   • Cuenta de administrador predeterminada (indicar que debe cambiar la contraseña inmediatamente después del primer inicio de sesión)

---

Mejoras opcionales (activar solo cuando el usuario lo solicite explícitamente)

Lo que dice el usuario	Activar
"Usar IA real" / "Usar DeepSeek" / "Que la IA sea más potente"	Plan B en references/ai-generate.md: Motor dual DeepSeek
"Soporte para cambiar entre chino e inglés" / "Bilingüe"	Añadir diccionario i18n + botón de cambio en index.html
"Añadir RSS / función de suscripción"	Añadir nuevo archivo functions/api/rss.js
"Soporte para comentarios en proyectos"	Añadir nuevo archivo functions/api/comments.js + espacio de nombres KV para comentarios

---

Contraejemplos: Solicitudes que no deben activar esta skill

• "Hacer un sitio de exhibición de proyectos de paisajismo" (se refiere a un sitio de proyecto específico, no a un portafolio de diseñador) → Usar el prompt landscapeflow
• "Hacer una landing page / SaaS / sitio de comercio electrónico" → No pertenece al escenario de portafolio
• "Convertir mi currículum existente en una página web" → Es un currículum, no un portafolio
• Simplemente "generar una descripción de proyecto con IA" (sin crear sitio) → No necesita la skill de creación de sitios

---

Contrato de salida

Después de completar la ejecución, mostrar al usuario el siguiente resultado estructurado:

✅ El portafolio de PortfolioFlow está listo

🌐 URL de acceso: https://portfolio-{slug}.edgeone.cool
🔐 Panel de administración: https://portfolio-{slug}.edgeone.cool/admin
   - Cuenta predeterminada: [email protected]
   - Contraseña predeterminada: PortfolioFlow_{6 caracteres aleatorios}
   - ⚠️ Cambiar la contraseña inmediatamente después del primer inicio de sesión

📊 Capacidades desplegadas:
   ✅ Página principal del portafolio ({N} proyectos de ejemplo)
   ✅ Página de detalle del proyecto
   ✅ Panel de administración (Inicio de sesión / CRUD / Generación con IA)
   ✅ Edge Functions × 4
   ✅ KV Storage × 3
   ✅ Autenticación JWT + Middleware CORS

🎨 Tema actual: {Nombre del tema}
📁 Directorio del proyecto: {Ruta local}

Sugerencias para los siguientes pasos:
1. Iniciar sesión en el panel y añadir tus proyectos reales
2. Subir tu avatar e imágenes de portada a /assets/
3. Modificar los derechos de autor y la información de contacto en el footer