企业官网建设流程全解析

做 Android 开发这几年，我最怕的不是复杂业务逻辑，而是拿到设计稿后那句"照着还原就行"。设计稿里藏的信息太多了：间距、字号、颜色、圆角、阴影、透明度、不同屏幕下的显示效果，全靠肉眼去量去猜，最后往往要对着一两个像素抠半天。尤其页面一多，手写 XML 布局的时间经常比业务代码还长。最近我把 MasterGo 和 Claude Code 串在了一起用，让 AI 直接根据设计稿信息生成 Android 布局，跑通之后效率提升非常明显。这篇文章是我完整试过之后的实践总结，包含真实用过的 Prompt、踩过的坑以及可以直接抄作业的流程，适合 Android 开发者、想提升 UI 还原效率的客户端工程师，也适合在做设计交付协作的独立开发者。

1. 这个组合到底解决了什么问题

1.1 传统设计稿交付的三个痛点

先说说过去常见的流程。设计师在协作工具里把页面画完，开发者自己开标注面板去看尺寸，再手动写布局。这个过程有三个非常磨人的地方：

第一个是信息割裂。尺寸看一屏、颜色看一屏、切图又要切到资源面板，设计师改一版样式，开发就要重新核一遍所有数值。第二个是还原靠感觉。很多设计稿里并没有明确的间距基准、颜色变量，开发看到 18px 间距就会习惯性写成16dp，最后预览全凭个人手感。第三个是重复劳动。页面一多，大部分结构的写法都是类似的，一个列表 item 能在三四个页面里出现，但每次都要重新写一遍。

这三个痛点叠加起来，就会出现一个经典场景：开发花一天写完布局，设计师看完说"左边距少了 2dp，标题字重不对"，然后又是新一轮手工调整。真正的问题不是谁不认真，而是整个链路里缺少一个能把设计稿的"结构化信息"直接翻译成"结构化代码"的环节。

1.2 MasterGo 与 Claude Code 各自承担的角色

MasterGo 在这个流程里的核心价值，是它天然提供了开发者需要的标注数据。不需要安装额外插件，打开分享链接就能看到每一个图层的位置、尺寸、颜色、圆角、阴影、透明度，还能直接复制 CSS 风格的数值参数。这些数据非常规整，适合作为 AI 的输入来源。

Claude Code 的价值则是它可以真正"驻留"在项目里工作。它不是那种在网页里问一句生成一段代码的聊天助手，而是能直接读取 Android 工程结构、理解现有资源文件、在终端里连续执行修改任务的编码代理。给它一个明确的设计稿描述和技术约束，它可以一次生成布局文件、资源文件、字符串文件，并且能根据预览结果继续迭代。

简单说：MasterGo 负责提供"设计稿事实"，Claude Code 负责把这些事实翻译成"Android 工程代码"。前者解决信息准确性的问题，后者解决重复劳动和翻译效率的问题。

1.3 整体工作流的顺序为什么不能反

我一开始试过反过来的做法：先截图设计稿发给 Claude Code，让它"看着截图写布局"。结果效果很不稳定。AI 对截图里的像素颜色判断会偏，尺寸也只能靠猜，生成出来的布局经常和设计稿差得很远。

所以最后沉淀下来的顺序是固定的：先做结构化提取，再让 AI 生成代码。具体五步走：从 MasterGo 提取标注数据、把页面结构整理成 Markdown 描述文档、用 Claude Code 读取文档生成布局、在 Android Studio 里预览校对、带着修正指令让 AI 迭代调整。这个顺序最重要的好处是——AI 拿到的不是模糊的图片，而是精确的数字。颜色是#4A90D9就是#4A90D9，间距是 24 就是 24，不再需要它去猜。

2. 准备工作：从 MasterGo 拿到真正有用的信息

2.1 环境与项目准备清单

在开始之前，我建议先把环境备齐。你不需要买任何东西，但下面这几样是必须的：

• MasterGo 账号，并且拥有设计稿的查看权限，最好能进到标注模式。
• 一个本地可运行的 Android Studio 项目，哪怕是最新的空 Activity 模板也行。
• Claude Code CLI，确认在终端里能执行claude命令并完成登录。
• 设计稿对应的基准信息：设计稿宽度、页面名称、需要实现的页面清单。

这些看起来基础，但第一个坑就藏在这里。如果设计稿本身没有明确的页面名称和图层命名，后面让 AI 生成代码时，它连"这个块是什么"都判断不出来。我之前遇到过一个设计稿，所有图层都叫"矩形 1""矩形 2"，生成出来的布局没法看。所以尽量选图层命名规范的设计稿，或者先用 MasterGo 的重命名功能把关键节点理一遍。

2.2 MasterGo 里值得重点查看的几类标注信息

打开 MasterGo 的标注模式后，点击任意图层，右侧面板会显示非常全的属性。我总结出五类信息，是生成布局时最高频用到的：

第一是尺寸与位置。选中的图层宽度、高度、X/Y 坐标，这个决定了layout_width、layout_height和约束关系。第二是间距，包括图层与图层之间的距离，在 MasterGo 里可以通过选中一块区域查看间隔尺寸。第三是颜色，填充色、描边色、透明度，背景色和文字色都在这里。第四是文本属性，字号、行高、字重、对齐方式，这些直接映射到 TextView 的textSize、lineSpacingExtra、textStyle。第五是效果，圆角大小、阴影角度、模糊数值，圆角可以直接对应到 drawable 的radius，阴影则需要转成elevation或者自定义 shape。

还有一个被很多人忽略的东西是图层树。打开图层面板，整个页面的嵌套结构一目了然。这个结构可以直接复制进描述文档里，作为 Claude Code 理解页面骨架的依据。我在实际项目里都是把图层树截图，再结合标注数据一起喂给 AI，生成的布局结构会明显更接近设计稿。

2.3 把设计稿整理成结构描述文档

整理描述文档是整个流程里最值得花时间的一步。花 15 分钟把页面结构写清楚，后面 AI 生成代码时能少改十次。

我习惯用 Markdown 记，模板很简单，不需要花哨。以某个登录页为例：

# 登录页设计稿描述 ## 页面基本信息 - 页面名称：登录页 - 设计稿基准宽度：375 - 页面背景：纯色 #FFFFFF ## 节点结构 - 根布局，全屏 - 顶部留白区域，高度约 120 - Logo，尺寸 72x72，水平居中，距离顶部留白 24 - 标题"欢迎回来"，字号 24，加粗，水平居中，距离 Logo 24 - 手机号输入框，宽度铺满左右间距 32，高度 48，距离标题 40 - 验证码输入框，宽度同上，高度 48，距离手机号输入框 16 - 登录按钮，宽度铺满，高度 48，圆角 24，距离验证码输入框 32 ## 颜色清单 - 主按钮背景：#4A90D9 - 主按钮文字：#FFFFFF - 标题文字：#1A1A2E - 输入框背景：#F5F6FA - 输入框文字：#333333 ## 字体清单 - 标题："欢迎回来"，字号 24sp，加粗 - 按钮文字：字号 16sp，加粗

这份文档不需要包含每一个像素的细节，但要保证关键结构、间距、颜色、字号都在。Claude Code 生成代码时，主要就是依赖这份文档里的数值。

2.4 技术约束要写进文档里

很多人忽略的一点是：除了设计稿描述，技术约束也一定要写进文档里。Claude Code 默认会按照它自己的风格写代码，如果你不说清楚项目的技术规范，它生成的布局很可能和你现有的代码风格对不上。

我通常会追加一段"技术约束"章节：

## 技术约束 - 根布局使用 ConstraintLayout，尽量扁平化，禁止超过两层嵌套。 - 尺寸单位一律使用 dp，文字使用 sp。 - 颜色统一写入 res/values/colors.xml，不要在布局里写死色值。 - 字符串写入 res/values/strings.xml。 - 间距常量写入 res/values/dimens.xml。 - 按钮优先使用 MaterialButton。

这段约束非常重要，它决定了 AI 产出的代码是不是"能直接用"而不是"看起来像那么回事"。第一次跑的时候我不写这些，结果 Claude Code 把所有颜色都写死在 XML 里，后面要改主题色，改得我想骂人。加上约束之后，生成的代码质量明显提了一个档次。

3. 实操：用 Claude Code 生成一个登录页布局

3.1 先把空工程交给 Claude Code 建立上下文

进入工程目录后，直接启动 Claude Code：

cd your-android-project claude

启动之后不要急着让它生成布局。先让它扫一遍工程结构，把上下文建立起来。我会先发一条这样的指令：

这是一个空的 Android 项目，我准备在里面实现一个登录页。 请你先看一下当前工程目录结构、build.gradle 里的依赖、 以及 res 目录下已有的资源文件，然后告诉我你了解到的信息。

这一步非常有必要。Claude Code 在项目里工作，首先要建立"它正在一个 Android 工程里"的心智模型。它会去读 Gradle 配置、检查是否引入了 Material Components 依赖、确认 minSdk 版本。这些因素都会影响它生成代码时的选择。如果工程还没有 Material 依赖，它生成的代码里却用了MaterialButton，编译就会直接失败。所以先让它熟悉环境，比直接怼指令要稳得多。

3.2 Prompt 示例：让 AI 按设计稿生成布局

上下文建立好之后，把写好的设计稿描述文档放进工程里，比如放在docs/design/login-page.md，然后发指令：

请阅读 docs/design/login-page.md 里的登录页设计稿描述， 在 app/src/main/res/layout/activity_login.xml 中生成完整布局。 要求： 1. 严格按照描述文档里的节点结构和尺寸实现。 2. 根布局使用 ConstraintLayout，保持层级扁平。 3. 颜色写入 values/colors.xml，使用@color/xxx引用。 4. 字符串写入 values/strings.xml。 5. 尺寸数值用 dp，文字用 sp，间距对齐设计稿描述。 6. 生成完成后，把创建的或修改的文件列表告诉我。

这里有一个小技巧：尽量让指令具体到"文件路径"和"产物形式"。如果我一开始只说"生成登录页布局"，它可能把代码写在对话里而不落到文件，我还得手动复制。直接指定activity_login.xml，它就会真的创建文件，省事很多。

3.3 生成的 XML 长什么样，关键节点怎么理解

这是 Claude Code 根据上面描述生成的布局文件的精简版本，核心结构保留了：

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp"> <ImageView android:id="@+id/icLogo" android:layout_width="72dp" android:layout_height="72dp" android:layout_marginTop="120dp" android:contentDescription="@string/logo_desc" android:src="@drawable/ic_logo" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/tvTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:text="欢迎回来" android:textColor="@color/text_primary" android:textSize="24sp" android:textStyle="bold" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/icLogo" /> <EditText android:id="@+id/etAccount" android:layout_width="0dp" android:layout_height="48dp" android:layout_marginTop="40dp" android:hint="请输入手机号" android:inputType="phone" android:maxLines="1" android:background="@drawable/bg_input" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/tvTitle" /> <com.google.android.material.button.MaterialButton android:id="@+id/btnLogin" android:layout_width="0dp" android:layout_height="48dp" android:layout_marginTop="32dp" android:text="登录" android:textSize="16sp" android:textStyle="bold" app:cornerRadius="24dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/etAccount" /> </androidx.constraintlayout.widget.ConstraintLayout>

注意几个关键点：Logo 通过Top_toTopOf加marginTop实现距离顶部 120 的留白；标题用Top_toBottomOf和marginTop实现和其他节点的上下间距；输入框用0dp宽度加左右16dp的父布局 padding，实现"宽度铺满且留出边距"的效果；按钮用app:cornerRadius直接圆角。这个结构没有嵌套，所有节点挂在同一个 ConstraintLayout 下面，扁平且好维护。

不过这里要提醒一点：android:src="@drawable/ic_logo"对应的图片资源，需要你从 MasterGo 里导出后放到工程里，Claude Code 不会凭空生成图片。导出的图片统一放在res/drawable或对应的 density 目录下。

3.4 资源文件怎么跟着补齐

Claude Code 生成的布局里引用了@color/text_primary、@color/btn_login_bg这类资源，光有布局文件还不够，它会同步把colors.xml、strings.xml、dimens.xml一并创建或更新。我在colors.xml里看到的基本就是这个样子：

<resources> <color name="page_bg">#FFFFFF</color> <color name="text_primary">#1A1A2E</color> <color name="text_input">#333333</color> <color name="input_bg">#F5F6FA</color> <color name="btn_login_bg">#4A90D9</color> <color name="btn_login_text">#FFFFFF</color> </resources>

让 AI 把这些值抽离到资源文件里，不只是为了规范。后面设计换主题色，只要改这一个文件就能全局生效。如果当初把颜色写死在布局里，改起来就是灾难。我自己第一次偷懒让它别管资源文件，结果后期为了接主题换肤，硬是重构了一遍，血的教训。

3.5 预览反馈与迭代修改

文件生成完，切到 Android Studio 打开activity_login.xml的 Preview 面板。你大概率会发现一些问题，比如某个间距看起来偏大、字符间距和设计稿有差异、按钮圆角不对。这时候不要自己去 XML 里改，直接把问题反馈给 Claude Code：

我在 Preview 里看了下效果，发现两个问题： 1. 标题和 Logo 之间的距离在实际屏幕上看起来比设计稿大，请把 marginTop 从 24dp 改成 16dp。 2. 登录按钮的圆角看起来不够圆，设计稿是 24，请确认 MaterialButton 的 cornerRadius 是否生效。 请修改后重新生成相关文件。

这种"反馈-修改-再看"的循环，才是 Claude Code 最大的价值所在。它不是一次性生成工具，而是一个出现在你项目里的结对开发伙伴。你只需要描述问题，它负责修改代码。实测下来，一个正常的业务页面通常两三轮迭代就能达到可以交付的还原度。

4. 还原度提升的关键经验

4.1 先搞定单位：px、pt、dp、sp 之间的关系

新手最容易翻车的点就是单位。设计稿标注里以 pt 或 px 居多，而 Android 的资源文件里要用 dp 和 sp。如果不先约定好换算规则，Claude Code 生成的代码会出现"尺寸在真机上放大"的问题。

我的推荐做法是直接以"设计稿基准宽度"来约定。现在大多数移动端设计稿宽度是 375，以这个宽度为参照，标注里的 1 个逻辑像素约等于 Android 里的 1dp。也就是说，设计稿写 24px 间距，Android 布局里就用 24dp。至于不同 density 的真机，dp 本身会自动适配，不需要你手动折算。

文字则统一用 sp。Claude Code 生成的布局里24sp对应设计稿的 24 号字，基本能对上。唯一需要注意的是，部分设计稿的字体行高和 Android 原生 TextView 的计算方式不同，导致文字垂直位置偏上或偏下，这个靠includeFontPadding或lineSpacingExtra来微调，不能直接改字号硬对齐。

4.2 布局骨架怎么选，列表 item 怎么拆

让 Claude Code 生成布局时，要给它明确"页面骨架"的指令。我总结的默认规范是：单页面根布局优先 ConstraintLayout；上下简单的页面可以用 LinearLayout，但不要嵌套超过两层；列表类页面必须用 RecyclerView，不能把三四十个 item 全部塞进一个 ScrollView 里。

还有一个很重要的经验：列表 item 一定要单独生成一个布局文件。如果你的页面里有商品列表，不要让 Claude Code 在一个大布局里循环复制 item，应该单独写一个item_product.xml，然后在ProductAdapter里引用它。我在实际项目中的做法是：

请生成一个商品列表页面，结构如下： 1. 根页面布局 activity_products.xml，包含一个 RecyclerView。 2. item 布局 item_product.xml，包含商品图片、标题、价格、加入购物车按钮。 3. RecyclerView 的 item 间距通过 item 布局的 margin 控制。

这样拆分出来的代码干净很多，后续改 item 样式也不会影响页面骨架。如果 AI 一开始把 item 写进了主布局，你可以在反馈时明确要求"把 item 独立成文件"，它重写很快就完成。

4.3 颜色、透明度、圆角、阴影的提取方法

颜色是最容易提取的信息，直接在 MasterGo 标注面板复制数值就行，但要注意透明度。设计稿里经常出现#000000 40%这种写法，不能直接抄成#000000。要先把透明度换算成 ARGB 的 A 通道：40% 的十六进制是66，所以实际颜色应该是#66000000。Claude Code 默认不会帮你做这个换算，所以我在描述文档里会直接写完整色值，不给它调色的机会。

圆角方面，普通 View 的背景圆角建议用 drawable shape 资源，涉及按压态再考虑 selector。MaterialButton 可以直接用app:cornerRadius，这个最省事。阴影则要小心：设计稿的阴影通常带有模糊值和颜色，Android 的elevation只能做简单的投影，颜色和模糊不能完全复刻。我的经验是，重要页面的阴影宁可省略或者用半透明色块模拟，也不要让 AI 写一层复杂的 ViewOutlineProvider，过度设计反而影响性能。

4.4 适配与预览的边界在哪

Claude Code 生成代码时不可能知道你的真机屏幕大小，它只能按照描述文档里的基准宽度来写。所以"预览里看起来对"和"真机上没问题"是两回事。我建议拿到生成代码后，至少用 Android Studio 的 Preview 切几个常见尺寸看一下，比如 360x640、375x812、393x873。重点检查两侧边距、按钮宽度是否被拉伸、大字号下文字是否折行。

另外还有一个特殊场景：如果页面里有横滑区域、悬浮按钮、底部导航栏等内容，一定要在描述文档里单独写清楚。否则 AI 按普通页面布局处理，真机上容易出现被系统导航栏遮挡的问题。这类边距调整我一般会在反馈指令里强调：

这个页面的底部要留出 24dp 的安全边距，按钮不能被系统导航栏遮住。

一句话的事，但能省掉真机调试半小时。

5. 高频问题与排查方式

5.1 问题速查表

我把实际操作里碰到的问题整理成了速查表，按"现象-原因-解决办法"的方式写，遇到类似情况可以直接查。这里选几条比较有代表性的：

5.2 三个容易忽略的小坑

第一个坑是"图标资源缺失"。Claude Code 能把 ImageView 写对，但图片文件不会凭空冒出来。所有@drawable/xxx的资源都要你从 MasterGo 手动导出放进去。我一般在生成布局前，先把所有切图资源放进工程，避免生成后一堆红色的引用错误。

第二个坑是"string 资源和内容描述"。AI 生成的contentDescription有时候是乱写的英文，或者干脆没有。无障碍属性在项目自查时是硬指标，我会单独加一条指令让 Claude Code 检查所有 ImageView 是否都有合适的contentDescription。

第三个坑是"重复生成导致文件被覆盖"。如果你让 Claude Code 反复重新生成同一个布局文件，它可能把之前手写的注释或者微调全部重置。正确做法是明确要求它"只修改指定区域"而不是"重新生成整个文件"。

6. 进阶：把流程变成团队习惯

6.1 设计 Token 化，让 AI 每次都读同一份数据

当页面多起来之后，我发现挨个写 Markdown 描述文档还是慢。于是我把所有高频颜色、字号、间距抽成了一份"设计 Token"文件，相当于设计规范的机器可读版本。例如：

{ "color": { "primary": "#4A90D9", "text_primary": "#1A1A2E", "page_bg": "#FFFFFF" }, "spacing": { "xs": 4, "sm": 8, "md": 16, "lg": 24 }, "font_size": { "caption": 12, "body": 14, "title": 18, "headline": 24 } }

每次让 Claude Code 生成新页面布局时，只需要说"请优先参考项目根目录 design-tokens.json 里的数据"。这样页面之间天然统一，不会再出现这个页面间距 16、那个页面间距 18 的情况。

6.2 沉淀组件级模板

跑通几个页面之后，我发现 Claude Code 生成的很多代码是重复的。比如按钮、输入框、列表 item。我干脆让它把这些常用结构生成成组件模板，放进templates/android/目录。之后生成新页面时追加一条指令：

优先复用 templates 目录里的组件模板，不要重新发明新的写法。

这样既保证了代码风格一致，又让后续生成速度更快。模板里甚至可以包含注释，说明每个属性在设计稿里对应的含义，方便人审。

6.3 更新迭代时的增量协作

设计稿不是静态的，设计师改个间距、换个颜色都非常频繁。我现在的协作方式是：设计师在 MasterGo 里更新设计稿后，我只需要把变更部分对应的标注摘出来，更新到描述文档里，然后让 Claude Code 做增量修改。

比如设计师把登录按钮从 48dp 改成了 52dp，圆角从 24 改成 16。我就在文档里更新对应的数值，然后给 Claude Code 发指令：

登录按钮的高度从 48dp 改为 52dp，圆角从 24 改为 16。 其余内容保持不变，只修改相关属性。

这种增量式修改比重新生成整个界面稳得多，也不容易把之前调好的细节弄丢。

6.4 从 XML 平滑迁移到 Compose

如果你已经在用 Jetpack Compose，这套流程依然适用。甚至可以说，Compose 场景下 AI 的生成效果更好，因为 Compose 的布局描述更接近"结构化的 UI 代码"，没有 XML 里那些繁琐的属性标签。

我在 Compose 项目里的做法是：让 Claude Code 基于同一份描述文档生成对应的Composable函数，同时把设计稿里的颜色、间距、字体直接映射成 Compose 的MaterialThemeToken。生成的 UI 代码更简洁，后面做动画和状态驱动也比 XML 灵活。

有一点要提前想清楚：XML 布局和 Compose 布局不要混用在同一个页面里。页面级要么用 XML 要么用 Compose，组件级可以兼容。这个边界我会直接写进技术约束文档，避免 AI 在一个页面里一会儿写setContentView(R.layout.activity_login)，一会儿又写setContent { ... }，搞得项目混乱。

我自己踩了很多次坑之后，最大的感受是：这套流程的价值不在于"百分之百自动生成"，而在于把"设计稿到代码"这件事从人肉翻译变成了"结构化描述 + AI 翻译 + 人工校验"的半自动流水线。设计稿数据越结构化，Claude Code 的产出质量越稳定；技术约束越明确，返工次数越少。如果你刚开始尝试，建议先用一个简单的登录页或设置页跑一遍，把描述文档和 Prompt 的写法打磨顺，再逐步推广到更多页面。最后提醒一句：AI 生成布局能替你做大量重复劳动，但页面最终能不能交付，还是取决于你提供给它的信息有多准确。