Communitygithub.com

PortfolioFlow / 作品集建站技能

Génère un site portfolio complet pour designer avec administration, CRUD, génération de descriptions par IA, personnalisation des couleurs et analytics. Déploiement sur EdgeOne Pages.

Qu'est-ce que 作品集建站技能 ?

PortfolioFlow est un skill d'agent IA spécialisé dans la création de sites portfolio pour designers, couvrant 5 disciplines majeures (paysage, graphisme, intérieur, industrie, UX/UI). À partir d'une simple phrase en chinois ou en anglais, il génère automatiquement un site complet incluant une page d'accueil avec Hero, une grille de projets, des pages de détail, une section 'À propos', une interface d'administration avec authentification JWT, un CRUD complet pour les projets, et un générateur de descriptions basé sur l'IA. Il s'appuie sur un cluster de solutions techniques modernes : Edge Functions pour la logique backend, KV Storage pour les données, middleware de sécurité, et déploiement automatisé via `edgeone-pages-deploy`. Le skill interagit avec l'utilisateur pour collecter les informations minimales nécessaires (nom du designer, discipline, thème) avant de construire l'intégralité du projet, d'injecter les variables CSS du thème choisi et de déployer le tout. Il est conçu pour fonctionner sans clé API externe par défaut, tout en proposant des modes avancés (DeepSeek, i18n, RSS) activables sur demande.

Compatible avec~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills/tree/HEAD/skills/portfolio-flow
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Compétence PortfolioFlow

Transformez une phrase en un site portfolio complet pour designer.

PortfolioFlow est une compétence destinée aux 5 grands domaines du design (paysage / graphisme / intérieur / industrie / UX). L'utilisateur décrit son besoin en une phrase (chinois ou anglais), et cette compétence génère automatiquement :

  • Un site portfolio public complet (Hero + grille de projets + page détail + À propos + assistant IA)
  • Un back-office pour le designer (connexion + CRUD projets + génération IA de descriptions + tableau de bord statistiques)
  • Personnalisation des couleurs (5 thèmes prédéfinis + couleur personnalisée en hex)
  • Fonctionnalités full-stack : Edge Functions / KV / Middleware / Authentification JWT

Le tout est déployé en un clic sur EdgeOne Pages via edgeone-pages-deploy.

Processus d'exécution après déclenchement (arbre de décision)

Après avoir reçu une demande correspondant aux critères de déclenchement de cette compétence, exécutez les étapes suivantes :

Étape 1 — Collecte des informations obligatoires

Si la description de l'utilisateur manque d'un des champs suivants, posez-lui une seule question pour tous les champs manquants (ne posez pas de questions répétées) :

ChampObligatoireExempleValeur par défaut
Nom du designer✅"Li Bo" / "Alex Chen"Nom d'utilisateur
Domaine de design✅Paysage / Graphisme / Intérieur / Industrie / UXDemander
Titre du site❌"Lee · Portfolio design paysage""{Nom} Portfolio"
Phrase d'accroche❌"Le design au service de l'humain et du territoire"Selon le domaine
Thème❌"Forêt nocturne" / couleur hex"Forêt nocturne"
Nombre de projets préremplis❌3-63 exemples

Exemple de question :

J'ai besoin de quelques informations clés :

  1. Quel est votre domaine de design ? (Paysage/Graphisme/Intérieur/Industrie/UX)
  2. Quel est le nom du designer ?
  3. Quel thème souhaitez-vous ? (Forêt nocturne / Beige aube / Bleu profond océan / Orange soleil couchant / Minimaliste blanc pur, ou donnez une couleur hex)

Étape 2 — Déterminer la structure du projet

Consultez l'un des fichiers de référence suivants, puis chargez la section correspondant au domaine de l'utilisateur :

  • Paysage / Intérieur / Industrie → section correspondante dans references/portfolio-knowledge.md
  • Graphisme / UX → idem

Étape 3 — Générer le squelette du projet

Créez les fichiers suivants dans /tmp/portfolio-{slug}/ (n'utilisez pas cd pour entrer dans un chemin contenant des caractères spéciaux ; utilisez toujours un chemin absolu ou un chemin propre sous ~/Desktop/) :

portfolio-{slug}/
├── index.html              # Page d'accueil (utiliser le modèle templates/index.html)
├── portfolio-detail.html   # Détail d'un projet
├── admin.html              # Interface d'administration
├── login.html              # Page de connexion
├── assets/                 # Images (upload utilisateur ou placeholders)
├── functions/
│   ├── api/
│   │   ├── auth.js         # Authentification + JWT (réf. references/auth-jwt.md)
│   │   ├── portfolios.js   # CRUD projets (réf. references/portfolio-crud.md)
│   │   ├── generate.js     # Génération IA de description (réf. references/ai-generate.md)
│   │   └── stats.js        # Statistiques de visites (réf. references/stats-kv.md)
│   └── _middleware.js      # Validation JWT + CORS
└── README.md

Étape 4 — Injection des couleurs du thème

Les couleurs du thème choisi doivent être injectées simultanément dans :

  • les variables CSS de <style> de index.html
  • au même endroit dans admin.html
  • au même endroit dans login.html

Les valeurs CSS des 5 thèmes prédéfinis se trouvent dans references/design-system.md.

Si l'utilisateur donne une couleur hex (ex. #FF6B6B), utilisez l'algorithme de "conversion hex en thème complet" décrit dans references/design-system.md pour générer la palette associée.

Étape 5 — Appel à la compétence de déploiement

Une fois tous les fichiers générés, appelez la compétence edgeone-pages-deploy pour effectuer le déploiement :

Phrase de déclenchement : deploy this portfolio to EdgeOne Pages
Répertoire du projet : ~/Desktop/portfolio-{slug}/

Après un déploiement réussi, vous devez impérativement :

  1. Guider l'utilisateur dans la console EdgeOne Pages pour lier les namespaces KV suivants (opération manuelle unique) :
    • Variable PORTFOLIO_USERS ← base de comptes utilisateurs
    • Variable PORTFOLIO_WORKS ← base des projets
    • Variable PORTFOLIO_STATS ← statistiques de visites
    • Important : Les noms de variables doivent correspondre exactement. Après liaison KV, ils sont accessibles dans Edge Function en tant que variables globales, et non via env.PORTFOLIO_WORKS (c'est une spécificité d'EdgeOne Pages).
  2. Redéployer une fois pour que les liaisons KV prennent effet.
  3. Retourner l'URL d'accès + le compte administrateur par défaut (écrit automatiquement dans KV lors du premier déploiement).

Table de routage (references/ chargées à la demande)

Le tableau suivant aide l'IA à décider quel fichier de référence ouvrir selon le contexte :

Mot-clé du contexteRéférence à charger
"couleur de thème / palette / style visuel / hex / couleur personnalisée"references/design-system.md
"connexion / authentification / JWT / mot de passe / token"references/auth-jwt.md
"projet / CRUD / ajouter / éditer / supprimer / créer / modifier"references/portfolio-crud.md
"génération IA / description de projet / description automatique"references/ai-generate.md
"statistiques / vues / PV / projets populaires / tableau de bord"references/stats-kv.md
"déploiement / mise en ligne / EdgeOne / domaine / liaison KV"references/deploy-workflow.md
"paysage / graphisme / intérieur / industrie / UX / vocabulaire métier"references/portfolio-knowledge.md

Contraintes fondamentales (à respecter impérativement)

  1. Ne dépendre d'aucune clé API externe — par défaut, toutes les fonctionnalités (y compris la génération IA) doivent fonctionner sans configuration. Le fichier references/ai-generate.md décrit un mode optionnel avec DeepSeek, mais ce n'est pas le comportement par défaut.

  2. Ne jamais écrire dans un chemin utilisateur contenant des caractères spéciaux — privilégiez un chemin propre sous ~/Desktop/, sans caractères comme × ' " /.

  3. Pour les champs image, ne pas faire de vérification de type startsWith('http') — faites confiance au champ img fourni ; utilisez tel quel un chemin local /assets/xxx.jpg ou une URL distante https://....

  4. Le secret JWT ne doit pas être codé en dur — lisez-le depuis la variable d'environnement JWT_SECRET d'EdgeOne Pages ; après déploiement, guidez l'utilisateur pour le configurer manuellement dans la console.

  5. Après le premier déploiement réussi, vous devez retourner :

    • L'URL publique
    • Le lien vers la console
    • Le compte administrateur par défaut (en invitant à changer le mot de passe dès la première connexion)

Améliorations optionnelles (à activer sur demande explicite de l'utilisateur)

Ce que dit l'utilisateurActiver
"Vrai IA" / "Utilise DeepSeek" / "IA plus puissante"Plan B de references/ai-generate.md : double moteur DeepSeek
"Support bilingue" / "Chinois + Anglais"Ajouter un dictionnaire i18n et un bouton de bascule dans index.html
"Ajouter RSS / abonnement"Créer functions/api/rss.js
"Commentaires sur les projets"Créer functions/api/comments.js + namespace KV pour les commentaires

Exemples de demandes qui ne doivent pas déclencher cette compétence

  • "Crée un site vitrine pour un projet paysager" (site spécifique, pas un portfolio de designer) → utiliser la compétence landscapeflow
  • "Crée une landing page / SaaS / site e-commerce" → pas un portfolio
  • "Transforme mon CV existant en page web" → c'est un CV, pas un portfolio
  • Simple "Génère une description de projet avec IA" (sans construire le site) → pas besoin de la compétence complète

Contrat de sortie

Une fois l'exécution terminée, présentez le résultat structuré suivant à l'utilisateur :

✅ PortfolioFlow prêt

🌐 URL publique : https://portfolio-{slug}.edgeone.cool
🔐 Interface d'administration : https://portfolio-{slug}.edgeone.cool/admin
   - Compte par défaut : [email protected]
   - Mot de passe par défaut : PortfolioFlow_{6 caractères aléatoires}
   - ⚠️ Veuillez modifier le mot de passe après la première connexion

📊 Capacités déployées :
   ✅ Page d'accueil du portfolio ({N} projets exemples)
   ✅ Page de détail des projets
   ✅ Interface d'administration (connexion / CRUD / génération IA)
   ✅ Edge Functions × 4
   ✅ KV Storage × 3
   ✅ Authentification JWT + Middleware CORS

🎨 Thème actuel : {nom du thème}
📁 Répertoire du projet : {chemin local}

Suggestions pour la suite :
1. Connectez-vous à l'interface d'administration pour ajouter vos vrais projets
2. Téléchargez votre photo de profil et vos images de couverture dans /assets/
3. Modifiez le copyright et les informations de contact dans le footer

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

TencentEdgeOne/awesome-website-prompts-and-skills

Generate a complete SaaS landing page with EdgeOne Pages deployment. Includes hero section, features, pricing, testimonials, and CTA sections. Supports React + Tailwind CSS, one-command deploy to EdgeOne Pages.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community