PortfolioFlow

PortfolioFlow Skill

Turn a single sentence into a complete designer portfolio website.

PortfolioFlow is a Skill for 5 design disciplines (Landscape / Graphic / Interior / Industrial / UX) that builds portfolio sites. When a user describes their needs in one sentence (Chinese or English), this Skill automatically generates:

• Complete public portfolio site (Hero + Project Grid + Detail Page + About + AI Assistant Dialog)
• Designer admin panel (Login + Project CRUD + AI-Generated Descriptions + Analytics Dashboard)
• Customizable theme colors (5 preset themes + user-provided custom hex)
• Full-stack capabilities: Edge Functions, KV, Middleware, JWT Authentication

Finally, it deploys to EdgeOne Pages with one click via edgeone-pages-deploy.

---

Execution Flow After Trigger (Decision Tree)

After receiving a request that matches this Skill's trigger conditions, execute the following steps in order:

Step 1 — Collect Required Information

If the user's description lacks any of the following fields, ask for them all at once (do not ask repeatedly):

Field	Required	Example	Default
Designer name	✅	"Li Bo" / "Alex Chen"	Username
Design discipline	✅	Landscape / Graphic / Interior / Industrial / UX	Ask user to pick one
Site title	❌	"Lee · Landscape Design Portfolio"	"{Name} Portfolio"
One-line positioning	❌	"Bringing design back to land and living"	Default based on discipline
Theme choice	❌	"Dark Forest" / hex color	"Dark Forest"
Number of sample works	❌	3-6	3 default sample works

Example query:

I need a few key details:

1. What design discipline is this for? (Landscape/Graphic/Interior/Industrial/UX)
2. Designer's name?
3. Theme preference? (Dark Forest / Dawn Beige / Deep Sea Blue / Warm Sun Orange / Pure White Minimal, or give me a hex color)

Step 2 — Determine Project Structure

view one of the following reference files, and load the corresponding content patterns based on the user's discipline:

• Landscape / Interior / Industrial → relevant sections in references/portfolio-knowledge.md
• Graphic / UX → same file

Step 3 — Generate Project Skeleton

Create the following files under /tmp/portfolio-{slug}/ (never cd into a path containing special characters; use absolute paths or a clean path under ~/Desktop/):

portfolio-{slug}/
├── index.html              # Public homepage (use templates/index.html)
├── portfolio-detail.html   # Project detail page
├── admin.html              # Admin panel
├── login.html              # Login page
├── assets/                 # Image assets (user uploaded or placeholders)
├── functions/
│   ├── api/
│   │   ├── auth.js         # Login authentication + JWT signing (see references/auth-jwt.md)
│   │   ├── portfolios.js   # Project CRUD (see references/portfolio-crud.md)
│   │   ├── generate.js     # AI description generation (see references/ai-generate.md)
│   │   └── stats.js        # Visit statistics (see references/stats-kv.md)
│   └── _middleware.js      # JWT validation + CORS
└── README.md

Step 4 — Inject Theme Colors

The user's chosen theme must be injected simultaneously into:

• The CSS variables in the <style> block of index.html
• The same location in admin.html
• The same location in login.html

See references/design-system.md for the exact CSS variable values of the 5 preset themes.

If the user provides a hex color (e.g., #FF6B6B), generate a complete color scale using the algorithm in references/design-system.md under "Hex to Full Theme".

Step 5 — Invoke Deployment Skill

After all files are generated, call the edgeone-pages-deploy Skill to execute deployment:

Trigger phrase: deploy this portfolio to EdgeOne Pages
Project directory: ~/Desktop/portfolio-{slug}/

After successful deployment, you must:

1. Guide the user to bind the following KV namespaces in the EdgeOne Pages console (manual, one-time operation):
   • Variable name PORTFOLIO_USERS ← User account store
   • Variable name PORTFOLIO_WORKS ← Project store
   • Variable name PORTFOLIO_STATS ← Visit statistics
   • Important: Variable names must match exactly; after KV binding, they are accessed as global variables in Edge Functions, not as env.PORTFOLIO_WORKS (this is a special convention for EdgeOne Pages).
2. Redeploy once to make KV bindings effective.
3. Return the access URL and default admin credentials (automatically written to KV on first deployment).

---

Route Table (references/ loaded on demand)

The table below helps the AI decide when to open each reference file:

User scenario keywords	Reference to load
"theme / color scheme / visual style / hex / custom color"	references/design-system.md
"login / auth / JWT / password / token"	references/auth-jwt.md
"projects / CRUD / add / edit / delete / create / update / remove"	references/portfolio-crud.md
"AI generate / project description / description generation / smart fill"	references/ai-generate.md
"stats / pageviews / PV / popular works / dashboard"	references/stats-kv.md
"deploy / go live / EdgeOne / domain / KV binding"	references/deploy-workflow.md
"landscape / graphic / interior / industrial / UX industry terminology"	references/portfolio-knowledge.md

---

Core Constraints (Must Follow)

1. Never depend on external API keys — By default, all features (including AI generation) must run with zero configuration. The references/ai-generate.md file describes an optional DeepSeek enhancement mode, but it is not the default behavior.

2. Never write to a user path containing special characters — Prefer clean paths under ~/Desktop/ without × ' " /.

3. Do not guard image fields with a startsWith('http') check — Trust the incoming img field directly; use local /assets/xxx.jpg and remote https://... URLs as-is.

4. Do not hardcode the JWT secret in the code — Read it from the EdgeOne Pages environment variable JWT_SECRET; after deployment, guide the user to set it manually in the console.

5. After the first deployment, you must return:

   • Public access URL
   • Console link
   • Default admin credentials (prompt user to change password immediately after first login)

---

Optional Enhancements (Enable Only When User Explicitly Requests)

User says	Enable
"use real AI" / "use DeepSeek" / "stronger AI"	Plan B from references/ai-generate.md: DeepSeek dual engine
"support Chinese/English switch" / "bilingual"	Add i18n dictionary + toggle button in index.html
"add RSS / subscribe"	Add new file functions/api/rss.js
"support project comments"	Add new file functions/api/comments.js + comment KV namespace

---

Negative Examples: Requests That Should NOT Trigger This Skill

• "Build a landscape project showcase site" (specific project site, not a designer portfolio) → use landscapeflow Prompt
• "Build a landing page / SaaS / e-commerce site" → not a portfolio scenario
• "Convert my existing resume into a webpage" → resume, not a portfolio
• Just "AI-generate a project description" (no site building) → does not need this Skill

---

Output Contract

After completion, output the following structured result to the user:

✅ PortfolioFlow portfolio is ready

🌐 Access URL: https://portfolio-{slug}.edgeone.cool
🔐 Admin panel: https://portfolio-{slug}.edgeone.cool/admin
   - Default account: [email protected]
   - Default password: PortfolioFlow_{6 random digits}
   - ⚠️ Change password immediately after first login

📊 Deployed capabilities:
   ✅ Public portfolio homepage ({N} sample works)
   ✅ Project detail page
   ✅ Admin panel (Login / CRUD / AI generation)
   ✅ Edge Functions × 4
   ✅ KV Storage × 3
   ✅ JWT authentication + CORS Middleware

🎨 Current theme: {Theme name}
📁 Project directory: {Local path}

Next steps:
1. Log in to the admin panel and add your real projects
2. Upload avatar and cover images to /assets/
3. Update copyright and contact info in the footer