非开发者借助 AI 聊天功能搭建个人作品集网站
一本面向设计师的分步指南，帮助你构建自己的第一个应用。任务：作者是一名没有编程背景的设计师，使用 Claude Code 构建了一个带有 AI 聊天功能的个人作品集网站。工作流程包括安装 Claude Code，创建项目目录，并提示代理生成 plan.md 文件。作者审查并调整了计划，选择使用原生 HTML/CSS，然后指示 Claude Code 实现结构和样式。通过迭代提示优化响应性和功能，随后提交到 GitHub 并部署到 Vercel。人类参与包括审查计划、调整技术栈选择以及提供设计和功能反馈。；工具：Claude Code。人工角色：原帖没有说明人在过程中如何持续参与。；局限：该指南假设用户熟悉基本终端命令，并需要安装 Node.js 和 npm。它依赖于 GitHub、Vercel 以及可能用于高级功能的 Supabase/OpenAI 等外部服务，这些服务可能会产生费用或需要账户设置。来源未详细说明暴露 API 密钥或处理用户数据的安全影响。人类审查对于调整计划和调试至关重要，因为如果没有明确指导，AI 可能不会始终生成最优或安全的代码。。
工具
Agent Work Atlas 发布日期:
概述
一本面向设计师的分步指南，帮助你构建自己的第一个应用。
工作流程
作者是一名没有编程背景的设计师，使用 Claude Code 构建了一个带有 AI 聊天功能的个人作品集网站。工作流程包括安装 Claude Code，创建项目目录，并提示代理生成 plan.md 文件。作者审查并调整了计划，选择使用原生 HTML/CSS，然后指示 Claude Code 实现结构和样式。通过迭代提示优化响应性和功能，随后提交到 GitHub 并部署到 Vercel。人类参与包括审查计划、调整技术栈选择以及提供设计和功能反馈。
原文报告的结果
作者在 48 小时内成功部署了一个带有 AI 聊天组件的在线作品集网站。来源声称该网站可通过实时 URL 访问，但未提供作品集本身的具体性能指标或用户参与数据。作者还提到了构建其他项目，如俄罗斯方块游戏和增长设计工具，但这些与作品集案例无关。来源文本中未报告任何失败或负面结果。
人工角色
原帖没有说明人在过程中如何持续参与。
局限
该指南假设用户熟悉基本终端命令，并需要安装 Node.js 和 npm。它依赖于 GitHub、Vercel 以及可能用于高级功能的 Supabase/OpenAI 等外部服务，这些服务可能会产生费用或需要账户设置。来源未详细说明暴露 API 密钥或处理用户数据的安全影响。人类审查对于调整计划和调试至关重要，因为如果没有明确指导，AI 可能不会始终生成最优或安全的代码。
试一试
扮演一名使用 Claude Code 构建个人作品集网站的设计师。我没有编程背景。我的目标是创建一个静态网站，包含英雄区、项目画廊、关于我和联系信息，以及一个能回答关于我工作问题的 AI 聊天组件。 1. 安装 Claude Code 和 Node.js（如果尚未安装）。 2. 创建一个名为 'my-portfolio' 的新项目目录。 3. 启动 Claude Code 并提示它创建一个 'plan.md' 文件，概述技术栈（为简单起见首选原生 HTML/CSS）、文件结构和实施步骤。 4. 审查计划，如有必要，指示 Claude Code 进行调整。 5. 提示 Claude Code 根据计划实现 HTML 结构和 CSS 样式。 6. 通过提示迭代设计细节（例如响应性、悬停效果）。 7. 通过提示 Claude Code 集成合适的服务或暂时模拟它，来添加 AI 聊天组件功能。 8. 初始化 Git 仓库，提交代码，并推送到新的 GitHub 仓库。 9. 将网站部署到 Vercel 并验证实时 URL。 在部署或推送到 GitHub 之前，向我展示本地预览并请求我的确认。如果发生任何错误，提供错误消息并询问如何修复。未经我明确批准，不要在外部 API 上花钱。
来源报告未经独立核验。发布日期为本站案例发布日期，并非原始文章日期。