PortfolioFlow - Construtor de Portfólio para Designers

PortfolioFlow Skill

Transforme uma frase no site de portfólio completo de um designer.

PortfolioFlow é uma skill voltada para 5 grandes áreas do design (Paisagismo / Design Gráfico / Interiores / Industrial / UX) para criação de portfólios. O usuário descreve sua necessidade com uma frase em chinês ou inglês, e esta Skill gera automaticamente:

• Site front-end completo do portfólio (Hero + Grade de Projetos + Página de Detalhes + Sobre + Diálogo do Assistente de IA)
• Painel administrativo do designer (Login + CRUD de Projetos + Geração de Descrições com IA + Dashboard de Estatísticas)
• Personalização de cores do tema (5 temas predefinidos + combinação livre com hex fornecidos pelo usuário)
• Capacidade full-stack com Edge Functions / KV / Middleware / Autenticação JWT

Por fim, implanta com um clique no EdgeOne Pages através de edgeone-pages-deploy.

---

Fluxo de Execução Após o Disparo (Árvore de Decisão)

Após receber uma solicitação do usuário que atenda às condições de disparo desta Skill, execute na seguinte ordem:

Passo 1 — Coletar Informações Obrigatórias

Se a descrição do usuário não contiver algum dos campos abaixo, pergunte ao usuário de uma só vez (não pergunte repetidamente):

Campo	Obrigatório	Exemplo	Valor Padrão
Nome do Designer	✅	"Li Bo" / "Alex Chen"	Nome de usuário
Área de Design	✅	Paisagismo / Design Gráfico / Interiores / Industrial / UX	Perguntar para escolher um
Título do Site	❌	"Lee · Portfólio de Paisagismo"	"Portfólio de {Nome}"
Posicionamento em uma frase	❌	"Deixe o design voltar à terra e à habitação humana"	Padrão por área
Tema de Cores	❌	"Floresta Noturna" / hex	"Floresta Noturna"
Número de Projetos Pré-preenchidos	❌	3-6	3 projetos de exemplo

Exemplo de Pergunta:

Preciso confirmar algumas informações essenciais:

1. Qual é a sua área de design? (Paisagismo/Design Gráfico/Interiores/Industrial/UX)
2. Qual é o nome do designer?
3. Qual tema de cores? (Floresta Noturna/Bege Matinal/Azul Oceano Profundo/Laranja Sol Quente/Branco Minimalista, ou forneça um hex)

Passo 2 — Decidir a Estrutura do Projeto

view um dos seguintes arquivos de referência e carregue o conteúdo correspondente com base na área do designer:

• Paisagismo / Interiores / Industrial → seção correspondente em references/portfolio-knowledge.md
• Design Gráfico / UX → o mesmo

Passo 3 — Gerar o Esqueleto do Projeto

Crie os seguintes arquivos sob /tmp/portfolio-{slug}/ (é proibido usar cd para entrar em diretórios com caracteres especiais; use sempre caminhos absolutos ou caminhos limpos em ~/Desktop/):

portfolio-{slug}/
├── index.html              # Página inicial (usar template templates/index.html)
├── portfolio-detail.html   # Detalhes do projeto
├── admin.html              # Painel administrativo
├── login.html              # Página de login
├── assets/                 # Imagens (upload do usuário ou placeholders)
├── functions/
│   ├── api/
│   │   ├── auth.js         # Autenticação + Emissão de JWT (consultar references/auth-jwt.md)
│   │   ├── portfolios.js   # CRUD de projetos (consultar references/portfolio-crud.md)
│   │   ├── generate.js     # Geração de descrições com IA (consultar references/ai-generate.md)
│   │   └── stats.js        # Estatísticas de visitas (consultar references/stats-kv.md)
│   └── _middleware.js      # Validação JWT + CORS
└── README.md

Passo 4 — Injeção de Cores do Tema

O tema escolhido pelo usuário deve ser injetado simultaneamente em:

• As variáveis CSS no <style> do index.html
• No mesmo local do admin.html
• No mesmo local do login.html

Os valores específicos das variáveis CSS dos 5 temas predefinidos estão em references/design-system.md.

Se o usuário fornecer uma cor hex (ex.: #FF6B6B), aplique o algoritmo de "conversão de hex para tema completo" em references/design-system.md para gerar a escala de cores correspondente.

Passo 5 — Chamar a Skill de Deploy

Após gerar todos os arquivos, chame a Skill edgeone-pages-deploy para executar o deploy:

Frase de ativação: deploy this portfolio to EdgeOne Pages
Diretório do projeto: ~/Desktop/portfolio-{slug}/

Após o deploy bem-sucedido, obrigatoriamente:

1. No console do EdgeOne Pages, oriente o usuário a vincular os seguintes namespaces KV (operação manual única):
   • Nome da variável PORTFOLIO_USERS ← Banco de contas de usuário
   • Nome da variável PORTFOLIO_WORKS ← Banco de projetos
   • Nome da variável PORTFOLIO_STATS ← Estatísticas de visitas
   • Importante: os nomes das variáveis devem corresponder exatamente; após vinculado, o KV é acessado como variável global na Edge Function, e não como env.PORTFOLIO_WORKS (esta é uma regra especial do EdgeOne Pages).
2. Faça um novo deploy para que o vínculo KV entre em vigor.
3. Retorne a URL de acesso + as credenciais padrão do administrador (gravadas automaticamente no KV no primeiro deploy).

---

Tabela de Roteamento (references/ carregar sob demanda)

A tabela abaixo ajuda a IA a decidir quando abrir qual arquivo de referência:

Palavras-chave do cenário do usuário	Referência a carregar
"cor do tema / paleta de cores / estilo visual / hex / cor personalizada"	references/design-system.md
"login / autenticação / JWT / senha / token"	references/auth-jwt.md
"projeto / CRUD / adicionar / editar / excluir / criar / alterar / deletar"	references/portfolio-crud.md
"gerar com IA / descrição do projeto / gerar descrição / preenchimento inteligente"	references/ai-generate.md
"estatísticas / visualizações / PV / projetos populares / dashboard"	references/stats-kv.md
"deploy / publicar / EdgeOne / domínio / vínculo KV"	references/deploy-workflow.md
"paisagismo / design gráfico / interiores / industrial / UX jargão da área"	references/portfolio-knowledge.md

---

Restrições Principais (Devem Ser Seguidas)

1. Nunca dependa de API Key externa — no modo padrão, todas as funcionalidades (incluindo geração com IA) devem funcionar com configuração zero. O arquivo references/ai-generate.md descreve um modo opcional de aprimoramento com DeepSeek, mas não é o comportamento padrão.

2. Nunca escreva em diretórios com caracteres especiais no caminho do usuário — prefira usar caminhos limpos em ~/Desktop/ sem caracteres como × ' " /.

3. Não faça verificação de fallback startsWith('http') para campos de imagem — confie diretamente no campo img recebido; use tanto caminhos locais /assets/xxx.jpg quanto URLs remotas https://... como estão.

4. Nunca codifique o JWT secret no código — leia da variável de ambiente JWT_SECRET do EdgeOne Pages e oriente o usuário a defini-la manualmente no console após o deploy.

5. Após o primeiro deploy, obrigatoriamente retorne:

   • URL de acesso público
   • Link do console
   • Conta de administrador padrão (avisar para alterar a senha imediatamente após o primeiro login)

---

Aprimoramentos Opcionais (Ativar Somente Quando Solicitado Explicitamente)

O usuário diz	Ativar
"Quero IA de verdade" / "Usar DeepSeek" / "Capacidade de IA mais forte"	Plano B em references/ai-generate.md: motor duplo DeepSeek
"Suporte a alternância chinês/inglês" / "Bilíngue"	Adicionar dicionário i18n + botão de alternância no index.html
"Adicionar RSS / funcionalidade de assinatura"	Adicionar functions/api/rss.js
"Suporte a comentários nos projetos"	Adicionar functions/api/comments.js + namespace KV de comentários

---

Contra-exemplos: Solicitações Que Não Devem Disparar Esta Skill

• "Criar um site de exibição de projetos de paisagismo" (site de projeto específico, não portfólio de designer) → Usar o Prompt landscapeflow
• "Criar uma landing page / SaaS / site de e-commerce" → Não é cenário de portfólio
• "Transformar meu currículo existente em página web" → É currículo, não portfólio
• Apenas "gerar uma descrição de projeto com IA" (sem criar site) → Não precisa da Skill de criação de site

---

Contrato de Saída

Após a conclusão da execução, apresente ao usuário o seguinte resultado estruturado:

✅ Portfólio PortfolioFlow pronto

🌐 URL de acesso: https://portfolio-{slug}.edgeone.cool
🔐 Painel administrativo: https://portfolio-{slug}.edgeone.cool/admin
   - Conta padrão: [email protected]
   - Senha padrão: PortfolioFlow_{6 caracteres aleatórios}
   - ⚠️ Altere a senha imediatamente após o primeiro login

📊 Capacidades implantadas:
   ✅ Página inicial do portfólio ({N} projetos de exemplo)
   ✅ Página de detalhes do projeto
   ✅ Painel administrativo (Login / CRUD / Geração com IA)
   ✅ Edge Functions × 4
   ✅ KV Storage × 3
   ✅ Autenticação JWT + Middleware CORS

🎨 Tema atual: {nome do tema}
📁 Diretório do projeto: {caminho local}

Próximos passos sugeridos:
1. Faça login no painel para adicionar seus projetos reais
2. Faça upload da foto de perfil e imagens de capa para /assets/
3. Modifique os direitos autorais e informações de contato no footer