Generates a complete designer portfolio website with admin login, portfolio CRUD management, AI-powered project description generation, theme customization (5 presets or custom hex), and visit…

MITAuto-check passedBackend & APIs

Install Portfolio Flow

skills CLI
$ npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install TencentEdgeOne/awesome-website-prompts-and-skills portfolio-flow --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/portfolio-flow .claude/skills/portfolio-flow && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
portfolio-flow
GitHub stars
183
Token cost
~1.3k tokens
SKILL.md length
336 words
Files
20 (incl. references)
Skills in repo
3
Repo updated
First seen
Licence
MIT

At a glance

Generates a complete designer portfolio website with admin login, portfolio CRUD management, AI-powered project description generation, theme customization (5 presets or custom hex), and visit…

  • Works in 5 steps: 收集必填信息 → 决定项目结构 → 生成项目骨架 → …
  • A user wants to build a personal portfolio site
  • SKILL.md covers 触发后的执行流程(决策树), 路由表(references/ 按需加载), 核心约束(必须遵守) and 可选增强(用户明确要求时启用), plus 2 more sections
  • Runs JavaScript scripts from its folder; needs JWT_SECRET

What it does

Portfolio Flow is an agent skill from TencentEdgeOne/awesome-website-prompts-and-skills. Generates a complete designer portfolio website with admin login, portfolio CRUD management, AI-powered project description generation, theme customization (5 presets or custom hex), and visit analytics. Deploys to EdgeOne Pages with Edge Functions, KV Storage, JWT auth, and middleware. Use when a user wants to build a personal portfolio site, designer's online showcase, individual brand website, or multi-discipline design portfolio covering landscape, graphic, interior, industrial, or UX/UI design. Triggers…

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 23 other files, including reference files (for example `references/ai-generate.md`, `references/auth-jwt.md` and `references/deploy-workflow.md`).

It sits in Backend & APIs, covering Authentication and UI design. The repository describes itself as: Tencent EdgeOne 维护的网站资源合集。在 AI 编程工具中,给它一个 Prompt 或 Skill,就能生成精美酷炫的网页,或者带有登录、支付、AI 能力的完整网站。WorkBuddy × Tencent EdgeOne AI Prompts × Skills 挑战赛官方作品池。 The licence is MIT.

When your agent uses it

  • A user wants to build a personal portfolio site
  • Designers online showcase
  • Individual brand website
  • Multi-discipline design portfolio covering landscape

Example prompts

  • “做一个设计师作品集”
  • “做一个个人作品集网站”
  • “建一个景观/平面/室内/工业/UX设计师作品集”
  • “/portfolio-flow”

Requirements

  • Node.js
  • A credential in JWT_SECRET

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. 收集必填信息
  2. 决定项目结构
  3. 生成项目骨架
  4. 主题色注入
  5. 调用部署 Skill

What it can do on your machine

Read from SKILL.md and the folder at commit e3f25bd. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript, from the files we listed), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • JWT_SECRET

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Portfolio Flow loads about 1.3k tokens when it runs, and up to ~28k if it reads all its reference files. Until then it costs about 183 tokens; SKILL.md has 336 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~183
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~28k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from TencentEdgeOne/awesome-website-prompts-and-skills at commit e3f25bd, republished under its MIT licence (© TencentEdgeOne). 336 words, ~1,331 tokens.

Download SKILL.mdSave it as .claude/skills/portfolio-flow/SKILL.md (or your agent's skills folder). This skill also uses 19 other files; get the full folder from GitHub.
name
portfolio-flow
description
Generates a complete designer portfolio website with admin login, portfolio CRUD management, AI-powered project description generation, theme customization (5 presets or custom hex), and visit analytics. Deploys to EdgeOne Pages with Edge Functions, KV Storage, JWT auth, and middleware. Use when a user wants to build a personal portfolio site, designer's online showcase, individual brand website, or multi-discipline design portfolio covering landscape, graphic, interior, industrial, or UX/UI design. Triggers include: "做一个设计师作品集" "做一个个人作品集网站" "建一个景观/平面/室内/工业/UX设计师作品集" "PortfolioFlow 建站" "生成作品集" "make a designer portfolio" "build a personal portfolio" "create a designer showcase site" "用 PortfolioFlow 做一个作品集".
license
MIT

PortfolioFlow Skill

把一句话,变成设计师的完整作品集网站。

PortfolioFlow 是面向5 大设计领域(景观 / 平面 / 室内 / 工业 / UX)的作品集 建站 Skill。用户用一句中文或英文描述需求,本 Skill 自动生成:

  • 完整作品集前台站(Hero + 作品网格 + 详情页 + 关于 + AI 助手对话框)
  • 设计师管理后台(登录 + 作品 CRUD + AI 生成介绍 + 统计看板)
  • 主题色自定义(5 套预设主题 + 用户传入 hex 自由组合)
  • Edge Functions / KV / Middleware / JWT 鉴权全栈能力

最终通过 edgeone-pages-deploy 一键部署到 EdgeOne Pages。


触发后的执行流程(决策树)

收到符合本 Skill 触发条件的用户请求后,按以下顺序执行:

Step 1 — 收集必填信息

如果用户描述中缺少以下任意字段,向用户一次性追问(不要反复问):

字段必填示例默认值
设计师姓名✅"李博" / "Alex Chen"用户名
设计领域✅景观 / 平面 / 室内 / 工业 / UX询问选一个
网站标题❌"Lee · 景观设计作品集""{姓名} 作品集"
一句话定位❌"让设计回到土地与人居"按领域默认
主题方案❌"暗夜森林" / hex 颜色"暗夜森林"
预填作品数❌3-6默认 3 个示例作品

追问示例:

我需要确认几个关键信息:

  1. 你的设计领域是什么?(景观/平面/室内/工业/UX)
  2. 设计师姓名?
  3. 主题方案?(暗夜森林/晨曦米色/深海蓝调/暖阳橙红/纯白极简,或者直接给一个 hex 颜色)
Step 2 — 决定项目结构

view 以下参考文件之一,根据用户领域加载对应的内容套路:

  • 景观 / 室内 / 工业 → references/portfolio-knowledge.md 中的对应章节
  • 平面 / UX → 同上
Step 3 — 生成项目骨架

在 /tmp/portfolio-{slug}/ 下创建以下文件(禁止使用 cd 进入路径包含特殊字符的目录,所有 路径都用绝对路径或 ~/Desktop/ 下的干净路径):

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 — 主题色注入

用户选定的主题方案需要同时注入到:

  • index.html 的 <style> 中的 CSS 变量
  • admin.html 的同位置
  • login.html 的同位置

5 套预设主题的具体 CSS 变量值见 references/design-system.md。

如果用户传入 hex 颜色(如 #FF6B6B),按 references/design-system.md 中"hex 转完整主题"的算法生成配套色阶。

Step 5 — 调用部署 Skill

完成所有文件生成后,调用 edgeone-pages-deploy Skill 执行部署:

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

部署成功后,必须:

  1. 在 EdgeOne Pages 控制台引导用户绑定以下 KV 命名空间(手动一次性操作):
    • 变量名 PORTFOLIO_USERS ← 用户账号库
    • 变量名 PORTFOLIO_WORKS ← 作品库
    • 变量名 PORTFOLIO_STATS ← 访问统计
    • 重要:变量名必须严格匹配,KV 绑定后在 Edge Function 中作为全局变量 访问,而非 env.PORTFOLIO_WORKS(这是 EdgeOne Pages 的特殊规范)。
  2. 重新部署一次让 KV 绑定生效。
  3. 返回访问 URL + 默认管理员账号密码(首次部署时自动写入 KV)。

路由表(references/ 按需加载)

下表帮助 AI 决定何时打开哪份 reference:

用户场景关键词加载的 reference
"主题色 / 配色 / 视觉风格 / hex / 自定义颜色"references/design-system.md
"登录 / 鉴权 / JWT / 密码 / token"references/auth-jwt.md
"作品 / CRUD / 添加 / 编辑 / 删除 / 增删改查"references/portfolio-crud.md
"AI 生成 / 作品介绍 / 描述生成 / 智能填写"references/ai-generate.md
"统计 / 浏览量 / PV / 热门作品 / 看板"references/stats-kv.md
"部署 / 上线 / EdgeOne / 域名 / KV 绑定"references/deploy-workflow.md
"景观 / 平面 / 室内 / 工业 / UX 行业话术"references/portfolio-knowledge.md

核心约束(必须遵守)

  1. 绝不依赖外部 API Key——默认模式下所有功能(包括 AI 生成)必须零配置可跑。 references/ai-generate.md 描述了可选的 DeepSeek 增强模式,但不是默认行为。

  2. 绝不写入用户路径含特殊字符的目录——优先使用 ~/Desktop/ 下不含 × ' " / 的干净路径。

  3. 图片字段不做 startsWith('http') 兜底判断——直接信任传入的 img 字段, 本地 /assets/xxx.jpg 和远程 https://... 都要原样使用。

  4. JWT secret 不硬编码在代码里——从 EdgeOne Pages 环境变量 JWT_SECRET 读取,部署后引导用户在控制台手动设置。

  5. 首次部署完成后必须返回:

    • 公开访问 URL
    • 控制台链接
    • 默认管理员账号(提示首次登录后立即修改密码)

可选增强(用户明确要求时启用)

用户说启用
"接真 AI" / "用 DeepSeek" / "AI 能力更强一点"references/ai-generate.md 中的 Plan B:DeepSeek 双引擎
"支持中英文切换" / "双语"在 index.html 添加 i18n 字典 + 切换按钮
"加上 RSS / 订阅功能"新增 functions/api/rss.js
"支持作品评论"新增 functions/api/comments.js + 评论 KV namespace

反例:不应触发本 Skill 的请求

  • "做一个景观项目展示站"(指特定项目站,不是设计师作品集) → 使用 landscapeflow Prompt
  • "做一个落地页 / SaaS / 电商网站" → 不属于作品集场景
  • "把我现有的简历改成网页" → 是简历不是作品集
  • 单纯的"AI 生成一段作品介绍"(不建站) → 不需要建站 Skill

输出契约

执行完成后,向用户输出以下结构化结果:

✅ 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 中的版权和联系方式

© TencentEdgeOne, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 19 other files (references) in skills/portfolio-flow of TencentEdgeOne/awesome-website-prompts-and-skills.

  • SKILL.md
  • .DS_Store
  • references/ai-generate.md
  • references/auth-jwt.md
  • references/deploy-workflow.md
  • references/design-system.md
  • references/portfolio-crud.md
  • references/portfolio-knowledge.md
  • references/stats-kv.md
  • templates/admin.html
  • templates/functions/_middleware.js
  • templates/functions/api/assistant.js
  • templates/functions/api/auth.js
  • templates/functions/api/generate.js
  • templates/functions/api/portfolios.js
  • templates/functions/api/stats.js
  • templates/index.html
  • … and 3 more

Open the folder on GitHubat commit e3f25bd

Compare with similar skills

Portfolio Flow next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Portfolio Flow compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Portfolio Flow this skillTencentEdgeOne/awesome-website-prompts-and-skills183—~1.3kAutomated safety check: PassMIT
Loginthedaviddias/ux-patterns-for-developers258—~1.1kAutomated safety check: PassCustom licence
Vue Component Developmentgdarko/laravel-vue-starter145—~1.1kAutomated safety check: PassMIT
Game UI UXukanwat/overtime3871 repos~2.2kAutomated safety check: PassApache-2.0
Auth Web CloudbaseTencentCloudBase/CloudBase-AI-Toolkit1.1k2 repos~4.4kAutomated safety check: NotesMIT
Ee Featurerhesis-ai/rhesis397—~398Automated safety check: PassCustom licence

Similar skills

  • Login

    thedaviddias/ux-patterns-for-developers

    A skill your agent uses when implementing user authentication and sign-in forms.

    258 GitHub stars~1.1k tokensUpdated 4 days ago
    Backend & APIsAuto-check passed
  • Vue Component Development

    gdarko/laravel-vue-starter

    Activate when creating or modifying Vue 3 components, pages, layouts, stores, or services in the frontend.

    145 GitHub stars~1.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed
  • Game UI UX

    ukanwat/overtime

    Design and build game UI/UX — HUDs, menus, and overlays — that survive every screen: anchor- based responsive layout, resolution/aspect scaling and safe areas, keyboard/gamepad focus navigation, a…

    387 GitHub starsUsed in 1 repo~2.2k tokens
    Frontend & DesignAuto-check passed
  • Auth Web Cloudbase

    TencentCloudBase/CloudBase-AI-Toolkit

    CloudBase Web Authentication Quick Guide for frontend integration after auth-tool has already been checked.

    1.1k GitHub starsUsed in 2 repos~4.4k tokens
    Backend & APIsAuto-check: notes
  • Ee Feature

    rhesis-ai/rhesis

    Add a new Enterprise Edition feature behind a feature gate, across backend and frontend.

    397 GitHub stars~398 tokensUpdated yesterday
    Backend & APIsAuto-check passed
  • Configure and verify optional cross-device portal login, QR activation, explicit approval, browser binding, cancellation, and lifecycle through Caddy.

    2.3k GitHub stars~2.3k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

More from TencentEdgeOne/awesome-website-prompts-and-skills

  • Edgeone Pages Website Skeleton

    TencentEdgeOne/awesome-website-prompts-and-skills

    基于 EdgeOne Pages 的全栈网站生成方案。用户说一句话(如「帮我建一个电商站」「做一个AI客服站」「做个管理后台」),AI 自动组合 Auth、Cart、Payment、AI Chat、Admin 五大模块,生成完整 Next.js 前后端代码并部署到 EdgeOne Pages 全球 CDN。支持电商、AI 助手、SaaS 管理后台三大模板。底层使用 Edge…

    183 GitHub stars~2.2k tokensUpdated 4 mo ago
    Auto-check: notes
  • SaaS Landing Gen

    TencentEdgeOne/awesome-website-prompts-and-skills

    Generate a complete SaaS landing page with EdgeOne Pages deployment.

    183 GitHub stars~1.3k tokensUpdated 4 mo ago
    Auto-check passed

Questions about Portfolio Flow

What does Portfolio Flow do?

Generates a complete designer portfolio website with admin login, portfolio CRUD management, AI-powered project description generation, theme customization (5 presets or custom hex), and visit…. Portfolio Flow is an agent skill from TencentEdgeOne/awesome-website-prompts-and-skills. Generates a complete designer portfolio website with admin login, portfolio CRUD management, AI-powered project description generation, theme customization (5 presets or custom hex), and visit analytics.

When should I use Portfolio Flow?

Portfolio Flow fits situations like: A user wants to build a personal portfolio site; designers online showcase; individual brand website; multi-discipline design portfolio covering landscape.

How do I install Portfolio Flow in Claude Code?

Run `npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a claude-code`. Or copy the skill folder (skills/portfolio-flow in TencentEdgeOne/awesome-website-prompts-and-skills) into .claude/skills/portfolio-flow in your project. Claude Code loads it when a task matches its description.

How do I install Portfolio Flow in Codex?

Run `npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a codex`. Or copy the skill folder (skills/portfolio-flow in TencentEdgeOne/awesome-website-prompts-and-skills) into .agents/skills/portfolio-flow in your project. Codex loads it when a task matches its description.

Can I use Portfolio Flow in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/portfolio-flow, .gemini/skills/portfolio-flow, .github/skills/portfolio-flow and .opencode/skills/portfolio-flow in your project.

What does Portfolio Flow need to run?

Going by SKILL.md and its folder, Portfolio Flow needs JavaScript for the scripts in its folder and credentials named JWT_SECRET. Our summary lists: Node.js; A credential in JWT_SECRET.

Does Portfolio Flow access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Portfolio Flow safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Portfolio Flow use?

Portfolio Flow is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Portfolio Flow use?

About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 26k tokens, read only when the agent opens those files.

What are the alternatives to Portfolio Flow?

Skills that share tags, products or a category with Portfolio Flow: Login (thedaviddias/ux-patterns-for-developers, 258 stars), Vue Component Development (gdarko/laravel-vue-starter, 145 stars), Game UI UX (ukanwat/overtime, 387 stars) and Auth Web Cloudbase (TencentCloudBase/CloudBase-AI-Toolkit, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Portfolio Flow?

TencentEdgeOne (a GitHub organization) maintains it in TencentEdgeOne/awesome-website-prompts-and-skills, which has 183 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on June 4, 2026.

Source: TencentEdgeOne/awesome-website-prompts-and-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.