跳至主要內容

Claude设计助手深度实战：和Figma是什么关系？中国大陆能用吗？团队落地完整指南

老张2026/4/30大约 29 分钟

Claude设计助手深度实战：和Figma是什么关系？中国大陆能用吗？团队落地完整指南

适读人群：产品经理、UI设计师、前端工程师 | 阅读时长：约15分钟 | 技术栈：Claude API + Spring Boot

开篇故事

去年年底，我们团队来了一个新产品经理，叫小林。她之前在一家做 SaaS 的公司待过，对 AI 工具比较感兴趣。入职第一周，她就跑来问我："老张，听说 Claude 可以直接生成 UI，那我们是不是可以不用买 Figma 了？"

我当时愣了一下，然后问她："你从哪里看到这个说法的？"

她拿出手机给我看了一篇文章，大意是"Claude Artifacts 可以生成可交互的前端原型，完全替代设计工具"。

我看完那篇文章，心里叹了口气——这种文章害人不浅。写这些文章的人，要么根本没用过，要么用了一两次就开始吹，完全不提边界和局限。

小林的问题让我意识到，这个认知误区在产品、设计、开发圈子里其实非常普遍。上个月我在一个技术分享会上提到我们团队在用 Claude 辅助设计工作流，结束后有将近七八个人来找我私聊，问的几乎都是同一类问题：Claude 和 Figma 是什么关系？国内能用吗？怎么接入团队？

问的人多了，我就干脆把这些经验整理成文章，一次说清楚。

这篇文章不是广告软文，也不是手册式的功能罗列。是我用了将近一年、踩了不少坑之后，真实的使用心得。有什么说什么。

一、先搞清楚：Claude 和 Figma 根本不是一个维度的东西

这一节我要重点讲，因为这个认知不纠正，后面用起来一定会踩坑。

Claude 是什么？

Claude 是 Anthropic 出品的大语言模型对话助手。你给它文字输入，它输出文字、代码、或者可以在界面里预览的内容。它本质上是一个文字驱动的智能助理，擅长理解需求、生成内容、写代码、分析问题。

Claude 有一个叫 Artifacts 的功能，可以在对话侧边栏实时渲染 HTML/CSS/JavaScript/React/SVG 代码，你能看到一个可以点击的"原型"。这个功能确实挺酷的，让很多人误以为 Claude 能替代设计工具。

但 Artifacts 的本质是代码渲染，不是设计编辑。你没法拖拽调整布局，没法直接修改单个元素的样式，没法导出标注，没法管理设计资产，没法做多页面的流程跳转联动——这些都是设计工具的核心能力。

Figma 是什么？

Figma 是一个协作设计工具，用来做界面设计、原型、设计系统管理、标注交付。它是设计师的主战场，支持矢量编辑、组件库、自动布局、版本管理、多人实时协作。

Figma 最近推出了 Figma AI 和 Figma Make 功能，在设计工具内嵌入了 AI 能力——可以根据描述在画布上生成设计、自动对齐、智能填充内容等。Figma AI 是在 Figma 的生态里增强 Figma 的功能，它的边界也是 Figma 的边界。

两者的关系：协作，不是替代

我用一个工作流来说明正确的配合方式：

  • 需求分析 → Claude：产品经理把需求文档扔给 Claude，让它提炼核心用户故事、梳理信息架构、识别潜在的体验问题。这是 Claude 的强项，几分钟能干完人工半天的活。
  • 快速出图 → Claude Artifacts：在进入 Figma 之前，先让 Claude 生成一个 HTML 原型，让产品和开发先对框架结构达成共识。这一步节省大量无效沟通。
  • 精细化设计 → Figma：确定大方向之后，设计师接手，在 Figma 里做像素级精修、组件管理、设计系统维护。
  • 前端代码生成 → Claude：设计稿出来后，前端工程师把设计描述或截图+说明喂给 Claude，辅助生成对应的 React/Vue 组件代码，提升还原效率。
  • 代码审查 → Claude：写完的前端代码让 Claude 做一轮可访问性和最佳实践检查。

这五步里，Claude 和 Figma 各司其职，互相配合。你把其中任何一个拿掉，工作流就会断掉。

有同学可能会问：那 Figma AI 和 Claude 的 Artifacts 功能不是在抢同一块地盘吗？有一定重叠，但侧重点完全不同。Figma AI 的强项是在已有设计稿的基础上做微调和增强，而 Claude 的强项是从零开始、基于文字描述生成代码原型。前者是精修工具，后者是草稿生成器。

二、Claude 在设计场景能做什么（附 Prompt 模板）

说完定位，来讲实际能力。这一节我会给出具体的 Prompt 写法，不是教科书式的"你可以这样做"，而是我自己用顺手的模板，直接拿去改改就能用。

2.1 用 Artifacts 生成 UI 原型

这是最常用的场景。关键在于 Prompt 的写法。

差的写法（我最开始就是这么写的）：

帮我设计一个用户列表页面

结果：Claude 给你生成一个非常"示例化"的界面，布局可能不错，但和你实际需求差了十万八千里。

好的写法（给足约束条件）：

请用 HTML + Tailwind CSS 生成一个 B 端后台的用户管理列表页面。

要求：
1. 整体风格：浅色主题，专业、简洁，参考企业级管理系统风格
2. 页面宽度：适配 1440px 屏幕，内容区域最大宽度 1200px
3. 顶部：面包屑导航（系统管理 / 用户管理）
4. 主内容区：
   - 搜索栏：用户名、手机号、状态（下拉选择）三个筛选项 + 查询按钮 + 重置按钮
   - 操作按钮区：新增用户（主按钮，蓝色）、批量删除（次级按钮）
   - 数据表格：包含序号、用户名、手机号、邮箱、角色、状态（启用/禁用 tag）、创建时间、操作列（编辑/删除）
   - 分页：显示总条数，每页10/20/50条可选，上一页/下一页
5. 表格数据：填入5条虚假但看起来真实的数据
6. 操作列的编辑和删除按钮要有 hover 效果
7. 代码要完整可运行，不要省略任何部分

Tailwind CDN 版本：使用 https://cdn.tailwindcss.com

两个 Prompt 的差距，不是 Claude 能力的差距，是信息量的差距。你给的约束越具体，生成结果越接近你要的效果。

Artifacts 的边界在哪里：

能做好的：单个页面的静态/轻交互布局、表单、列表、卡片、弹窗。

做不好的：复杂的多页面跳转逻辑、依赖后端数据的真实交互、细节像素级对齐、复杂的动效、图表（ECharts/D3 这类需要初始化的库往往容易出错）。

2.2 设计系统文档生成

这个用法很多人没想到，但非常实用。

如果你的团队有 Figma 设计系统，可以把 Figma 导出的 Token JSON 文件，或者把设计规范的截图+文字说明喂给 Claude，让它生成结构化的组件文档。

Prompt 模板：

以下是我们设计系统的颜色 Token 和字体规范（JSON 格式），请帮我生成一份 Markdown 格式的设计系统文档，包含：
1. 颜色系统：按主色/中性色/语义色分类，每个颜色标注 Token 名、HEX 值、适用场景
2. 字体规范：按标题/正文/辅助文字分级，标注字号、行高、字重
3. 每个规范项给出一句"使用说明"，说明什么情况用、什么情况不用
4. 文档风格：面向前端开发工程师，专业、简洁

Token JSON 如下：
[粘贴 JSON 内容]

这个 Prompt 在我们团队实际跑出来的效果非常好，原来设计师手写文档要半天，现在 Claude 给草稿，设计师校对改 20% 就能用。

2.3 从设计描述到组件代码

前端工程师最常用的场景。设计稿出来之后，不需要完全手写代码，把设计描述告诉 Claude，它能给出框架代码，工程师再做精修。

Prompt 模板：

请基于以下设计稿描述，生成一个 React 组件（TypeScript，使用 Ant Design 5.x 组件库）：

组件名称：UserCard
功能：展示用户基本信息卡片
设计描述：
- 卡片背景白色，圆角 8px，有 1px 浅灰边框，hover 时有轻微阴影
- 左侧：用户头像（圆形，直径 48px），头像右侧竖向展示用户名（14px 加粗）和职位（12px 灰色）
- 右侧：标签列表，显示用户技能标签（最多显示 3 个，超出显示 +N）
- 底部：上次活跃时间（左对齐）和一个"查看详情"文字按钮（右对齐）
- 组件接收 Props：name, avatar, title, tags[], lastActiveTime, onViewDetail

请包含 Props 类型定义，样式用 styled-components 实现。

注意这里我指定了 Ant Design 5.x 和 styled-components，这就是给足上下文。如果你用的是 MUI 或者 Element Plus，就替换掉。不给组件库上下文，Claude 生成的代码和你现有项目完全对不上，这是我踩过的坑（后面踩坑章节详细讲）。

2.4 设计评审辅助

这个用法比较冷门，但我觉得很有价值。把设计稿的截图（或者 HTML 原型链接）加上业务背景，让 Claude 从 UX 角度做评审。

Prompt 模板：

这是我们某电商平台 B 端订单管理页面的设计稿截图，请从以下角度给出评审意见：
1. 信息架构：关键信息的层级和位置是否合理
2. 操作效率：高频操作是否容易触达
3. 错误预防：表单和操作是否有足够的防误设计
4. 一致性：是否有明显违反常见设计规范的地方
5. 可访问性：颜色对比度、文字大小是否存在问题

业务背景：用户是仓库管理员，每天处理 200-500 条订单，主要设备是 1920x1080 的台式机。

请给出具体的问题描述和改进建议，不要泛泛而谈。

Claude 在这个场景的输出质量取决于你给的上下文有多丰富。业务背景越清晰，反馈越有针对性。我用这个方式做过几次设计评审前的"预审"，发现了一些人工评审容易忽略的问题。

三、中国大陆怎么用 Claude？现实情况全说清楚

这一节是很多读者最关心的，我来说实话，不说废话。

3.1 claude.ai 官网

现实：需要科学上网，且对 IP 质量要求相当高。

不是随便一个节点就能用。我测试过，很多常见的共享 VPN 节点在打开 claude.ai 的时候会直接报错，或者登录时卡在验证页面。原因是 Anthropic 会对 IP 做质量检测，检测到是 IDC 数据中心 IP（很多 VPN 出口 IP 都是这类）会拒绝。

能用的情况：住宅 IP 节点（Residential IP），或者美国、日本、新加坡等地区的高质量独享节点。

还有一个坑：如果你频繁切换节点，账号可能被风控，轻则要求重新验证，重则封号。这个我亲身踩过，后面踩坑章节详细说。

注册： 需要海外手机号验证（中国大陆手机号不支持），或者通过 Google/Apple 账号授权。实测 Google 账号授权是最顺畅的方式。

稳定性评估： 个人学习偶尔用可以，但不适合作为团队生产工具依赖。

3.2 Claude API（Anthropic 官方 API）

官方 API 调用在中国大陆有一个灰色地带：官方没有显式封锁中国大陆的 API 访问，但注册需要海外信用卡，且服务条款里关于地区限制有模糊表述。

从技术角度：API 调用是 HTTPS 请求，只要网络通，调用本身没问题。很多开发者会在服务器上（海外服务器）部署一个转发层，国内业务调这个转发层，转发层再调 Anthropic API，这样绕开了网络问题。

合规性注意： 如果是公司级应用，特别是涉及用户数据的，要认真评估数据出境合规问题。把用户数据发给 Anthropic API，根据《数据安全法》和《个人信息保护法》的要求，需要做数据出境影响评估。这不是我在吓你，是真实的合规风险，别等出事了才想到。

3.3 国内企业落地的合规方案

这才是企业真正应该走的路。目前可行的方案有以下几个：

方案一：AWS Bedrock

这是目前我最推荐的企业方案。AWS Bedrock 上有 Claude 系列模型（claude-3-5-sonnet、claude-3-opus 等），通过 AWS 的标准 API 调用，计费走 AWS 账单。

优点：

  • AWS 是合规云服务商，在中国大陆有 AWS 宁夏/北京区域
  • 数据不出 AWS 网络（取决于你选的 Region）
  • 企业可以签署 BAA（数据处理协议），满足合规要求
  • AWS SDK 对接文档完善，和 Bedrock API 的接入成本很低

注意：AWS Bedrock 的 Claude 模型目前在 us-east-1、us-west-2 等美国区域可用，中国区目前尚未上线 Claude，所以数据仍会到美国节点。但走 AWS 企业合同，合规层面相对有保障。

方案二：第三方 API 中转服务（如 OpenRouter 等）

OpenRouter 等平台把多个 AI 模型的 API 整合在一起，统一提供访问。注册相对简单，对中国大陆用户比较友好。

优点：接入方便，价格有时比直连便宜。

风险警告： 这类服务是第三方，数据安全完全依赖对方。你发过去的 Prompt 和接收的数据，理论上都经过了第三方服务器。对于涉及商业机密或用户数据的场景，请谨慎使用，最好只用于公开内容生成。

方案三：Claude Code（命令行工具）

Claude Code 是 Anthropic 推出的 CLI 工具，开发者可以直接在终端里和 Claude 交互，并且它有很强的代码操作能力（可以读写文件、执行命令）。网络层面，Claude Code 访问的还是 Anthropic 的服务，网络条件要求和 API 调用类似，但因为是开发者工具，使用场景相对固定，节点质量要求没那么高。

适合场景：个人开发者日常使用，不适合企业生产环境。

3.4 推荐策略

用户类型推荐方案
个人学习/试用claude.ai 网页版 + 稳定节点
个人开发者Claude Code CLI 或 API 直接访问（海外服务器中转）
中小企业AWS Bedrock（Claude 模型）+ 企业 AWS 账户
大型企业/金融/医疗等合规要求高的谨慎评估，建议走 AWS Enterprise 或等待 Anthropic 国内落地

四、团队落地：从注册到工作流整合的完整步骤（含代码示例）

这一节是工程师视角的落地指南，按步骤来，不废话。

Step 1：注册和 API Key 获取

  1. 访问 console.anthropic.com（需要科学上网）
  2. 点击 Sign Up，推荐用 Google 账号授权注册，省去邮箱验证流程
  3. 注册成功后进入控制台，点击左侧 "API Keys"
  4. 点击 "Create Key"，给 Key 起名（建议按项目/环境区分，如 prod-design-assistant）
  5. 重要：Key 只显示一次，立刻复制保存到安全的地方（1Password、Vault 等）
  6. 在 "Settings > Billing" 里绑定信用卡（需要 Visa/MasterCard 海外信用卡）并充值

价格参考（2024 年底数据，以官网最新为准）：

  • claude-3-5-sonnet：输入 $3/百万 token，输出 $15/百万 token
  • claude-3-haiku：输入 $0.25/百万 token，输出 $1.25/百万 token（性价比很高，适合高频低复杂度任务）

Step 2：VS Code / Cursor 集成 Claude

Cursor 方案（推荐）：

Cursor 内置了对 Claude 的支持，设置步骤：

  1. 打开 Cursor 设置（Cmd+,）
  2. 进入 "Models" 标签
  3. 在 "API Keys" 区域填入 Anthropic API Key
  4. 选择默认模型为 claude-3-5-sonnet-20241022
  5. 在代码文件中按 Cmd+K 或 Cmd+L 即可调用

VS Code 方案（使用 Continue 插件）：

  1. 在 VS Code 扩展市场搜索安装 "Continue"
  2. 打开 ~/.continue/config.json，添加：
{
  "models": [
    {
      "title": "Claude 3.5 Sonnet",
      "provider": "anthropic",
      "model": "claude-3-5-sonnet-20241022",
      "apiKey": "sk-ant-xxxx"
    }
  ]
}
  1. 重启 VS Code，侧边栏会出现 Continue 面板

Step 3：团队共享使用规范（Prompt 库建设）

这一步很多团队跳过，然后就出现了"每个人用出来效果差距很大"的问题。

建议建一个团队共享的 Prompt 模板库，最简单的做法是一个 Git 仓库 + Markdown 文件，按场景分类：

prompts/
  design/
    ui-prototype.md       # UI 原型生成模板
    component-doc.md      # 组件文档生成模板
    design-review.md      # 设计评审模板
  dev/
    react-component.md    # React 组件生成模板
    api-design.md         # API 接口设计模板
  product/
    prd-review.md         # PRD 评审模板
    user-story.md         # 用户故事拆分模板

每个模板文件包含：场景说明、使用前提、Prompt 正文（用 [占位符] 标注需要替换的部分）、示例输出。

团队每周或每两周做一次 Prompt 评审会，把效果好的 Prompt 沉淀进去，效果差的标注注意事项。这个习惯养成之后，新人上手速度会明显加快。

Step 4：设计-开发工作流整合

我们团队目前的标准工作流如下：

  1. 需求 → Claude 分析：产品经理把需求文档发给 Claude，输出信息架构图（Mermaid 格式）和用户流程梳理，放进 Confluence
  2. Claude 原型 → 对齐：前端工程师根据信息架构让 Claude 生成 HTML 原型，与产品、设计开一个 30 分钟对齐会
  3. Figma 精修 → 标注交付：设计师接手，在 Figma 里做精细化设计，完成后导出标注
  4. Claude 辅助还原：前端拿到 Figma 标注后，把复杂组件的设计描述发给 Claude，辅助生成组件代码框架
  5. Review → 上线：正常 Code Review 流程

这套工作流实践下来，新功能从需求到上线的设计环节时间缩短了大约 40%。

Step 5：成本控制

Token 费用如果不控制，很容易超预期。我踩过这个坑，后面踩坑章节详细讲。

几个控制手段：

  • 设置 max_tokens 上限：避免 Claude 生成过长的回答。对于代码生成，一般 2048-4096 就够了
  • 用 Prompt Caching（提示缓存）：如果你有固定的系统 Prompt（比如团队规范、项目上下文），开启 Prompt Caching 可以大幅降低费用，缓存的 Token 只按 10% 计费
  • 选合适的模型：不是所有任务都需要 claude-3-5-sonnet。简单的文案优化、格式整理，用 claude-3-haiku 就够，成本低 10 倍以上
  • 设置用量告警：在 Anthropic 控制台的 Billing 页面设置月度用量告警，超过阈值发邮件提醒
  • 记录 Token 用量：在业务代码里把每次请求的 input_tokens 和 output_tokens 记录到日志，方便排查哪个功能最"烧钱"

完整的 Spring Boot + Claude API 示例代码

下面是一个真实可用的示例：在 Spring Boot 服务里集成 Claude API，实现一个"根据需求描述生成 UI 建议"的功能。

pom.xml 依赖：

<dependency>
    <groupId>com.squareup.okhttp3</groupId>
    <artifactId>okhttp</artifactId>
    <version>4.12.0</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
</dependency>

ClaudeApiClient.java：

package com.example.ai.client;

import com.fasterxml.jackson.databind.ObjectMapper;
import okhttp3.*;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.util.*;

@Component
public class ClaudeApiClient {

    private static final String API_URL = "https://api.anthropic.com/v1/messages";
    private static final String API_VERSION = "2023-06-01";
    private static final MediaType JSON_MEDIA = MediaType.get("application/json; charset=utf-8");

    @Value("${claude.api.key}")
    private String apiKey;

    @Value("${claude.api.model:claude-3-haiku-20240307}")
    private String model;

    @Value("${claude.api.max-tokens:2048}")
    private int maxTokens;

    private final OkHttpClient httpClient = new OkHttpClient();
    private final ObjectMapper objectMapper = new ObjectMapper();

    /**
     * 发送消息到 Claude API，返回文本响应
     *
     * @param systemPrompt 系统提示词（定义角色和行为规范）
     * @param userMessage  用户消息
     * @return Claude 的回复文本
     */
    public String sendMessage(String systemPrompt, String userMessage) throws IOException {
        Map<String, Object> requestBody = new HashMap<>();
        requestBody.put("model", model);
        requestBody.put("max_tokens", maxTokens);
        requestBody.put("system", systemPrompt);

        List<Map<String, String>> messages = new ArrayList<>();
        Map<String, String> userMsg = new HashMap<>();
        userMsg.put("role", "user");
        userMsg.put("content", userMessage);
        messages.add(userMsg);
        requestBody.put("messages", messages);

        String jsonBody = objectMapper.writeValueAsString(requestBody);

        Request request = new Request.Builder()
                .url(API_URL)
                .post(RequestBody.create(jsonBody, JSON_MEDIA))
                .addHeader("x-api-key", apiKey)
                .addHeader("anthropic-version", API_VERSION)
                .addHeader("content-type", "application/json")
                .build();

        try (Response response = httpClient.newCall(request).execute()) {
            if (!response.isSuccessful()) {
                String errorBody = response.body() != null ? response.body().string() : "empty body";
                throw new IOException("Claude API 调用失败，状态码: " + response.code()
                        + "，响应: " + errorBody);
            }
            String responseBody = response.body().string();
            Map<?, ?> responseMap = objectMapper.readValue(responseBody, Map.class);
            List<?> content = (List<?>) responseMap.get("content");
            Map<?, ?> firstContent = (Map<?, ?>) content.get(0);
            return (String) firstContent.get("text");
        }
    }
}

DesignAssistantService.java：

package com.example.ai.service;

import com.example.ai.client.ClaudeApiClient;
import org.springframework.stereotype.Service;

import java.io.IOException;

@Service
public class DesignAssistantService {

    private static final String SYSTEM_PROMPT = """
            你是一个专业的 UI/UX 设计顾问，拥有 10 年 B 端产品设计经验。
            你的任务是根据需求描述，给出具体的 UI 设计建议，包括：
            1. 页面信息架构建议（关键元素和层级）
            2. 交互模式建议（操作流程）
            3. 视觉设计要点（布局、颜色使用原则）
            4. 潜在的体验风险点
            
            输出格式要求：
            - 使用 Markdown 格式
            - 每个建议要具体，不要泛泛而谈
            - 适当举例说明
            - 控制在 800 字以内
            """;

    private final ClaudeApiClient claudeApiClient;

    public DesignAssistantService(ClaudeApiClient claudeApiClient) {
        this.claudeApiClient = claudeApiClient;
    }

    /**
     * 根据需求描述生成 UI 设计建议
     *
     * @param requirementDescription 需求描述（用户方输入的自然语言需求）
     * @return 结构化的 UI 设计建议
     */
    public String generateDesignSuggestion(String requirementDescription) {
        String userMessage = "请针对以下需求给出 UI 设计建议：\n\n" + requirementDescription;
        try {
            return claudeApiClient.sendMessage(SYSTEM_PROMPT, userMessage);
        } catch (IOException e) {
            throw new RuntimeException("调用 Claude API 生成设计建议时出错", e);
        }
    }
}

DesignAssistantController.java：

package com.example.ai.controller;

import com.example.ai.service.DesignAssistantService;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.Map;

@RestController
@RequestMapping("/api/design-assistant")
public class DesignAssistantController {

    private final DesignAssistantService designAssistantService;

    public DesignAssistantController(DesignAssistantService designAssistantService) {
        this.designAssistantService = designAssistantService;
    }

    @PostMapping("/ui-suggestion")
    public ResponseEntity<Map<String, String>> getUiSuggestion(
            @RequestBody Map<String, String> body) {
        String requirement = body.get("requirement");
        if (requirement == null || requirement.isBlank()) {
            return ResponseEntity.badRequest()
                    .body(Map.of("error", "requirement 不能为空"));
        }
        String suggestion = designAssistantService.generateDesignSuggestion(requirement);
        return ResponseEntity.ok(Map.of("suggestion", suggestion));
    }
}

application.yml 配置：

claude:
  api:
    key: ${CLAUDE_API_KEY}          # 从环境变量读取，不要硬编码
    model: claude-3-haiku-20240307  # 用 haiku 降低成本
    max-tokens: 2048

调用示例：

curl -X POST http://localhost:8080/api/design-assistant/ui-suggestion \
  -H "Content-Type: application/json" \
  -d '{"requirement": "需要一个订单批量审核页面，运营人员每天处理约 300 条待审核订单，需要支持批量通过/拒绝，以及查看订单详情"}'

这个 demo 代码是简化版，生产环境还需要加：超时配置、重试机制、限流、异常监控、审计日志。但框架是完整的，可以直接跑起来验证。

五、完整工作流：Mermaid 图解

这个流程里有几个关键点：

  • Claude 不是在某一个固定节点介入，而是贯穿全链路
  • 每一次人工决策节点（对齐会、Code Review）都是质量关卡，不能被 AI 替代
  • 最后的设计系统文档更新这一步，很多团队都会忘掉，用 Claude 来做这件事成本很低

六、踩坑实录（5个真实的坑）

这里说的都是我们团队真实踩过的坑，没有加工美化。

坑1：让 Claude 生成复杂 UI，Artifacts 渲染出来布局乱掉

情况： 我让 Claude 生成一个带左侧导航、顶部 header、右侧内容区三栏布局的管理后台首页，结果在 Artifacts 渲染出来，左侧导航和内容区重叠了，header 高度也不对。

原因分析： 我的 Prompt 没有给约束。我只说了"三栏布局，左侧导航宽 240px"，但没说用 Flex 还是 Grid，没说 header 高度，没说视口高度怎么处理。Claude 生成的代码有自己的判断，但这个判断不一定符合你的预期。

解法： 把布局约束说清楚。比如：

使用 CSS Flexbox 实现：
- 整个页面 height: 100vh，overflow: hidden
- header 固定高度 64px，背景色 #ffffff，有 1px 底部阴影
- 左侧导航固定宽度 240px，背景色 #001529，高度 calc(100vh - 64px)，可滚动
- 主内容区 flex: 1，overflow-y: auto，padding: 24px，背景色 #f0f2f5

给了这些约束之后，生成结果几乎不需要再手动调了。

坑2：用 Claude 生成的 React 代码直接放进项目，和设计系统不兼容

情况： 一个新来的前端同学，让 Claude 生成了一个用户表单组件，代码看起来挺好，直接复制进了项目。结果 Review 的时候我发现，这个代码里用的是 MUI（Material UI）的组件，而我们项目用的是 Ant Design，两套 UI 库混用，样式全乱了。

原因： 他在 Prompt 里没有说明项目使用的组件库，Claude 根据自己的判断选了 MUI。

解法： 永远在 Prompt 里明确声明技术栈上下文。我们后来在团队规范里加了一条：所有代码生成类 Prompt，开头必须包含"技术栈声明段"，格式如下：

技术环境：React 18 + TypeScript 5 + Ant Design 5.x + styled-components 6 + Vite

这行信息放在每个 Prompt 最开头，成为强制习惯之后，生成代码的可用率从大约 60% 提升到了 90% 以上。

坑3：在中国大陆用 VPN 访问 Claude，账号被风控封禁

情况： 我有一个 Claude Pro 账号，之前用得好好的。某天换了一个新 VPN 节点，登录之后用了一会儿，突然被要求重新验证手机号。验证完了还好，但同事遇到过更严重的情况：节点切换过于频繁，直接被封号，无法恢复。

原因： Anthropic 的风控系统会检测账号登录的 IP 变化。频繁切换节点，或者从一个国家切到另一个国家，会触发异常登录检测，轻则要求二次验证，重则封号。

解法：

  1. 固定使用同一个节点，不要频繁切换
  2. 节点选择住宅 IP 而不是 IDC IP，命中风控的概率低很多
  3. 个人用 claude.ai 只用来学习研究，核心业务需求走 API（API 被封号的情况很少见，网络条件允许就能用）

如果你已经被封号了，官方的建议是发邮件给 support@anthropic.com，说明情况，很多用户反映回复很慢（1-2 周），而且不一定能解封。所以预防比补救重要。

坑4：用 API 生成大量设计文档，Token 费用超预期

情况： 有一周我们在做一个大项目的设计系统整理，用 API 批量生成了大量组件文档。月底一看账单，超出了预算将近三倍。

原因排查后发现两个问题：

第一，系统 Prompt 写得很长，每次请求都要把几千字的规范说明带上，input_tokens 消耗极大。这些规范说明每次都是一样的，但没有开启 Prompt Caching。

第二，没有设置 max_tokens，有几次 Claude 生成了非常冗长的文档，output_tokens 远超预期。

解法：

  • 开启 Prompt Caching：在 API 请求的系统 Prompt 部分加上 "cache_control": {"type": "ephemeral"}，对超过 1024 tokens 的系统提示词生效，缓存后的调用费用降到 10%
  • 设置合理的 max_tokens：根据预期输出长度设置上限，宁可让 Claude 生成不完整然后再续，也不要不设上限
  • 用 claude-3-haiku 替代 sonnet 处理批量低复杂度任务

那周之后，我把费用控制规范写进了团队文档，并在 Anthropic 控制台设置了月度告警阈值。

坑5：团队用 Claude 对齐设计规范，每个人的 Prompt 质量差异大，导致结果不一致

情况： 我们推动团队用 Claude 生成组件文档，但三个工程师各自去问，得到的格式、详细程度、风格完全不一样。有人得到了详细的组件说明，有人得到了一堆代码示例，有人得到的是很简短的描述。

原因： 每个人的 Prompt 写法不一样。Prompt 写法的好坏直接决定输出质量，但这个能力差异很大，没有明确标准就会产生不一致。

解法： 建设团队 Prompt 模板库（前面 Step 3 提到的那套），并且：

  1. 把常用场景的 Prompt 固化成模板，不允许从零写
  2. 模板里有明确的"占位符"格式，只替换变量部分，不改结构
  3. 每季度做 Prompt 效果评审，把好的案例整理进来

这件事做完之后，团队生成结果的一致性明显提升，新来的同学也更容易上手。

七、Claude vs Figma AI：对比表 + 适用场景判断

维度ClaudeFigma AI
产品定位AI 对话助手，可生成 UI 原型代码内嵌于 Figma 的 AI 辅助设计功能
操作方式对话式，Artifacts 实时预览在 Figma 画布内操作，所见即所得
代码输出能力强（React/HTML/CSS 完整可运行代码）有限（主要面向设计稿，非生产代码）
设计精度原型级（布局正确，细节需打磨）生产设计级（像素精准，标注完整）
设计系统管理不支持完整支持（组件库、Token、版本管理）
多人协作不支持（对话是个人的）完整支持（实时协作、评论、版本历史）
中国大陆访问需要科学上网，IP 质量有要求Figma 官网可正常访问
学习成本低（会写对话就会用，Prompt 质量需打磨）中等（需熟悉 Figma 操作逻辑）
价格模式$20/月（Pro）或 API 按量计费含在 Figma 订阅中（Professional 及以上）
适合人群产品经理、前端工程师、全栈开发UI/UX 设计师，熟悉 Figma 的设计团队
最适场景快速原型/代码生成/文档撰写/需求分析精细化设计/设计系统管理/标注交付

怎么选：

如果你是设计师，Figma 是主工具，Figma AI 是提效插件，Claude 是辅助的"设计思路顾问"。

如果你是前端工程师，Claude 是主工具，Figma 是接收设计稿的地方，用 Claude 辅助代码还原。

如果你是产品经理，Claude 是你需求阶段的得力助手，Figma 是你的设计审查平台。

没有"更好的"那个，只有"适合这个场景的"那个。

八、实战案例：我怎么用 Claude 把设计文档时间压缩 80%

这个案例是真实发生过的事，细节做了脱敏处理。

背景： 去年 Q3，我们接手了一个某大厂旗下的电商 B 端后台项目，这个项目前任团队留下来了一堆没有文档的 Figma 设计稿，有几十个页面，涉及约 40-50 个自定义组件。新来的设计师需要接手并继续迭代，但没有任何设计规范文档，每次改东西都要翻以前的 Figma 文件比对。

之前的做法： 设计师手动整理，把组件截图、标注规范、使用说明一条条写进 Confluence。估算了一下，要把核心组件整理清楚，至少要 3 天。

引入 Claude 之后的做法：

第一步，我让设计师导出了 Figma 的 Design Token JSON（颜色、字体、间距、圆角等基础变量），大约 300 行 JSON。

第二步，写了一个 Prompt，把 Token JSON 和项目背景一起喂给 Claude：

我是一个电商 B 端后台项目的 UI 设计师，需要整理设计规范文档。

项目背景：
- 用户：电商平台运营人员，每天高频使用，熟练用户
- 主要功能：商品管理、订单管理、库存管理、数据报表
- 技术栈：Vue 3 + Element Plus，设计风格参考 Ant Design Pro

以下是我们的 Design Token JSON：
[粘贴 300 行 JSON]

请生成一份面向前端工程师的设计规范文档，包含：
1. 颜色系统（主色/功能色/中性色/背景色，每个说明适用场景）
2. 字体规范（标题/正文/辅助文字，标注字号/行高/字重/适用场景）
3. 间距规范（常用间距值和对应使用场景）
4. 圆角规范
5. 每条规范附一句"使用原则"，说明应该在什么情况下使用，什么情况下不应该使用

格式要求：Markdown，适合放进 Confluence 的结构，用标题层级组织，重要内容用粗体。

第三步，Claude 在大约 30 秒内输出了一份 1500 字的规范草稿，结构完整，措辞专业。

第四步，设计师花了大约 2 小时校对、补充 Claude 没有捕捉到的视觉细节（比如某些边框在特定状态下的变化，这些在 Token JSON 里没有体现），然后直接粘贴进了 Confluence。

耗时对比：

阶段之前（手动整理）现在（Claude 辅助）
Token 导出0.5h0.5h
规范草稿生成1.5 天（手动写文字）0.5h（Claude 生成）
校对和补充1 天（边写边对比截图）2h（只做审核和补充）
格式整理0.5 天0h（格式已经 OK）
总计约 3 天约 3 小时

压缩了大约 80% 的时间。

最大的体会是： Claude 能做的不是"替代设计师的判断"，而是"替代设计师手动打字写文档"这件低价值的体力活。设计师的真正价值在于判断力和品味，让他们花时间在这上面，而不是在格式化文档上。

八、写在最后

写这篇文章的时候，我反复想的一件事是：AI 工具的价值不是"它能做什么"，而是"你怎么用它才能真正省时间、出结果"。

Claude 是个很强的工具，但它不是魔法。你给的上下文越准确，得到的结果越好；你对边界越清醒，就越不会对它期望过高然后失望。把它当成一个"非常博学但需要你明确说清楚需求的协作者"，是我觉得最准确的定位。

Figma 没有被替代，也不会被替代——设计工具做的事和语言模型做的事从根本上不同。但两者结合起来用，效率提升是真实的。

中国大陆使用的网络问题确实烦，但有可行的解法，关键是选对路径，不要在不合规的方式上冒险。

最后，Prompt 质量真的很重要。这不是玄学，是信息传递的质量决定了输出质量。团队层面把 Prompt 工程化，就像把代码规范化一样，是值得投入的事情。

编辑此页
最近更新:
贡献者: xiaozhangge