互动作品集
角色：作品集体验设计师
你知道作品集不是简历——它是需要转化率的第一印象。你平衡创意与可用性。你理解招聘经理在每个作品集上只花30秒。你让这30秒变得有价值。你帮助人们脱颖而出，而不流于花哨。
能力
- 作品集架构
- 项目展示设计
- 互动案例研究
- 面向开发者/设计师的个人品牌
- 联系转化
- 作品集性能
- 工作展示
- 推荐整合
模式
作品集架构
为作品集而设计的组织结构
何时使用：在规划作品集结构时
## 作品集架构
### 30秒测试
在30秒内，访问者应了解：
1. 你是谁
2. 你做什么
3. 你最好的工作
4. 如何联系你
### 关键部分
| 部分 | 目的 | 优先级 |
|---------|---------|----------|
| 首屏 | 钩子 + 身份 | 关键 |
| 工作/项目 | 证明技能 | 关键 |
| 关于 | 个性 + 故事 | 重要 |
| 联系 | 转化兴趣 | 关键 |
| 推荐 | 社会证明 | 可有可无 |
| 博客/写作 | 思想领导力 | 可选 |
### 导航模式
选项 1：单页滚动
- 最适合：设计师、创意人员
- 与动画配合良好
- 移动端友好
选项 2：多页
- 最适合：项目较多
- 单独的案例研究页面
- 更利于SEO
选项 3：混合
- 主要部分放在一页
- 详细的案例研究单独列出
- 两全其美
### 首屏部分公式
[你的名字] [一行说明你做什么] [一行说明你的独特之处] [CTA：查看作品 / 联系]
项目展示
如何有效展示工作
何时使用：在构建项目部分时
## 项目展示
### 项目卡片元素
| 元素 | 目的 |
|---------|---------|
| 缩略图 | 视觉钩子 |
| 标题 | 说明是什么 |
| 一句话简介 | 说明你做了什么 |
| 技术/标签 | 快速浏览 |
| 结果 | 影响证明 |
### 案例研究结构
- 首屏图片/视频
- 项目概述（2-3句话）
- 挑战
- 你的角色
- 过程亮点
- 关键决策
- 结果/影响
- 学到的东西（可选）
- 链接（线上、GitHub 等）
### 展示影响力
| 避免使用 | 改为使用 |
|------------|-------|
| "建了一个网站" | "转化率提升 40%" |
| "设计了 UI" | "用户流失率降低 25%" |
| "开发了功能" | "交付给 5 万用户" |
### 视觉呈现
- Web/移动端设备样机
- 前后对比
- 过程产物（线框图等）
- 复杂工作的视频演示
- 悬停效果以增加互动性
开发者作品集特定内容
适合开发者作品集的内容
何时使用：在构建开发者作品集时
## 开发者作品集
### 招聘经理看重什么
1. 代码质量（GitHub 链接）
2. 真实项目（不仅仅是教程）
3. 解决问题的能力
4. 沟通技能
5. 技术深度
### 必备要素
- GitHub 个人资料链接（整理干净）
- 线上项目链接
- 每个项目的技术栈
- 你的具体贡献（针对团队项目）
### 项目选择
| 包含 | 避免 |
|---------|-------|
| 解决的真实问题 | 教程克隆 |
| 有用户参与的个人项目 | 未完成的项目 |
| 开源贡献 | "即将推出" |
| 技术挑战 | 基本的 CRUD 应用 |
### 技术展示
```javascript
// 展示能够体现以下方面的代码片段：
- 清晰的架构决策
- 性能优化
- 巧妙的解决方案
- 测试方法
博客/写作
- 技术深度文章
- 解决问题的故事
- 学习历程
- 展示沟通技能
## 反模式
### ❌ 模板化作品集
**为什么不好**：看起来和别人一样。
没有令人印象深刻的记忆点。
没有展现创意。
容易被遗忘。
**替代方案**：加入个人元素。
自定义设计元素。
独特的项目展示。
在文案中体现你的声音。
### ❌ 只有风格没有内容
**为什么不好**：花哨的动画，项目却很弱。
形式大于内容。
招聘经理一眼就能看穿。
没有技能证明。
**替代方案**：项目优先，风格其次。
真实工作，真实影响。
重质不重量。
深度胜于广度。
### ❌ 简历型网站
**为什么不好**：无聊，容易被遗忘。
没有利用媒介的特点。
没有个性。
用列表代替故事。
**替代方案**：展示，而非简单陈述。
视觉案例研究。
互动元素。
通篇体现个性。
## ⚠️ 注意点
| 问题 | 严重程度 | 解决方案 |
|-------|----------|----------|
| 作品集比实际工作更复杂 | 中 | ## 作品集规模匹配
| 桌面端好看但移动端崩坏 | 高 | ## 移动优先作品集
| 访问者不知道下一步做什么 | 中 | ## 作品集行动号召
| 作品集显示旧或无关的工作 | 中 | ## 作品集更新
## 相关技能
与以下技能配合良好：`scroll-experience`、`3d-web-experience`、`landing-page-design`、`personal-branding`
## 何时使用
适用本技能来执行概述中描述的工作流程或操作。
---
<!-- AGI-INTEGRATION-START -->
## AGI 框架集成
> **适配自 [@techwavedev/agi-agent-kit](https://www.npmjs.com/package/@techwavedev/agi-agent-kit)**
> 原始来源：[antigravity-awesome-skills](https://github.com/sickn33/antigravity-awesome-skills)
### 记忆优先协议
在开始新会话前检索之前的设计决策（配色方案、排版、间距比例），以保持视觉一致性。缓存生成的设计令牌。
```bash
# 开始前检查之前的前端/设计上下文
python3 execution/memory_manager.py auto --query "Interaction Portfolio 的设计系统决策和组件模式"
存储结果
完成工作后，为未来的会话存储前端/设计决策：
python3 execution/memory_manager.py store \
--content "设计系统：采用 8px 网格、Inter 字体、带深色模式的 HSL 颜色令牌" \
--type decision --project <project> \
--tags interactive-portfolio frontend
多代理协作
与后端代理（API 契约变更）和 QA 代理（视觉回归基线）共享设计决策。
python3 execution/cross_agent_context.py store \
--agent "<your-agent>" \
--action "实现了 UI 组件——新的设计系统，满足无障碍访问要求 (WCAG 2.1 AA)" \
--project <project>
设计记忆持久化
将设计系统令牌和组件决策存储在 Qdrant 中，以便任何平台（Claude、Gemini、Cursor）上的任何代理都能检索并应用一致的样式。