设计师作品集 Demo¶
用配套示例资料，做一个带项目筛选和详情展示的作品集网页。
| 项目 | 说明 |
|---|---|
| 适用 | 有本地文件读写能力的 Codex、Claude Code 等工具 |
| 输入 | portfolio-materials 中的虚构人物资料、项目说明、配图和示例简历 |
| 输出 | 本地网页 Demo，含分类筛选、项目详情与示例文件下载 |
| 来源与状态 | 本站编写，2026-09-15 更新；配套网站已浏览器检查，完整客户端生成流程待验证 |
复制使用¶
下载 示例素材包，解压到练习文件夹，然后把下面整段发到 AI 的对话框。
请读取当前练习文件夹中的 portfolio-materials，为虚构设计师“林序”制作一个中文作品集网页 Demo。
目标：展示 AI 制作网页的效果，让访客浏览三个概念作品，并体验分类筛选、项目详情和文件下载。
材料：profile.md 是内容依据；resume.txt 用于下载；project-cover.jpg 是 FIELD NOTES 项目的配图。
页面包括：
1. 首屏自我介绍，标题“把复杂的问题，设计得简单。”
2. FIELD NOTES、节奏、MARGIN 三个作品，标明各自类别。
3. 全部 / 界面设计 / 编辑设计筛选，数量应为 3 / 1 / 2。
4. 点击作品查看对应详情，能用关闭按钮和 Escape 键关闭。
5. 关于我、示例简历下载和示例邮箱复制，操作后有明确反馈。
视觉：米白背景、钴蓝强调色、大标题和有留白的编辑式布局。让主作品有大图，其余作品有各自的预览。
实现：新建 portfolio-site 文件夹，HTML、CSS、JavaScript 与图片在本地保存，不依赖框架或远程脚本。index.html 可直接用浏览器打开，手机也能阅读。
内容：直接使用素材中的虚构人物与项目，保持教学标识。缺少素材文件时告诉我具体缺哪一份。不编造客户、学校、奖项或商业成绩。“节奏”只作为界面概念展示。
先简述页面结构，再实际创建文件。完成后提供文件完整路径、打开方式和实际检查结果。
继续修改¶
把第二个作品改名为“节奏 · 专注工具”，调整到第一个位置。同步修改卡片与详情，检查全部 / 界面设计 / 编辑设计仍分别显示 3 / 1 / 2 个作品。