SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsportfolio-flow

portfolio-flow

Frontend & websites

View repository

Updated 10-16 08:49

About this skill

PortfolioFlow Skill

Turn a single sentence into a designer's complete portfolio website.

PortfolioFlow is aimed at5 major design fields(Landscape / Graphic / Interior / Industrial / UX) portfolio site-building Skill. Users describe their needs in a single Chinese or English sentence, and this Skill automatically generates:

  • Complete portfolio front-end site (Hero + work grid + detail page + About + AI assistant chat box)
  • Designer management backend (login + work CRUD + AI-generated intros + statistics dashboard)
  • Custom theme colors (5 preset themes + free combination with user-provided hex)
  • Edge Functions / KV / Middleware / JWT authentication full-stack capabilities

Finally, through edgeone-pages-deploy , deploy to EdgeOne Pages with one click.

Execution flow after triggering (decision tree)

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

Step 1 — Collect required information

If the user's descriptionis missingany of the following fields, ask the userall at once(do not ask repeatedly):

Field Required Example Default value
Designer name ✅ "Li Bo" / "Alex Chen" Username
Design field ✅ Landscape / Graphic / Interior / Industrial / UX Ask them to choose one
Website title ❌ "Lee · Landscape Design Portfolio" "{Name} Portfolio"
One-sentence positioning ❌ "Bring design back to the land and human dwelling" Default by field
Theme scheme ❌ "Dark Night Forest" / hex color "Dark Night Forest"
Number of prefilled works ❌ 3-6 3 example works by default

Follow-up example：

I need to confirm a few key pieces of information:

  1. What is your design field? (Landscape/Graphic/Interior/Industrial/UX)
  2. Designer name?
  3. Theme scheme? (Dark Night Forest / Dawn Beige / Deep Sea Blues / Warm Sun Orange-Red / Pure White Minimal, or just give a hex color)

Step 2 — Decide the project structure

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

  • Landscape / Interior / Industrial → references/portfolio-knowledge.md the corresponding section in
  • Graphic / UX → same as above

Step 3 — Generate the project skeleton

Under /tmp/portfolio-{slug}/ create the following files (do not use cd to enter directories whose paths contain special characters, all paths should use absolute paths or ~/Desktop/ clean paths under):

portfolio-{slug}/
├── index.html              # 前台首页（用 templates/index.html 模板）
├── portfolio-detail.html   # 作品详情
├── admin.html              # 管理后台
├── login.html              # 登录页
├── assets/                 # 图片素材（用户上传或占位图）
├── functions/
│   ├── api/
│   │   ├── auth.js         # 登录鉴权 + JWT 签发（参考 references/auth-jwt.md）
│   │   ├── portfolios.js   # 作品 CRUD（参考 references/portfolio-crud.md）
│   │   ├── generate.js     # AI 生成介绍（参考 references/ai-generate.md）
│   │   └── stats.js        # 访问统计（参考 references/stats-kv.md）
│   └── _middleware.js      # JWT 校验 + CORS
└── README.md

Step 4 — Theme color injection

The theme scheme selected by the user needs to besimultaneouslyinjected into:

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

For the specific CSS variable values of the 5 preset themes, see references/design-system.md。

If the user provides a hex color (such as #FF6B6B), follow the algorithm for "hex to complete theme" in references/design-system.md to generate the matching color scale.

Step 5 — Call the deployment Skill

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

触发短语：deploy this portfolio to EdgeOne Pages
项目目录：~/Desktop/portfolio-{slug}/

After successful deployment,must：

  1. guide the user in the EdgeOne Pages console to bind the following KV namespaces (a one-time manual operation):
    • Variable name PORTFOLIO_USERS ← User account database
    • Variable name PORTFOLIO_WORKS ← Works database
    • Variable name PORTFOLIO_STATS ← Visit statistics
    • Important: variable names must match strictly; after KV binding, in the Edge Function access them asglobal variables , not env.PORTFOLIO_WORKS(this is a special convention of EdgeOne Pages).
  2. Redeploy once to make the KV binding take effect.
  3. Return the access URL + default admin account and password (automatically written to KV on first deployment).

Routing table (references/ loaded on demand)

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

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

Core constraints (must be followed)

  1. Never rely on external API Keys—in default mode all features (including AI generation) must run with zero configuration. references/ai-generate.md describes an optional DeepSeek enhancement mode, butis not the default behavior。

  2. Never write to a user path directory containing special characters—prefer using ~/Desktop/ a clean path under this that does not contain × ' " / .

  3. Image fields do not use startsWith('http') fallback checks—directly trust the passed-in img field, use local /assets/xxx.jpg and remote https://... exactly as they are.

  4. JWT secret is not hardcoded in the code—read from the EdgeOne Pages environment variable JWT_SECRET , and after deployment guide the user to set it manually in the console.

  5. After the first deployment is complete, must return：

    • public access URL
    • console link
    • default admin account (prompt to change the password immediately after first login)

Optional enhancements (enable only when the user explicitly requests them)

When the user says enable
"connect to real AI" / "use DeepSeek" / "make the AI capability a bit stronger" references/ai-generate.md Plan B in: DeepSeek dual engine
"support Chinese-English switching" / "bilingual" In index.html add an i18n dictionary + toggle button
"add RSS / subscription functionality" Add functions/api/rss.js
"support work comments" Add functions/api/comments.js + comments KV namespace

Counterexamples: Requests that should not trigger this Skill

  • "Make a landscape project showcase site" (refers to a specific project site, not a designer portfolio) → use landscapeflow Prompt
  • "Make a landing page / SaaS / e-commerce website" → does not belong to the portfolio scenario
  • "Turn my existing resume into a web page" → it is a resume, not a portfolio
  • Simply "AI generates a project introduction" (without building a site) → does not require the site-building Skill

Output Contract

After execution is complete, output the following structured result to the user:

✅ PortfolioFlow 作品集已就绪

🌐 访问 URL: https://portfolio-{slug}.edgeone.cool
🔐 管理后台: https://portfolio-{slug}.edgeone.cool/admin
   - 默认账号: admin@portfolio.local
   - 默认密码: PortfolioFlow_{随机6位}
   - ⚠️ 首次登录后请立即修改密码

📊 已部署能力:
   ✅ 前台作品集首页（{N} 个示例作品）
   ✅ 作品详情页
   ✅ 管理后台（登录 / CRUD / AI 生成）
   ✅ Edge Functions × 4
   ✅ KV Storage × 3
   ✅ JWT 鉴权 + CORS Middleware

🎨 当前主题: {主题名称}
📁 项目目录: {本地路径}

下一步建议:
1. 登录后台添加你的真实作品
2. 上传头像和封面图到 /assets/
3. 修改 footer 中的版权和联系方式