设计师用 Claude Code 上线产品：从想法到可用 Demo 的最短工作流

很多"不会写代码"的困境，本质上不是语法，而是缺一条能持续迭代的交付闭环：你能把需求说清楚，也能判断 UI/体验好不好，但在"落到代码并跑起来"这一步，往往被环境、工具链、部署卡住。

Claude Code 对设计师/产品最友好的点，是它把"写代码"变成了一个可对话的流程：你负责目标、约束和反馈，Claude 负责把它落成文件、命令和可运行的工程。

这篇文章按"最短可用链路"来讲：先跑通一个能上线的 Demo，再谈更复杂的功能与工程化。

1) 安装 Claude Code

有两种方式：

方式一：通过 npm 安装（命令行）

npm install -g @anthropic-ai/claude-code

安装完成后，在终端输入 claude 即可启动。

方式二：下载桌面应用（Mac）

直接下载 Claude Code 的 Mac 桌面应用，安装后打开即可使用，无需配置终端环境。

2) 终端基础命令速查

如果你从来没用过终端，先熟悉这几个命令——它们是你和 Claude Code 协作的基础：

claude            # 启动 Claude Code
cd folder-name    # 进入某个文件夹
cd ..             # 返回上一层目录
ls                # 列出当前目录的文件和文件夹（Mac/Linux）
pwd               # 显示当前所在路径（Mac/Linux）
mkdir folder-name # 创建新文件夹

不需要记住更多。日常操作中，这几个命令已经覆盖 90% 的场景。

3) 创建第一个项目

mkdir my-portfolio
cd my-portfolio
claude

进入 Claude Code 后，永远先要计划，再写代码。这是最重要的一条规则。

3.1 先要一份计划（让计划落到文件）

在 Claude Code 里直接说清楚目标与验收，要求它把计划写到 plan.md，例如：

在写任何代码之前，先研究并输出一份 plan.md。
我要做一个个人作品集网站，包含：
- 顶部 hero（名字 + 一句话定位 + CTA）
- Projects 区域（4 个项目卡片）
- About（简短介绍）
- Contact（链接到 Twitter / LinkedIn）

plan.md 里要包含：
1) 推荐技术栈（默认简单优先）
2) 文件结构
3) 设计注意事项（间距、排版、字体）
4) 分步骤实现计划（每步如何验证）

计划写出来以后，你要做的不是"全盘相信"，而是快速审一遍边界：

• 技术栈是不是太重（能不用框架就别先上框架）。
• 验证方式是否可执行（能不能 npm run dev 或者起一个本地 server）。
• 文件结构是否清晰（不要把所有东西塞一个文件）。

3.2 再让它按计划实现

按 plan.md 实现。先搭 HTML 结构，再补 CSS。每做完一个步骤，告诉我怎么本地预览验证。

如果你希望"零框架"，可以直接改计划：

把 plan.md 的技术栈改成纯 HTML/CSS（必要时少量原生 JS），不要 React/Next。

4) 迭代：本地预览 + 反馈循环

    flowchart LR
  A[目标/草图/约束] --> B[Plan: plan.md]
  B --> C[Implement: 生成代码]
  C --> D[Preview: 本地预览/测试]
  D --> E{达标?}
  E -- 否 --> F[反馈: 具体改动]
  F --> C
  E -- 是 --> G[Commit & Push]
  G --> H[Deploy: Vercel]
  

对静态站点来说，很多时候只需要一个本地 server：

npx serve

然后在浏览器打开它给出的本地地址。

接下来就是设计师最擅长的部分：给出可执行的反馈。

样式调整

Hero 区域要全屏（100vh），文字垂直居中。
Projects 卡片之间的间距太挤，卡片间距至少 32px。
卡片 hover 做一个轻微放大 + 阴影，但不要"跳动"。
全站字体改成 Inter（从 Google Fonts 引入），并调整行高让段落更松一点。

响应式适配

别只说"做成响应式"，把断点和布局说清楚：

做响应式：
- 小于 768px 时项目卡片改为单列
- 导航栏折叠成汉堡菜单
- 保持点击区域足够大（移动端）

功能迭代

每次迭代一个具体功能点，不要一次性堆太多需求：

给导航栏加一个平滑滚动到对应区域的效果。点击"Projects"应该滚动到 Projects 区域。

5) 提交到 GitHub：版本管理

一旦你开始"反复改"，就应该把代码放进版本管理。

5.1 创建 GitHub 仓库

1. 注册/登录 GitHub
2. 点击右上角 + → New repository
3. 输入仓库名（如 my-portfolio），选 Public 或 Private
4. 不要勾选 “Initialize with README”（因为你本地已经有文件了）
5. 点击 Create repository

5.2 本地初始化并推送

git init
git add .
git commit -m "Initial commit"
git remote add origin <你的仓库地址>
git push -u origin main

5.3 添加 README.md 和 claude.md

让 Claude 帮你生成项目说明：

创建一个 README.md，描述这个项目的功能、技术栈和如何本地运行。

同时，创建一个 claude.md 文件，记录项目的上下文和约束。这样每次重新打开 Claude Code 时，它能快速理解项目：

创建 claude.md，记录：
- 项目目标和定位
- 技术栈选择及原因
- 目录结构说明
- 当前进度和待办事项
- 重要的设计决策

5.4 日常提交流程

之后每完成一个功能点，养成提交习惯：

git add .
git commit -m "Add responsive navigation"
git push

你也可以直接让 Claude 帮你提交：

把当前改动提交到 GitHub，commit message 写清楚改了什么。

6) 部署到 Vercel：让项目上线

方式一：通过 Vercel 控制台部署

1. 打开 Vercel 控制台并使用 GitHub 账号登录
2. 点击 Add New → Project
3. 导入你的 GitHub 仓库
4. 点击 Deploy
5. 等待构建完成，你会得到一个类似 my-portfolio-abc123.vercel.app 的在线地址

之后每次 git push，Vercel 会自动触发构建与发布。

方式二：通过 Claude Code 部署

直接在 Claude Code 里说：

把这个项目部署到 Vercel。

Claude 会引导你完成 Vercel CLI 的安装和登录，然后自动执行部署。

绑定自定义域名

如果你有自己的域名，可以在 Vercel 绑定：

1. 进入 Vercel 项目 → Settings → Domains
2. 输入你的域名，点击 Add
3. 到你的域名注册商后台，添加以下 DNS 记录：

4. 保存后等待 5–30 分钟，DNS 生效后即可通过自定义域名访问

7) 进阶：用 Supabase 加数据库与用户认证

当你的项目需要用户登录、数据存储时，Supabase 是设计师友好的选择——它提供数据库、认证、存储和 Edge Functions，有可视化的管理面板。

7.1 创建 Supabase 项目

1. 注册/登录 Supabase 并进入项目控制台
2. 点击 New Project，填写项目名和数据库密码
3. 等待项目创建完成

7.2 获取 API 凭据

1. 进入项目 → Settings → API
2. 复制 Project URL 和 anon (public) key
3. 在你的项目根目录创建 .env 文件：

SUPABASE_URL=你的项目URL
SUPABASE_ANON_KEY=你的anon_key

7.3 启用 Google 登录

1. Supabase 控制台 → Authentication → Providers
2. 找到 Google，点击启用
3. 你需要在 Google Cloud Console 创建 OAuth Client ID：
   • 打开 Google Cloud Console
   • 创建项目（或选择已有项目）
   • APIs & Services → Credentials → Create Credentials → OAuth Client ID
   • 应用类型选 Web application
   • 在 Authorized redirect URIs 中添加 Supabase 提供的回调地址
4. 将 Client ID 和 Client Secret 填回 Supabase 的 Google Provider 设置

7.4 让 Claude 帮你接入

我已经配置好了 Supabase 项目，API 凭据在 .env 文件里。
请帮我实现：
- Google 登录功能（使用 Supabase Auth）
- 登录后显示用户头像和名称
- 未登录用户可以浏览，但不能使用评论功能

8) 集成 AI 功能：OpenAI API

如果你想给网站加一个 AI 聊天组件或智能推荐功能：

8.1 获取 OpenAI API 密钥

1. 打开你选择的模型服务控制台
2. 进入 API Keys 页面，创建新的密钥
3. 复制并妥善保存（只显示一次）

8.2 安全存储密钥（通过 Supabase Edge Functions）

不要把 API 密钥放在前端代码里。正确的做法是通过服务端调用：

1. Supabase 控制台 → Settings → Edge Functions → Add Secret
2. 添加 OPENAI_API_KEY 作为密钥名，粘贴你的 API 密钥
3. 让 Claude 帮你创建 Edge Function 来代理 API 调用：

创建一个 Supabase Edge Function，用来代理 OpenAI API 调用。
要求：
- 从 Supabase secrets 读取 OPENAI_API_KEY
- 前端只需要调用这个 Edge Function，不直接接触 OpenAI
- 加一个基本的速率限制，防止滥用

这样 API 密钥始终留在服务端，前端代码里不会暴露任何敏感信息。

9) 卡住时怎么问：让 Claude 能复现、能定位、能验证

最有效的排障提示词通常包含三件事：复现步骤、完整报错、以及你希望的验收方式。

我遇到报错：
[粘贴完整错误信息]

复现步骤：
1) ...
2) ...

请你定位根因并修复。修复后请告诉我：
- 改了哪些文件
- 我应该运行什么命令验证（并说明预期输出）

如果是 UI 偏差，截图几乎总是比口述更快。把截图贴进去，然后让它逐项对齐差异。

10) 用 MCP 扩展输入：连接 Figma、Notion 等工具

当你的输入不止是"聊天窗口里的描述"，而是来自 Figma、Notion、数据库、Issue 系统时，可以考虑接入 MCP（Model Context Protocol），让 Claude Code 能直接读取外部工具里的信息再改代码：

• MCP 服务器：/docs/claude-code/advanced/mcp-servers/

例如，你可以通过 Figma MCP 连接 FigJam 的设计稿，再接回 Claude Code 生成代码，全程不需要手动碰一行代码。

实际使用里，建议先从 1~2 个最常用的工具开始，确认收益后再扩展，避免工具过多挤占上下文。

提示词速查模板

根据不同场景，直接套用这些模板可以提高沟通效率：

规划阶段

研究如何构建 [项目描述]，然后创建一个 plan.md 文件。
包含：推荐技术栈、文件结构、分步实现计划、每步的验收方式。

实现阶段

按照 plan.md 实现。先从 [某个组件/模块] 开始。
每完成一步告诉我如何验证。

添加功能

添加一个 [功能描述]，实现 [具体行为]。
如果需要，使用 [某个服务/API]。

调试排错

我遇到了这个错误：[粘贴错误信息]。
请定位原因并修复。修复后告诉我如何验证。

对设计师来说，Claude Code 最大的价值不是"替你写代码"，而是把交付的权力交还给你。你不需要学会编程语言的全部语法，你需要的是：能把想法说清楚、能判断结果好不好、能持续迭代直到满意。

这些能力，设计师本来就有。

参考链接

• Claude Code 安装配置：/docs/claude-code/getting-started/installation/
• Claude Code 最佳实践：/blog/claude-code-best-practices-playbook/
• MCP 服务器：/docs/claude-code/advanced/mcp-servers/