用 AI 做一个设计师作品集¶
用提供的虚构人物和三个概念项目，做一个带筛选和详情展示的设计师作品集。下载素材后就能跟着做。
Demo 以虚构设计师“林序”为主角，包含项目筛选、详情、示例简历下载和邮箱复制。刊物配图由 JarlessAPI 生成。
你需要准备¶
- 完成 软件接入与第一次对话，使用能读写本地文件的 Codex、Claude Code 等编程工具。
- 打开 练习文件夹，把上面的示例素材下载并“全部提取”。
- 一个浏览器。第一次练习不需要购买域名或安装网页框架。
把解压得到的 portfolio-materials 放进练习文件夹。profile.md 是人物与项目资料，resume.txt 是示例简历，project-cover.jpg 是可用配图。.md 是纯文本文件，可以用记事本打开。
1. 让 AI 先读材料，再制作¶
在软件的对话框中粘贴这段需求。下面是交给 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 可直接用浏览器打开，手机也能阅读。
内容：直接使用素材中的虚构人物与项目，保持教学标识。缺少素材文件时告诉我具体缺哪一份。不编造客户、学校、奖项或商业成绩。“节奏”只作为界面概念展示。
先简述页面结构，再实际创建文件。完成后提供文件完整路径、打开方式和实际检查结果。
2. 打开网页，逐项操作¶
在文件管理器里找到 AI 给出的 portfolio-site/index.html，右键选择“打开方式 → 浏览器”。如果只得到了代码，继续说：“请实际保存成文件，并告诉我完整路径。”
| 你来操作 | 完成标志 |
|---|---|
| 点击“看看我的作品” | 页面移动到作品区域 |
| 切换三个分类 | 分别显示 3、1、2 个作品 |
| 点击任一作品，再按 Escape | 详情对应作品；关闭后回到原页面 |
| 点击“下载简历” | 得到能打开的 TXT 文件，内容与资料一致 |
| 点击复制邮箱 | 成功有提示；受浏览器限制时提供手动复制文本 |
| 缩窄窗口到手机宽度 | 文字、图片与按钮可读，页面不横向滚动 |
参考网站里的“节奏”计时器是项目预览图形，点击会展示设计说明。网页本身需要可用的操作是筛选、详情、下载与复制。
3. 完成一次具体修改¶
请把第二个作品标题改成“节奏 · 专注工具”，保留项目简介。把它调整为默认列表中的第一个作品，分类筛选后的数量仍为 3 / 1 / 2。完成后重新打开页面，检查卡片和详情标题都已更新。
刷新网页，检查排序和两处标题。完成这次修改，就走完了“提供素材 → 生成网页 → 检查交互 → 调整内容”的练习。想继续尝试，可以再换一种配色或版式。
卡住时从这里继续¶
- 图片消失：确认完整解压了素材，图片与 HTML 在 AI 指定的位置；把文件夹结构发给 AI 检查路径。
- 下载了错误的简历：确认按钮链接到刚更新的文件，留意是否保存了多个同名文件夹。
- 手机上有横向滚动：告诉 AI 哪个区域超出屏幕及窗口宽度，让它检查固定宽度和长标题。
- 复制没有反应：让 AI 增加失败提示与手动复制方式。浏览器对本地文件的剪贴板权限可能不同。
配套网站已在本地浏览器检查桌面、窄屏与主要交互。你的 AI 输出可能采用不同布局，仍需要按上表验收。