PortfolioFlow – Designer Portfolio Skill

PortfolioFlow Skill

Verwandle einen Satz in eine vollständige Designer-Portfolio-Website.

PortfolioFlow ist ein Skill für 5 Designbereiche (Landschaftsarchitektur / Grafikdesign / Innenarchitektur / Industriedesign / UX). Der Benutzer beschreibt seine Anforderungen auf Chinesisch oder Englisch, und dieser Skill generiert automatisch:

• Vollständige öffentliche Portfolio-Website (Hero + Werkraster + Detailseite + Über mich + KI-Assistenten-Dialog)
• Admin-Dashboard für Designer (Login + CRUD für Werke + KI-generierte Beschreibungen + Statistik-Dashboard)
• Anpassbares Farbschema (5 vordefinierte Themes + benutzerdefinierte Hex-Farben)
• Vollständiger Stack mit Edge Functions / KV / Middleware / JWT-Authentifizierung

Letztendlich erfolgt die Bereitstellung mit einem Klick über edgeone-pages-deploy auf EdgeOne Pages.

---

Ausführungsablauf nach Auslösung (Entscheidungsbaum)

Nach Erhalt einer Benutzeranfrage, die die Triggerbedingungen dieses Skills erfüllt, wird die folgende Reihenfolge eingehalten:

Schritt 1 – Erforderliche Informationen sammeln

Fehlt eines der folgenden Felder in der Benutzerbeschreibung, werden die fehlenden Informationen einmalig abgefragt (nicht wiederholt nachfragen):

Feld	Erforderlich	Beispiel	Standardwert
Designername	✅	„Li Bo" / „Alex Chen"	Benutzername
Designbereich	✅	Landschaft / Grafik / Innen / Industrie / UX	Nachfragen, einen auswählen
Website-Titel	❌	„Lee · Landschaftsdesign-Portfolio"	„{Name} Portfolio"
Ein-Satz-Positionierung	❌	„Design zurück zu Erde und Menschlichkeit bringen“	Standard je Bereich
Farbschema	❌	„Dunkler Wald“ / Hex-Farbe	„Dunkler Wald“
Anzahl der Beispielwerke	❌	3–6	Standardmäßig 3 Beispielwerke

Beispiel für Rückfrage:

Ich benötige ein paar wichtige Informationen:

1. In welchem Designbereich bist du tätig? (Landschaft/Grafik/Innen/Industrie/UX)
2. Name des Designers?
3. Welches Farbschema? (Dunkler Wald / Morgencreme-Beige / Tiefsee-Blau / Warmes Orange / Reinweiß-Minimalistisch, oder gib direkt einen Hex-Farbcode an)

Schritt 2 – Projektstruktur festlegen

Eine der folgenden Referenzdateien wird eingesehen, um je nach Benutzerbereich die entsprechenden Inhalte zu laden:

• Landschaft / Innen / Industrie → Entsprechender Abschnitt in references/portfolio-knowledge.md
• Grafik / UX → Gleiche Datei

Schritt 3 – Projektgerüst generieren

Im Verzeichnis /tmp/portfolio-{slug}/ werden folgende Dateien erstellt (Es ist verboten, in Verzeichnisse mit Sonderzeichen zu wechseln – alle Pfade müssen absolut oder unter ~/Desktop/ sauber sein):

portfolio-{slug}/
├── index.html              # Öffentliche Startseite (Vorlage: templates/index.html)
├── portfolio-detail.html   # Werkdetails
├── admin.html              # Admin-Dashboard
├── login.html              # Login-Seite
├── assets/                 # Bildmaterial (vom Benutzer hochgeladen oder Platzhalter)
├── functions/
│   ├── api/
│   │   ├── auth.js         # Login-Authentifizierung + JWT-Ausstellung (Referenz: references/auth-jwt.md)
│   │   ├── portfolios.js   # CRUD für Werke (Referenz: references/portfolio-crud.md)
│   │   ├── generate.js     # KI-generierte Beschreibungen (Referenz: references/ai-generate.md)
│   │   └── stats.js        # Zugriffsstatistiken (Referenz: references/stats-kv.md)
│   └── _middleware.js      # JWT-Validierung + CORS
└── README.md

Schritt 4 – Farbschema einfügen

Das vom Benutzer gewählte Farbschema wird gleichzeitig in folgende Dateien eingefügt:

• CSS-Variablen im <style>-Block von index.html
• Gleiche Position in admin.html
• Gleiche Position in login.html

Die genauen CSS-Variablenwerte der 5 vordefinierten Themes finden sich in references/design-system.md.

Wenn der Benutzer einen Hex-Farbcode übergibt (z. B. #FF6B6B), wird nach dem Algorithmus in references/design-system.md „Hex zu vollständigem Theme“ ein passender Farbsatz generiert.

Schritt 5 – Deployment-Skill aufrufen

Nachdem alle Dateien generiert wurden, wird der Skill edgeone-pages-deploy zur Bereitstellung aufgerufen:

Auslösephrase: deploy this portfolio to EdgeOne Pages
Projektverzeichnis: ~/Desktop/portfolio-{slug}/

Nach erfolgreicher Bereitstellung muss:

1. Der Benutzer in der EdgeOne Pages-Konsole die folgenden KV-Namespaces manuell einmalig binden:
   • Variablenname PORTFOLIO_USERS ← Benutzerkontendatenbank
   • Variablenname PORTFOLIO_WORKS ← Werkdatenbank
   • Variablenname PORTFOLIO_STATS ← Zugriffsstatistiken
   • Wichtig: Die Variablennamen müssen exakt übereinstimmen. Nach der KV-Bindung werden sie in Edge Functions als globale Variablen angesprochen, nicht als env.PORTFOLIO_WORKS (dies ist eine spezielle Konvention von EdgeOne Pages).
2. Einmal erneut deployed werden, damit die KV-Bindung wirksam wird.
3. Die Zugriffs-URL sowie der Standard-Admin-Benutzername und das Passwort zurückgegeben werden (werden beim ersten Deployment automatisch in KV geschrieben).

---

Routingtabelle (references/ bei Bedarf laden)

Die folgende Tabelle hilft der KI zu entscheiden, wann welche Referenzdatei geöffnet wird:

Benutzerszenario-Schlüsselwörter	Geladene Referenz
„Theme / Farbschema / visueller Stil / Hex / benutzerdefinierte Farbe"	references/design-system.md
„Login / Authentifizierung / JWT / Passwort / Token"	references/auth-jwt.md
„Werke / CRUD / Hinzufügen / Bearbeiten / Löschen /",
„KI-generieren / Werkbeschreibung / Beschreibungsgenerierung / intelligentes Ausfüllen"	references/ai-generate.md
„Statistiken / Seitenaufrufe / PV / beliebteste Werke / Dashboard"	references/stats-kv.md
„Bereitstellung / Live-Schaltung / EdgeOne / Domain / KV-Bindung"	references/deploy-workflow.md
„Landschaft / Grafik / Innen / Industrie / UX-Fachbegriffe"	references/portfolio-knowledge.md

---

Kernanforderungen (müssen eingehalten werden)

1. Keine externen API-Keys erforderlich – Alle Funktionen (einschließlich KI-Generierung) müssen im Standardmodus ohne Konfiguration lauffähig sein. references/ai-generate.md beschreibt einen optionalen DeepSeek-Erweiterungsmodus, aber dies ist nicht das Standardverhalten.

2. Nicht in Benutzerverzeichnisse mit Sonderzeichen schreiben – Es werden ausschließlich saubere Pfade unter ~/Desktop/ verwendet, die keine × ' " / enthalten.

3. Keine startsWith('http')-Fallback-Prüfung für Bildfelder – Dem übergebenen img-Feld wird direkt vertraut. Sowohl lokale /assets/xxx.jpg- als auch Remote-https://...-URLs werden unverändert verwendet.

4. JWT-Secret nicht fest im Code codiert – Es wird aus der EdgeOne Pages-Umgebungsvariable JWT_SECRET gelesen. Nach dem Deployment wird der Benutzer aufgefordert, es manuell in der Konsole zu setzen.

5. Nach dem ersten Deployment muss Folgendes zurückgegeben werden:

   • Öffentliche Zugriffs-URL
   • Link zur Konsole
   • Standard-Admin-Benutzername (mit Hinweis, das Passwort nach dem ersten Login sofort zu ändern)

---

Optionale Erweiterungen (nur aktivieren, wenn der Benutzer es ausdrücklich wünscht)

Benutzersatz	Aktiviert
„Echte KI verwenden" / „DeepSeek nutzen" / „KI-Fähigkeiten verbessern"	Plan B in references/ai-generate.md: Dual-Engine DeepSeek
„Zweisprachig (Chinesisch/Englisch) unterstützen" / „Sprachwechsel"	i18n-Wörterbuch + Umschaltknopf in index.html hinzufügen
„RSS/Abonnement-Funktion hinzufügen"	Neue Datei functions/api/rss.js erstellen
„Werkkommentare unterstützen"	Neue Datei functions/api/comments.js + KV-Namespace für Kommentare hinzufügen

---

Gegenbeispiele: Anfragen, die diesen Skill NICHT auslösen sollten

• „Eine Landschaftsprojekt-Showcase-Seite erstellen“ (gemeint ist eine spezifische Projektseite, kein Designer-Portfolio) → landscapeflow-Prompt verwenden
• „Eine Landingpage / SaaS / E-Commerce-Website erstellen“ → Gehört nicht zum Portfolio-Szenario
• „Meinen vorhandenen Lebenslauf in eine Webseite umwandeln“ → Ist ein Lebenslauf, kein Portfolio
• Nur „eine KI-generierte Werkbeschreibung“ (ohne Website-Erstellung) → Kein Website-Erstellungsskill erforderlich

---

Ausgabeergebnis

Nach Abschluss der Ausführung wird dem Benutzer das folgende strukturierte Ergebnis ausgegeben:

✅ PortfolioFlow-Portfolio bereit

🌐 Zugriffs-URL: https://portfolio-{slug}.edgeone.cool
🔐 Admin-Dashboard: https://portfolio-{slug}.edgeone.cool/admin
   - Standard-Benutzer: [email protected]
   - Standard-Passwort: PortfolioFlow_{6-stellige Zufallszahl}
   - ⚠️ Bitte nach dem ersten Login sofort das Passwort ändern

📊 Bereitgestellte Funktionen:
   ✅ Öffentliche Portfolio-Startseite ({N} Beispielwerke)
   ✅ Werkdetailseite
   ✅ Admin-Dashboard (Login / CRUD / KI-Generierung)
   ✅ Edge Functions × 4
   ✅ KV Storage × 3
   ✅ JWT-Authentifizierung + CORS-Middleware

🎨 Aktuelles Theme: {Theme-Name}
📁 Projektverzeichnis: {Lokaler Pfad}

Nächste Schritte:
1. Im Admin-Dashboard anmelden und deine echten Werke hinzufügen
2. Profilbild und Cover-Bilder in /assets/ hochladen
3. Copyright und Kontaktinformationen im Footer aktualisieren