portfolio-flow

Files (20)

• .DS_Store
• SKILL.md
• 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 · references/
• admin.html · templates/
• _middleware.js · templates/functions/
• assistant.js · templates/functions/api/
• auth.js · templates/functions/api/
• generate.js · templates/functions/api/
• portfolios.js · templates/functions/api/
• stats.js · templates/functions/api/
• index.html · templates/
• login.html · templates/
• portfolio-detail.html · templates/
• styles.css · templates/

SKILL.md (first lines)

# 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` |

---

## 核心约束（必须遵守）

From TencentEdgeOne/awesome-website-prompts-and-skills, MIT.

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