Portfolio Builder
将用户的工作转化为一页式作品集。Claude 在聊天中规划内容，锁定到 BRIEF.md，然后提供 Claude Code 提示。Claude Code 在本地构建，推送到 GitHub，Netlify 部署。Claude 随后审计仓库和在线站点。
此技能生成的所有内容的写作规则：口语化、直接语气、短句、不使用破折号em-dash（仅用常规连字符）。
阶段 1：收集前先询问
- 抽取已知信息：记忆、历史对话、在线站点（实际获取功能列表和文案）。
- 先草拟内容清单。切勿从空白问卷开始。
阶段 2：草拟简报 v1，然后最多询问 4 个决策
用真实文案草拟部分内容，仅询问会改变构建的问题：
- 主要受众（客户、招聘经理，或两者兼有，以及哪个更优先）。
- 可见性限制（当前雇主是否具名或泛化；任何需要保密的信息）。
- 哪些项目包含在内。
- 网站托管位置（Netlify 子域名即可，之后可更改）。
防护栏：
- 不虚构指标、推荐信或客户。
- 不包含用户未声称的成就（例如，在日常工作中未完成的 AI 工作）。
- 团队成果归为团队成果。
- 如果雇主保持泛化，也需删除任何可识别其身份的细节（如国家列表、精确头衔加行业）。说“五个市场”，而非列表。
- 注意区域措辞（例如，当某个国家跨洲时用“亚洲市场”）和英雄文案中的模糊代词。
项目包含规则：项目只有在实际在线且展示受众愿意付费的技能时才能获得展示位置。过多的副业会传递“没有时间为你服务”的信号。已暂停或过往的工作放入小型“来自实验室”行，并诚实地标注。未命名或未启动的项目暂缓。
工具：仅列出实际手动的工具。仅熟悉的工具放在一行脚注中（“也熟悉 X 和 Y”）。
阶段 3：填补空缺
询问：显示名称、头像、每个构建的一张截图、在线 URL、GitHub URL、联系邮箱、社交账号。重新撰写任何提供的网站文案，使其符合作品集风格（它是什么、针对谁、你构建了什么）。 每个卡片链接必须指向实际描述该项目的页面。如果页面未准备好，则不提供链接并标注（例如“即将推出”）。 将任何未准备好的内容（预订链接、“与我合作”、推荐信）推迟到“以后”列表，而不是阻止 v1 发布。
阶段 4：锁定 BRIEF.md
按以下顺序编写 BRIEF.md，包含这些部分：
- 目标（10 秒测试：他们构建了什么、证据、如何联系他们）
- 受众
- 文案规则（语气、无破折号em-dashes、可见性和准确性防护栏、按原样使用文案）
- 技术（纯 HTML/CSS/原生 JavaScript，无构建步骤；index.html, styles.css, main.js, /assets；GitHub + Netlify；Lighthouse 95+；移动优先）
- 设计方向（默认类似Apple：Inter 或系统字体、大量留白、~1080px 最大宽度、~680px 文本块、紧凑的大标题、中性调色、20-24px 卡片圆角、细线边框、一个着重色使用适度、亮/暗模式切换、渐变淡入效果尊重减少动效偏好、截图放在极简浏览器框架卡片中、固定模糊导航）
- 布局规则（从一开始就内嵌）：
- 导航和每个部分共享一个容器，确保所有左边缘对齐。
- 每个间隔使用一个间隔令牌（约 96px 桌面、56px 移动）；无叠加内边距。
- 英雄区域在 1366x768 和 375x812 分辨率下（包括浏览器工具栏，约 650px 和 635px 可见区域）需在首屏可见。
- 标题：移动端使用 text-wrap pretty，桌面端使用 balance；无强制换行。
- 每个部分都有一个可见标题或眉标签，确保无内容悬浮。
- 资源（确切文件路径；截图转换为 WebP 并附带更小的移动端尺寸，首屏下方懒加载；如果缺失则显示占位符，绝不出现破损图像）
- 页面内容，从上到下，包含最终文案：英雄区、我的工作（3 张卡片）、构建（特色卡片 + 网格 + 实验室行）、我的构建方式、工具（分组标签）、背景条、原则（用自己的话，不是借用的引语）、联系区、页脚
- SEO 和元数据（标题、描述、OG 图像、favicon、语义 HTML、alt 文本、焦点状态、AA 对比度）
- 预填细节：仓库 URL、首选子域名及备选、社交账号、邮箱，避免 Claude Code 重复询问
- 以后（不在 v1 中）
着重色：选择一个与构建截图中颜色不同的颜色。提供亮模式和暗模式下的确切十六进制值，并检查两种模式下链接和按钮文本在着重色上的 AA 对比度（暗模式按钮通常需要在浅着重色上使用深色文本）。
交付 BRIEF.md 作为文件。
阶段 5：设置步骤 + 4 个提示
设置（一次性）：
- 创建一个空的 GitHub 仓库，然后
git clone <repo-url>到本地文件夹，确保 git 已经配置。 - 将 BRIEF.md 放在根目录；添加 /assets 和 /assets/shots 目录，并放入命名的文件。
- 在该文件夹中打开 Claude Code。
提示 1，规划：
请完整读取 BRIEF.md。先不要编写代码。
给我一个简短的构建计划：文件结构、逐部分布局、你将使用的颜色令牌和字体缩放、以及你在简报中看到的任何问题或冲突。控制在单屏以内。
着重色：亮模式下为 <LIGHT_HEX>，暗模式下为 <DARK_HEX>。适度使用它，并确认两种模式都通过 AA 对比度，包括按钮文本。
帮助用户在一条可粘贴的回复中回答其问题。
提示 2，构建：
严格按照 BRIEF.md 和我们商定的计划构建网站。
- 逐字使用文案。任何地方都不能有破折号em-dashes。
- 纯 HTML、CSS、原生 JavaScript。无框架、无构建步骤。
- 着重色：亮模式下为 <LIGHT_HEX>，暗模式下为 <DARK_HEX>。其他所有内容保持中性。
- 遵循 BRIEF.md 中的布局规则（共享容器、一个间隔令牌、英雄区域在首屏）。
- 使用 /assets 中的图片作为 WebP。如果缺失，显示清晰的占位符。
- 亮模式和暗模式、固定模糊导航、滚动淡入效果（支持减少动效）。
完成后，启动本地服务器并告诉我 URL 以便我审查。
提示 3，优化：
像苹果公司的高级设计师那样审查网站，然后修复你发现的问题：
1. 检查 375px、768px、1366px 和 1440px 下的显示。无水平滚动，无拥挤。
2. 所有左边缘对齐；每个部分间隔使用同一个间隔令牌。
3. 英雄区域在 1366 和 375 分辨率下（包含浏览器工具栏）需在首屏可见。
4. 暗模式看起来是有意设计的，而不是简单反转。着重色在两种模式下均清晰可读。
5. 可访问性：alt 文本、焦点状态、AA 对比度、语义标题。
6. 搜索所有文件中的破折号em-dashes 并替换它们。
7. 运行 Lighthouse 并将所有四项评分提升到 95+。
给我一个简短的更改列表。
然后用户提供自然语言反馈，直到满意。
提示 4，推送和部署：
此文件夹已从 <REPO_URL> 克隆。
1. 添加 .gitignore 和 netlify.toml（发布目录 = 根目录，合理的缓存头，以及 404 用于 BRIEF.md 和源 PNG 文件，使其不公开）。
2. 用清晰的消息提交所有内容并推送到 main。
3. 将仓库连接到 Netlify。先尝试 <SUBDOMAIN>，备选 <FALLBACK>。如果 Netlify 的 GitHub 应用无法看到仓库，告诉我如何授予访问权限。
注意：Claude Code 经常一步到位完成构建、优化和部署。这完全可以；直接跳到审计。
阶段 6：推送后审计
当仓库或在线 URL 被分享后：
- 克隆仓库并检查：文案与 BRIEF.md 匹配，无虚构内容，无破折号em-dashes，无受限制的名称，所有链接正确，图片为 WebP 格式并包含 alt 文本和尺寸，meta/OG/favicon 已存在，内部文件未在在线站点上暴露。
- 在浏览器中审查在线站点的视觉表现，分别在 1440 和 1366（亮模式）以及 375（暗模式）下检查：边缘对齐、间隔一致性、英雄区域在首屏、标题换行、无重叠。
- 将修复内容作为一条可粘贴的 Claude Code 提示给出，然后在推送后重新检查。 如果仓库为空，直接说明并要求用户先推送。
已知问题：
- Netlify 会在 2026 年 8 月 19 日之后创建的免费计划项目上添加“Powered by Netlify”徽章。它不在代码中：在项目设置 > 常规 > Powered by Netlify 徽章中关闭它，每个项目单独设置。
- 在线 Lighthouse 评分因慢速连接而变化；建议使用 pagespeed.web.dev 进行评判，而非仅依赖本地运行。
阶段 7：同步其余身份
提供对齐 GitHub 个人资料 README（以及其他简介）与作品集的服务：相同的定位语句、相同的联系邮箱、指向在线构建和作品集的链接，并移除作品集故意省略的项目。