MasterGo + Claude Code 自动生成 Android 布局：全流程复盘与实战指南

在 Android 界面开发里最枯燥的往往不是业务逻辑而是照着设计稿把一堆 dp、sp、色值、圆角、阴影翻译成 XML。过去我拿到 MasterGo 设计稿之后第一件事就是切到开发模式反复量尺寸再回到 Android Studio 里一层一层约束关系地搭写出来的布局还经常和设计稿差几个像素走查时跟设计师各执一词。后来我把终端里的 AI 编程助手 Claude Code 接进项目配合 MasterGo 的设计变量和标注体系做布局生成整个节奏才完全不一样。这篇文章是我实际跑了一段时间后的完整复盘内容包括从 MasterGo 提取设计信息的三条路径、怎样把设计规范变成 AI 能读懂的上下文、用 Claude Code 生成 Android 布局的具体步骤以及我踩过的一堆坑。适合正在做原生 Android 开发、想用 AI 把机械劳动力减掉的团队和个人。1. 为什么我坚持用 MasterGo Claude Code 做 Android 布局1.1 这套组合真正解决的三个痛点第一个痛点是“翻译成本”。设计稿里的每一个控件本质上是一组几何信息加视觉参数宽高、位置、间距、字号、颜色、圆角、阴影。Android 布局就是把它们翻译成 ViewGroup 的嵌套结构和资源引用。这件事不难但极度繁琐一个中等页面几十个控件光量尺寸就能耗掉半天。第二个痛点是“规范一致性”。同一个项目里有人习惯用 8dp 间距有人随手写 12dp有人把主色直接 #3F51B5 写死在 layout 里有人知道引用 colors.xml。布局写法不统一后面全局换肤、改圆角、调字号的时候代价成倍放大。第三个痛点是“重复劳动”。电商、资讯、后台管理系统大量页面是同一个模式的排列组合商品卡片、列表项、设置项、表单行。每做一个新页面都把同样的结构重新手写一遍极其浪费。Claude Code 这类终端 AI 助手天生擅长生成结构化代码一次能产出多个文件但它有一个明显盲区它看不到设计师脑中的规范也不知道你设计稿里每个值代表什么。MasterGo 恰好补上这一块——它有完善的设计变量、标注体系和开放能力能把设计稿沉淀成结构化的数据。两者一组合AI 拿到的就不再是一张“凭感觉看”的截图而是一份“每个数值都有出处”的设计说明书。这套组合的本质是把“人肉翻译机”这个角色从开发身上卸掉让人回到真正该管的事情上定义规则、判断结果、做审美决策。我在实际使用中最明显的感受是以前写布局是体力活现在变成了复核 AI 的“选择题”脑力消耗完全不在一个量级。1.2 和传统“标注 手写布局”流程的差异先放一张对比表能一眼看出差异在哪里。环节传统流程MasterGo Claude Code 流程获取设计信息开发切到开发模式逐项抄数值导出设计变量 JSON / 批量提取标注生成布局代码手写 ConstraintLayout、drawable、样式AI 按规范一次性生成初版规范一致性取决于开发个人记忆和自觉固化在 CLAUDE.md 和 token 文件里修改成本改一个间距要全局搜着改改 token 后局部重新生成或只改引用人在流程中的角色全手工编码定义约束、做校验、做最终决策这张表背后有个关键逻辑传统的流程里设计规范是靠“人传人”的新人来了看旧代码猜规范很容易猜歪。新的流程里规范变成了机器可读的文件哪次生成都会自动带上。另外传统流程里“改一版设计”是开发最怕听到的话因为每个像素都要重新排而在 AI 辅助流程里只需要把新的 token 喂进去重新生成目标组件人的主要工作变成核对差异而不是从零开始写字。1.3 谁适合这套流程谁不适合适合的情况很明确原生 Android 项目页面结构以列表、表单、详情、设置这类“重复性结构”为主设计侧有一定的规范意识愿意维护组件库和设计变量团队能接受把设计稿当数据来交付而不只是当图片来看。不适合的情况也要说清楚。纯视觉营销页、动效落地页、自由度极高的创意排版不推荐让 AI 直接生成因为这种页面每个控件都可能是“一次性设计”没有稳定的 token 可依。还有一种情况是设计稿本身很随意图层乱命名、元素靠肉眼对齐、颜色随手取这种稿子喂给 AI生成的布局表面上像实际处处是坑。AI 不能帮你把混乱的输入变有序它只会放大输入的混乱。2. 整体流程设计与前置准备2.1 全流程五步法总览我把这套流程固定成五步每步之间有明确的产物方便团队里每个人对齐在 MasterGo 里约定设计规范建好颜色、字号、间距、圆角、阴影变量规范图层命名和自动布局。产物是“干净的设计稿”。从设计稿导出结构化信息设计变量 JSON、图层结构、切图资源。产物是“机器可读的设计说明书”。把 token 文件、资源清单、团队 Android 编码规范写进项目的 AI 上下文比如 CLAUDE.md 和 spec 目录。产物是“AI 可复用的长期记忆”。用结构化的 prompt 驱动 Claude Code 生成布局与资源文件。产物是“可编译的第一版 XML”。本地构建、真机/模拟器走查、修正反馈回到步骤 4 继续迭代。产物是“通过验收的最终布局”。这套流程不是一次性流水线而是闭环。设计改了从第 2 步重新导出规范变了从第 3 步更新生成错了直接在第 5 步给修正反馈。我踩过最大的坑是把它当成“一次生成完事”结果后续设计变更时又退回老路子手改闭环一断AI 的价值就归零了。2.2 MasterGo 侧准备先把设计稿“喂干净”想让 AI 生成靠谱布局第一步不是调模型而是整理设计稿。我见过太多团队在 MasterGo 里画稿子图层命名是“矩形 127”“副本 4”颜色全是一个个手动取的实色这种稿子再强的 AI 也救不回来。首先图层命名和分组必须规范。页面里的每个 Frame 按功能命名比如“product_card”“setting_item”“search_bar”图标和插画放进独立分组命名带前缀比如“ic_/illustration_”。原因很简单MasterGo 导出的图层信息会进入 AI 的上下文AI 看到“btn_primary”能判断这是个主按钮看到“矩形 127”只能生成一个无名矩形。其次设计变量是这套流程的核心资产。把主色、功能色、文本色、背景色、间距、圆角、阴影全部收进变量库。这样一个按钮的圆角和主色就带有语义标识后续 prompt 里可以直接说“使用 radius_m”“使用 color_primary”而不是报一个 16 和一段 #4F46E5。变量化之后设计侧调整品牌色开发侧只需要让 AI 重新读取 token 文件。再有能用组件和自动布局的地方就不要手摆。MasterGo 的自动布局类似前端的 Flexbox能表达“内部间距”“元素排列方向”“对齐方式”这些语义对生成 Android 的 padding、margin、LinearLayout 方向极其有用。如果设计稿里全是绝对定位的图层AI 要反推间距关系很容易推错。最后我建议在 MasterGo 里单独建一页“开发交付说明”。写明基准屏宽度比如 360dp 或 375dp、密度约定1x 还是 3x、平台差异注意事项。这页内容直接决定 AI 换算 px 和 dp 的方式属于“前置信息”省了后面反复解释的功夫。2.3 Claude Code 侧准备让 AI 先认项目环境在让 Claude Code 生成任何布局之前在项目根目录打开工具让它先把 Android 工程读一遍build.gradle 里的依赖版本、AndroidManifest 的包名和主题、res 目录下已有的 colors.xml、dimens.xml、styles.xml。这一步极其重要因为 AI 需要明白你现在用的主题是什么、有没有 Material 组件库依赖、资源命名习惯是什么。它读过之后生成的代码才会跟项目风格吻合。然后在项目里建立 CLAUDE.md 作为长期规则文件。这个文件会被每次对话自动带入相当于团队的“开发规范备忘录”。我会把 Android 布局相关的硬性规则都写进去一条一条列清楚# Android 项目生成规则 - 布局中的颜色一律引用 color/xxx禁止直接写 #RRGGBB - 间距与尺寸优先引用 dimen/xxx新值先检查是否有可复用项 - 文本样式使用 style/Text.Title / style/Text.Body 系列禁止在布局里硬写 textSize - 页面根布局优先 ConstraintLayout嵌套层级不超过 4 层 - 图标使用 drawable 下的 VectorDrawable禁止位图图标 - 生成布局时必须同时检查引用的 drawable、dimen、style 是否真实存在 - 禁止使用绝对坐标定位所有控件必须基于父子约束与 Bias - Card 类组件统一使用 MaterialCardView圆角与阴影交给 Card 自身属性有了这个文件AI 每次生成时都会带着这套规则一致性会明显改善。我以前最头疼的是 AI 生成的代码能用但不合规范写进 CLAUDE.md 之后这种问题少了一大半。另外可以配置几个自定义命令来复用常用场景。比如说把“生成商品卡”“生成列表项”“生成空状态页”做成固定指令内部写好标准 prompt 模板。好处是团队里的新人也能用同一套入口触发生成输出风格不会因为 prompt 写法不同而跑偏。2.4 先搞懂密度换算关系否则 AI 生成什么都是错很多人忽略一个前置知识MasterGo 设计稿里的长度单位和 Android 的 dp 并不是天然相等。要不要换算、怎么换算直接影响布局在各种屏幕上的表现。Android 里 1dp 在 160dpi 屏幕上等于 1 物理英寸的 1/160在 320dpi 屏幕上 1dp 等于 2 物理像素。sp 则是在 dp 基础上额外跟随系统字体缩放。所以从设计稿到布局关键看设计稿的基准宽度。如果团队约定设计稿按 1x 的 360 宽度制作那么设计稿里的 1 就对应 Android 的 1dp如果设计稿是 1080×1920 的 3x 图那所有数值都要除以 3 才是 dp。设计稿标注1x 基准360dp 屏3x 基准除以 3宽度 9696dp32dp字号 4848sp16sp圆角 3636dp12dp间距 2424dp8dp我在项目里的做法是把“设计稿基准宽度”和“密度倍率”直接写进交付说明页并在 prompt 里显式声明“本设计稿按 1x 360dp 基准生成标注数值即为 dp”。这样 Claude Code 就不需要自己猜生成的布局才不会出现整体放大 3 倍的惨案。3. 从 MasterGo 提取设计信息三种可行的路径3.1 方案一开发模式直接读标注MasterGo 的开发模式会自动显示选中元素的宽高、位置、内边距、外边距、字号、字重、行高、颜色、圆角、阴影等信息。这种方式适合两种场景一是生成单个小组件二是临时验证某个元素的真实参数。实际操作时我一般选中父容器 Frame先看整体尺寸和内边距再看子元素之间的相对关系最后看文字和颜色的具体值。把关键数值粘进 prompt 时要按“外层到内层”的顺序组织这样 AI 能先建立容器概念再理解内部排列。这里有一个血泪教训不要试图一次性抄完整页几十个控件的数据。信息越多Claude Code 在生成时越容易“顾此失彼”经常会出现前半部分遵守了标注、后半部分开始自由发挥的情况。开发模式读标注只适合小步快跑不适合整页交付。3.2 方案二设计变量导出 JSON最推荐的方式如果团队已经在 MasterGo 里建立了设计变量这一步几乎是白送的。通过 MasterGo 的变量面板或开放能力可以把整套 token 导出成 JSON 文件放进项目的 spec/ 目录。AI 读取后对每个颜色的语义、每个间距的层级都会一清二楚。一个典型的 token 文件长这样{ colors: { primary: #4F46E5, surface: #FFFFFF, text_main: #1F2937, text_caption: #9CA3AF, bg_page: #F5F6FA }, spacing: { space_4: 4, space_8: 8, space_12: 12, space_16: 16, space_24: 24 }, radius: { radius_s: 8, radius_m: 12, radius_l: 16 }, text: { title: { size: 18, lineHeight: 24, weight: Bold }, body: { size: 14, lineHeight: 20, weight: Regular }, caption: { size: 12, lineHeight: 16, weight: Regular } } }把这份文件放好之后在 CLAUDE.md 或 prompt 里声明一句“布局生成的间距与颜色以 spec/design_tokens.json 为准”AI 在生成时就会自动去读。实测下来这是让 AI 生成代码“贴近设计系统”最有效的一步因为语义比数值更稳定——设计侧把主色换掉JSON 一更新AI 重新生成的布局就自动换成新色系。3.3 方案三插件批量导出资源与图层结构MasterGo 的插件体系很成熟团队可以按需自研或使用现成插件实现三类导出一是切图导出。把设计师标注为“可导出”的图层一次导出 1x/2x/3x PNG或导出 SVG。图标类资源导出 SVG 后转成 VectorDrawable位图类资源放到 mipmap 或 drawable-nodpi避免出现一个图标多个 density 版本管理混乱。二是图层结构导出。通过插件把整个页面的图层树、绝对位置、相对位置、尺寸导出成 JSON 或文本。这份数据比人眼读标注更全面适合整页生成时直接丢给 Claude Code 读取它会知道每个控件在哪个位置、有没有嵌套关系。三是资源清单导出。把设计稿里用到的所有图片、图标按命名生成一份清单同时标注“哪些资源已经导出、哪些还是占位”。这份清单在检查阶段特别有用能防止 AI 生成的 layout 引用了一个不存在的 drawable。3.4 我的推荐组合日常开发里我不太会只用一种方案而是按任务大小做加法单个组件按钮、输入框、标签方案一就够了直接抄关键标注给 AI反馈最快。单个页面列表页、详情页方案二加方案三token 提供语义图层结构提供空间关系AI 生成时上下文完整。整个模块多个页面共用组件方案二为主配合资源清单批量生成组件库再逐页组装。还有一个非常关键的习惯在生成布局之前先把该用的 drawable、vector、图标资源放到 res 目录里。Claude Code 能读取项目文件结构资源落盘后再让它生成引用它会在文件系统里找到真实存在的名称而不是脑补一个 drawable/xxx。这一步能大幅减少“引用不存在资源”的编译错误。4. 把设计转成可执行任务的 Prompt4.1 结构化 Prompt 模板同一个设计稿两种 prompt 方式生成质量天差地别。第一种是“帮我生成一个商品卡片布局”结果往往是一个能用但泛泛的 LinearLayout第二种是把页面背景、基准宽度、间距体系、约束要求全部列清楚AI 才能生成真正贴合设计的代码。我沉淀了一个通用模板每次生成前按模板填充背景请为某电商首页生成“商品卡片”列表项布局。 设计基准360dp 宽设计稿数值即 dp。 设计数据colors 与 spacing 读取 spec/design_tokens.json。 需求说明 1. 根布局 ConstraintLayout宽 match_parent高 wrap_content。 2. 左侧商品图 96dp 宽、96dp 高圆角 12dpscaleTypecenterCrop。 3. 右侧标题占一行使用 style/Text.Title描述占一行 使用 style/Text.Body价格使用 color/primary。 4. 右上角有一个促销标签文本为“特价”使用 style/Text.Caption背景为 drawable/bg_promotion。 5. 背景使用 drawable/bg_product_card白色圆角 16dp。 约束不得硬编码色值间距从 spec 中选择图标与图片引用 真实存在的资源布局嵌套不超过 4 层。 输出将布局写入 res/layout/item_product_card.xml同时检查 是否缺少 drawable 或 style 引用并补充。这个模板里有四个核心部分设计基准、数据来源、任务细节、硬约束。把任务细节写得越接近最终代码形态AI 越不需要自己决策。同时硬约束部分要敢写“禁止”AI 对否定性规则执行得比肯定性描述更可靠。4.2 在 CLAUDE.md 里沉淀团队设计规范很多人把 CLAUDE.md 当成项目说明文档其实它更适合用来固化“生成代码时的约束”。我在前面给过一个示例这里再强调几条我觉得实际收益最大的规则必须声明“新生成的尺寸优先复用现有 dimen”。否则 AI 会不断发明新值导致一个页面里出现 13dp、17dp 这种不规整间距。必须声明“布局要区分 padding 与 margin”。AI 很容易把设计稿里“父容器内部留白”理解成子元素的 margin这是视觉还原差的最常见原因。必须声明“配置文件与布局文件同时生成”。CLAUDE.md 里写清楚“生成布局时必须同步生成或确认 colors/dimens/styles 引用”能避免一半以上的编译错误。有了这些规则团队无论谁发起生成AI 的输出风格都像同一个人写的。这个收益在多人协作里比想象中大得多。4.3 迭代式生成而不是一次到位我刚开始用 Claude Code 时总想把整个页面所有模块一股脑塞进一次对话结果生成出来的东西经常前后矛盾。实践下来最稳的方式是分轮迭代。第一轮只生成结构骨架要求 AI 输出 layout 文件和必要的 drawable但不纠结文案细节标题、描述可以先给占位文本。第二轮专门处理资源引用让 AI 检查每个 src、background 是否指向真实存在的资源顺手补上缺失的 colors、dimens、styles。第三轮处理边界情况比如标题过长折行、价格数字变了宽度、按钮文案动态变化让 AI 调整约束与字号策略。每次迭代只改一个维度命令也尽量用“在 XX 文件里做局部修改不要把其他部分重写”这样 AI 不会因为重写而丢掉上一轮已经正确的细节。实测下来三轮迭代后的还原度远比一次直接生成的版本要高。5. 用 Claude Code 生成 Android 布局的实战记录5.1 从一个商品卡片开始完整跑一遍我拿“商品卡片”这个最常见的组件演示一遍因为它的覆盖面很广图片、多行文本、标签、按钮、间距、圆角、阴影全都有足够说明问题。先在 MasterGo 里选中商品卡 Frame整理出结构外框 360×120白色背景圆角 16内边距 12左侧商品图 96×96 圆角 12右侧区域自上而下是标题黑 18 加粗、描述灰 14、价格主色 16右下角一个 48×32 的圆角标签白底描边文本“特价”。把这份结构和 token 信息按 4.1 的模板写成 prompt再将下面的 XML 放入 res/layout/item_product_card.xml?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_heightwrap_content android:backgrounddrawable/bg_product_card android:paddingdimen/space_12 ImageView android:idid/productImage android:layout_widthdimen/space_96 android:layout_heightdimen/space_96 android:scaleTypecenterCrop android:contentDescriptionstring/product_image app:layout_constraintStart_toStartOfparent app:layout_constraintTop_toTopOfparent app:layout_constraintBottom_toBottomOfparent / TextView android:idid/titleView stylestyle/Text.Title android:layout_width0dp android:layout_heightwrap_content android:maxLines1 android:ellipsizeend app:layout_constraintStart_toEndOfid/productImage app:layout_constraintEnd_toEndOfparent app:layout_constraintTop_toTopOfparent app:layout_marginStartdimen/space_12 / TextView android:idid/descView stylestyle/Text.Body android:layout_width0dp android:layout_heightwrap_content android:maxLines2 android:ellipsizeend app:layout_constraintStart_toStartOfid/titleView app:layout_constraintEnd_toEndOfparent app:layout_constraintTop_toBottomOfid/titleView app:layout_marginTopdimen/space_4 / TextView android:idid/priceView stylestyle/Text.Price android:layout_widthwrap_content android:layout_heightwrap_content app:layout_constraintStart_toStartOfid/titleView app:layout_constraintBottom_toBottomOfparent / TextView android:idid/promoTag stylestyle/Text.Caption android:layout_widthwrap_content android:layout_heightwrap_content android:backgrounddrawable/bg_promo_tag android:paddingStartdimen/space_8 android:paddingEnddimen/space_8 android:text特价 app:layout_constraintEnd_toEndOfparent app:layout_constraintTop_toTopOfparent / /androidx.constraintlayout.widget.ConstraintLayout对应的背景 drawable 长这样shape xmlns:androidhttp://schemas.android.com/apk/res/android solid android:colorcolor/surface / corners android:radiusdimen/radius_l / /shape生成完先别急着夸编译一遍。最常出现的问题是 dimen/space_96 这种值不存在因为 token 文件里只有 space_4 到 space_24。这时要让 AI 去补充 dimens 或改用现有间距并顺手修正所有同类问题。5.2 让 AI 同时产出 colors、dimens、styles 资源文件实际操作中我发现如果先生成布局再生成资源漏引用几乎是必然的。最稳的方式是在第一个 prompt 里就要求“同时准备资源文件”比如“基于 spec/design_tokens.json为商品卡片组件生成 colors.xml、dimens.xml、styles.xml并在布局中引用这些资源。若存在边界值不足例如需要 space_96、radius_l 之外的圆角直接在 dimens.xml 中以规范命名补齐。”这样 AI 在生成 layout 时会有意识地引用一套自己刚定义的资源引用完整性会高很多。生成的 colors.xml 可以保持精简resources color nameprimary#4F46E5/color color namesurface#FFFFFF/color color nametext_main#1F2937/color color nametext_caption#9CA3AF/color /resourcesClaude Code 这种终端智能体对这种“多文件联动”任务比纯对话式大模型好很多因为它能直接检查文件系统对照哪个资源已存在、哪个缺失。我现在的习惯是每个页面级任务都要求它最后一个步骤变成“检查所有 XML 引用并在缺失处补齐”相当于把编译错误提前消化在了工具内。5.3 复杂布局ScrollView、RecyclerView 与多状态单个组件跑顺之后就可以挑战复杂页面。整页布局我不建议一次性让 AI 生成所有内容而是先生成一个骨架再逐步填充。骨架 prompt 通常这样写“生成一个商品详情页根布局CoordinatorLayout 作为根部下方 ScrollView 占主体区域底部固定一个购买栏。先不填充内部细节用 include 占位子布局等后续单独生成后替换。”分页组装时每条业务模块单独一轮生成。比如详情页的商品信息区、参数区、推荐列表区各自独立生成再用 include 拼到根布局里。这样做的好处是 AI 每次只需要在一个小范围内保持一致性错误率显著降低。列表页则会遇到另一个问题item 布局不应该自带 margin因为 RecyclerView 的 item 间距应该交给 ItemDecoration 统一控制。这类经验必须写进 CLAUDE.md否则 AI 会把“设计稿里商品卡间距是 12”直接翻译成 item 的layout_margin结果列表滑动时边距忽大忽小。多状态页面加载中、空数据、错误、成功适合用 ViewStub 加 include 处理。让 AI 生成三个独立布局比如 state_loading.xml、state_empty.xml、state_error.xml再在宿主布局里声明四个 ViewStub通过代码按需切换。这里有个细节include 进来的布局根节点要用merge不然会多包一层布局白白增加层级。5.4 还原度检查清单生成完不是结束还原度检查才是真正的验收。我每次都会按下面这份清单过一遍尺寸与间距和 MasterGo 标注逐项对比重点看 padding 和 margin 是不是弄反了。色值确认都来自 colors.xml没有硬编码基础色与 token 是否一致。圆角与阴影圆角卡片的阴影是否真的显示了注意 API 21 以下版本。字体排版字号、字重、行高是否匹配描述文本折行后布局是否被撑开。点击态按钮、卡片有没有 ripple 反馈标签是否可点击。状态栏与安全区页面是否处理了 status bar padding 和底部导航栏。我最常用的对比技巧是把 MasterGo 页面截图和模拟器实机截图一起导出然后把两张图在绘图软件里各调成 50% 透明度叠在一起。叠出来哪里边界对不上哪里多出几个像素一目了然。这个办法比肉眼在两块屏幕之间来回切换高效得多。6. 常见问题与排查实录6.1 布局控件层级过深页面卡顿AI 生成布局最常见的问题之一是无意义嵌套。它会为了对齐一个控件在外面套一个 LinearLayout再把 LinearLayout 塞进 ConstraintLayout嵌到第 7 层。视觉上没问题但页面额外交付了大量 measure/layout 成本。我处理这个问题的办法是双管齐下。一是在 CLAUDE.md 里硬性规定“布局嵌套不超过 4 层优先使用 ConstraintLayout 的约束链与 Bias 完成相对定位”二是生成完成后跑一遍 Android Lint重点看 Hierarchy 相关警告。如果发现嵌套过深直接要求 AI“展开并合并无意义的中间容器”通常在两轮内能压到 3 层以内。6.2 字体排版和设计稿不一致AI 生成文字样式时经常只设置 textSize不处理行高导致中文文本行间距和设计稿差一大截。根源在于设计工具的行高概念和 Android TextView 的计算方式并不一样设计稿里设了 lineHeightAndroid 里却要组合 includeFontPadding、lineSpacingMultiplier、lineSpacingExtra 才能还原。最稳的做法是让 AI 在 styles.xml 里统一处理文本样式不是每个布局单独调。比如下面这样style nameText.Body item nameandroid:textSize14sp/item item nameandroid:textColorcolor/text_main/item item nameandroid:includeFontPaddingfalse/item item nameandroid:lineSpacingExtra2dp/item /style通过调整 includeFontPadding 和 lineSpacingExtra能比较接近设计稿的行高观感。但要注意includeFontPaddingfalse 在某些中文文本场景会让文字上下有点挤最后还是要真机目测。我踩过的坑是直接让 AI 复制设计稿的行高数值当 lineSpacingExtra出来的间距忽大忽小最后还是逐屏校准。6.3 图片、图标资源引用断裂AI 生成 ImageView 时会顺手写一个 drawable/product_placeholder但项目里根本不存在这个文件编译直接报错。根治方案是前面说过的生成之前先让资源真实落在 res 目录里生成之后让 AI 自查引用。如果设计稿里某些图还没导出不要硬编一个不存在的资源名。我现在的做法是让 AI 使用tools:src占位同时在代码里留 TODO 注释这样布局能编译过走查时也清楚哪个图是后期要替换的。图标资源同理优先转成 VectorDrawable实测在多彩色渐变图标上会有兼容问题那种情况才用 PNG 放 mipmap。6.4 多尺寸设备适配没做好360dp 宽的设计稿配到 320dp 的窄屏上时如果 AI 用了大量绝对 margin 模拟设计稿坐标页面就会错位甚至溢出。所以 prompt 必须强调“禁止绝对坐标定位”。正确做法是充分利用约束左右对齐用 start/end 约束到父容器水平分布用链条垂直方向用 top/bottom 锚点加固定 margin。宽度需要自适应的地方用 0dp 加约束让 ConstraintLayout 自动计算图片这类固定容器需要限制最大宽度时用app:layout_constraintWidth_max或android:maxWidth兜底。大屏平板倒是另一个话题。如果产品要求适配平板我会让 AI 对根布局设置一个最大内容宽度比如 480dp然后用layout_gravitycenter_horizontal居中。这个需求最好提前写在 CLAUDE.md 里因为 AI 不会自己意识到你的产品需要适配平板。6.5 排查实录速查表把我在实战中遇到的高频问题整理成速查表遇到现象直接查原因。现象原因解决办法右侧多出空隙、元素错位AI 用固定 margin 模拟了绝对定位改为约束链与 Bias禁止 margin 模拟圆角卡片没有阴影shape drawable 本身无法产生 elevation 阴影改用 MaterialCardView或父容器 padding 加阴影层点击没有波纹效果缺少 selectableItemBackground在 background 之外叠加 ?attr/selectableItemBackground文本行高明显不对没处理 includeFontPadding 与 lineSpacing在 styles.xml 统一配置并真机校准圆角图片显示为直角ImageView 没有裁剪圆角使用 CardView 或 gradient drawable 加 clipToOutline编译报找不到 drawable资源未落盘或 AI 脑补资源名先生成资源再用 tools:src 占位并自查引用整体在平板过宽match_parent 把布局拉满限制最大宽度并水平居中生成结果每次风格不一致缺少长期规则文件在 CLAUDE.md 固化规范并复用 prompt 模板排查逻辑还有个通用套路如果生成结果和你预期相差太大先检查输入。是不是 prompt 里没有给基准宽度是不是 token 文件没放对位置是不是设计稿本身图层乱成一团AI 生成的偏差往往能反向暴露出你还没有把设计信息描述清楚的地方。最后说一点个人体会。我真正跑顺这套流程之后最大的变化不是写 XML 的速度而是设计侧开始愿意把规范做扎实了。以前设计师随手拉一个矩形当按钮Claude Code 根本没法生成可复用的样式现在因为要喂给 AI 一个清晰的 token 体系设计稿本身变得更干净开发走查的争执也少了很多。如果你也想尝试我的建议是先别急着追求整页生成挑一个项目里出现频率最高的列表项比如商品卡、会话行、通知行把那个组件从标注到 AI 生成、再到真机对比完整走一遍后面就顺了。踩过几次坑之后你会开始把生成的 XML 当第一版草稿真正的价值在于把人的注意力留在判断和审美这一层。