★ FEATURED ARTICLE 做 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 Codecd 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 version1.0 encodingutf-8? androidx.constraintlayout.widget.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:apphttp://schemas.android.com/apk/res-auto android:layout_widthmatch_parent android:layout_heightmatch_parent android:padding16dp ImageView android:idid/icLogo android:layout_width72dp android:layout_height72dp android:layout_marginTop120dp android:contentDescriptionstring/logo_desc android:srcdrawable/ic_logo app:layout_constraintEnd_toEndOfparent app:layout_constraintStart_toStartOfparent app:layout_constraintTop_toTopOfparent / TextView android:idid/tvTitle android:layout_widthwrap_content android:layout_heightwrap_content android:layout_marginTop24dp android:text欢迎回来 android:textColorcolor/text_primary android:textSize24sp android:textStylebold app:layout_constraintEnd_toEndOfparent app:layout_constraintStart_toStartOfparent app:layout_constraintTop_toBottomOfid/icLogo / EditText android:idid/etAccount android:layout_width0dp android:layout_height48dp android:layout_marginTop40dp android:hint请输入手机号 android:inputTypephone android:maxLines1 android:backgrounddrawable/bg_input app:layout_constraintEnd_toEndOfparent app:layout_constraintStart_toStartOfparent app:layout_constraintTop_toBottomOfid/tvTitle / com.google.android.material.button.MaterialButton android:idid/btnLogin android:layout_width0dp android:layout_height48dp android:layout_marginTop32dp android:text登录 android:textSize16sp android:textStylebold app:cornerRadius24dp app:layout_constraintEnd_toEndOfparent app:layout_constraintStart_toStartOfparent app:layout_constraintTop_toBottomOfid/etAccount / /androidx.constraintlayout.widget.ConstraintLayout注意几个关键点Logo 通过Top_toTopOf加marginTop实现距离顶部 120 的留白标题用Top_toBottomOf和marginTop实现和其他节点的上下间距输入框用0dp宽度加左右16dp的父布局 padding实现宽度铺满且留出边距的效果按钮用app:cornerRadius直接圆角。这个结构没有嵌套所有节点挂在同一个 ConstraintLayout 下面扁平且好维护。不过这里要提醒一点android:srcdrawable/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 namepage_bg#FFFFFF/color color nametext_primary#1A1A2E/color color nametext_input#333333/color color nameinput_bg#F5F6FA/color color namebtn_login_bg#4A90D9/color color namebtn_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 问题速查表我把实际操作里碰到的问题整理成了速查表按现象-原因-解决办法的方式写遇到类似情况可以直接查。这里选几条比较有代表性的现象原因解决办法生成的尺寸明显偏大AI 把设计稿 px 当成了 Android 物理像素没有按 dp 处理描述文档里写清设计稿基准宽度 375尺寸直接转 dp颜色偏色AI 从截图中读取颜色色彩有偏差在描述文档里给完整 ARGB 色值禁止截图读色文字垂直方向偏上设计稿行高与 Android TextView 计算方式不同微调includeFontPadding或lineSpacingExtra圆角看起来不对普通 View 不认cornerRadius属性生成 drawable shape 背景或改用 MaterialButton嵌套层级过深性能差AI 默认生成多层 LinearLayout明确要求根布局用 ConstraintLayout不超过两层嵌套预览和真机不一致只看了一个屏幕尺寸换 3 种宽度预览并检查底部系统导航栏遮挡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 生成布局能替你做大量重复劳动但页面最终能不能交付还是取决于你提供给它的信息有多准确。
阅读完成 · 觉得有帮助？
