菜单
Generate high-fidelity Android XML layouts from Figma MCP by extracting tokens/resources first, mapping components, then implementing ConstraintLayout and screenshot-diff fixes.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | figma-android-xml |
| description | Generate high-fidelity Android XML layouts from Figma MCP by extracting tokens/resources first, mapping components, then implementing ConstraintLayout and screenshot-diff fixes. |
| argument-hint | [figma-frame-url-or-frame-name] [target-layout-or-screen] |
Use this skill when the user asks to implement, restore, convert, review, or refine Android XML View-system UI from a Figma design, especially when they care about high visual fidelity.
This skill is not a one-shot Figma-to-code generator. It enforces this workflow:
Do not switch to Jetpack Compose unless the user explicitly asks.
ConstraintLayout for complex screens and shallow hierarchy.Before editing files, inspect the project and the Figma input.
Check, as available:
res/values/colors.xml, dimens.xml, styles.xml, themes.xml, strings.xml.Use configured Figma MCP tools when available. Read, if possible:
If Figma MCP is unavailable or incomplete, use any provided screenshot/specs and mark missing values as assumptions. Do not invent exact colors, fonts, or dimensions when they are not available.
Before writing code, output a concise implementation report with these sections:
Target screen
Resource tokens
@color/... names@dimen/space_* names@dimen/radius_* namesLayout structure
Component mapping
Assets
centerCrop, fitCenter, centerInside, etc.Risks / assumptions
Only after this report should implementation begin.
Create or update resources before page XML:
res/values/colors.xmlres/values/dimens.xmlres/values/styles.xmlres/values/strings.xml when static strings are neededres/drawable/bg_*.xml shape drawablesres/drawable/selector_*.xml state selectorsres/drawable/ic_*.xml vector drawables when icons are availableRules:
@color/....@dimen/..., unless the project convention intentionally keeps common values inline.Recommended naming:
<color name="color_bg_page">#FFFFFF</color>
<color name="color_text_primary">#111827</color>
<color name="color_text_secondary">#6B7280</color>
<color name="color_brand_primary">#2563EB</color>
<dimen name="space_4">4dp</dimen>
<dimen name="space_8">8dp</dimen>
<dimen name="space_12">12dp</dimen>
<dimen name="space_16">16dp</dimen>
<dimen name="radius_12">12dp</dimen>
<dimen name="height_button_48">48dp</dimen>
<dimen name="text_size_16">16sp</dimen>
<dimen name="line_height_24">24sp</dimen>
Define reusable text styles in styles.xml when the project has no better convention.
Use TextAppearance.App.* for reusable text appearances and Widget.App.* for widgets/components.
Text fidelity rules:
android:includeFontPadding="false" unless the project convention or design requires default font padding.fontFamily, textSize, lineHeight, textColor, textStyle, and letterSpacing when available.Example:
<style name="TextAppearance.App.Title20">
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:textSize">@dimen/text_size_20</item>
<item name="android:textColor">@color/color_text_primary</item>
<item name="android:includeFontPadding">false</item>
</style>
For Figma fills, strokes, and corners, create shape drawables:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/color_bg_card" />
<corners android:radius="@dimen/radius_16" />
<stroke
android:width="@dimen/stroke_1"
android:color="@color/color_border_default" />
</shape>
For buttons and stateful components, use selectors rather than runtime hacks:
selector_button_primary.xmlselector_input_border.xmlselector_card_background.xmlApproximate Figma shadows carefully. XML View shadows are limited; use elevation for Material-like shadows, drawable layers for simple shadows, or document that an exact shadow requires a custom drawable/view.
Use ConstraintLayout as the default root for complex screens.
Layout rules:
android:layout_width="match_parent" and android:layout_height="match_parent".ConstraintLayout, use 0dp for dimensions that should stretch between constraints. Do not use child match_parent inside ConstraintLayout unless there is a project-specific reason.wrap_content for text height unless fixed height is explicitly required.LinearLayout hierarchies.LinearLayout only for simple vertical/horizontal groups where it improves clarity.FrameLayout for overlays, badges, scrims, or stacked content.RecyclerView for repeating content and create separate item_*.xml files.NestedScrollView only when the whole page scrolls and there is no large/repeating list.tools: preview attributes for design-time content, not runtime behavior.titleText, primaryButton, bannerImage, contentRecyclerView.Constraint rules:
app:layout_constraintDimensionRatio for fixed-ratio images/cards.Use these mappings unless project conventions override them:
| Figma concept | Android XML implementation |
|---|---|
| Vertical Auto Layout | LinearLayout vertical for simple groups; ConstraintLayout for complex groups |
| Horizontal Auto Layout | LinearLayout horizontal for simple groups; ConstraintLayout for adaptive alignment |
| Fill container | 0dp + constraints, or root match_parent |
| Hug contents | wrap_content |
| Fixed size | named @dimen/... |
| Gap | margin or parent padding from @dimen/... |
| Padding | parent android:padding* from @dimen/... |
| Overlay / badge | FrameLayout or constrained overlay |
| Figma image Fill | ImageView android:scaleType="centerCrop" |
| Figma image Fit | ImageView android:scaleType="fitCenter" |
| Icon SVG | Convert to VectorDrawable XML |
| Button variants | style + background selector + text color selector |
| Input variants | background/border selector + helper/error text |
Always decide whether the Figma frame includes status bar and navigation bar.
Only add Kotlin when needed for:
Do not put visual dimensions, colors, or spacing in Kotlin unless unavoidable. Keep UI styling in XML resources.
If the screen has a list:
item_*.xml.After implementation, validate in this order where possible:
./gradlew assembleDebugIf running Gradle is not practical, report that validation was limited and perform static XML review.
When the user provides both Figma and app screenshots, or when screenshots can be generated:
Output a prioritized diff list before making changes. Fix only necessary differences. Do not rewrite the whole screen unless the structure is fundamentally wrong.
When finishing an implementation, summarize:
These are non-obvious failures that have caused multiple debug rounds. Check each one BEFORE the user asks "why is X broken".
.png files are present at sane sizes (700B-2KB) but ImageView renders blank, no error..png but the bytes start with <svg ...>. Android's BitmapFactory cannot decode SVG → silent blank.with open(path, 'rb') as f:
ok = f.read(8) == b'\x89PNG\r\n\x1a\n'
file path.png should report PNG image data, not SVG Scalable Vector Graphics image.VectorDrawable XML (handles <rect>/<line>/<circle>/<path> with fillColor/strokeColor/strokeWidth). Save as .xml in drawable/, delete the broken .png (Android resource system: @drawable/foo matches either .png or .xml — having both causes duplicate-resource error).<g id="..."> group with shape primitives in Figma → expect SVG export → expect to convert.<filter> (drop shadow / inner shadow / blur) doesn't translatefeGaussianBlur / feDropShadow / feColorMatrix. SVG <filter> blocks are silently dropped during conversion.android:elevation (Material drop shadow), or for non-rectangular cards use CardView + cardElevation. Inner shadows generally cannot be reproduced without a full bitmap render.linearGradient → use Android shape <gradient><linearGradient> referenced via fill="url(#paint0_linear...)" requires either inline <aapt:attr name="android:fillColor"> (API 24+) inside the <path>, or rewriting the whole asset as a shape drawable with <gradient>.shape drawable with <gradient android:angle="270" startColor="..." endColor="..." /> — it's cleaner than fighting VectorDrawable inline gradients.mask group (alpha mask / clip path) cannot run in XML View systemBitmapShader + custom View can do it.MaskedImageView if pixel-perfect is required. Document the deviation._a for active, _b for inactive) may have been applied inconsistently — one tab's _a is blue while another's _a is gray.curl <figma-mcp-asset-url> succeeds but downloads 0 bytes or HTML error.get_design_context expire ~7 days after the call. Asset URLs cached from earlier sessions may be dead.get_design_context for fresh URLs immediately before downloading. Do not store/reuse URLs across sessions.match_parent + weight=1 collision in LinearLayoutlayout_height="match_parent" on a child with layout_weight="1" causes some Android versions to allocate the child the full parent height before applying weight, eating space meant for fixed-size siblings.layout_height="0dp" + layout_weight="1" (the canonical LinearLayout weight pattern). Same for horizontal: layout_width="0dp" + layout_weight.targetSdk 35+targetSdk=35) makes app windows fullscreen by default, regardless of theme settings. Activities must explicitly handle insets.android:fitsSystemWindows="true" to the Activity root layout (not just individual fragments). For multi-fragment Activities, putting it on the Activity root means all fragments inherit padded content. ImmersionBar alone does not pad content.y=110 means "60dp below status bar" — but on Android, marginTop=110dp would be 110dp from screen top, including any Android status bar.fitsSystemWindows="true" consumes the inset. Or use a 48dp Android toolbar and measure from below it.+5-10MB APK), or accept system fallback. For special display fonts (FZHanZhenGuangBiao etc.) → bundle is unavoidable for fidelity.duplicateParentState=true + state-list selectors are fragile on MIUI/EMUIsetSelected(true) being called on parent.View.setSelected cascading through dispatchSetSelected to children, which then read parent state via duplicateParentState, then state-list selector resolves the right drawable/color. Multiple framework hops, each one varies by ROM.fun selectTab(index: Int) {
tab1.setSelected(index == 0)
iv1.setImageResource(if (index == 0) R.drawable.tab_a else R.drawable.tab_b)
tv1.setTextColor(if (index == 0) selectedColor else unselectedColor)
// ... repeat per tab
}
duplicateParentState become unnecessary for these cases.state_pressed matches first → selected color shows during touch-down, even before click handler sets the actual selected state.state_pressed entry or accept the flicker. For tab bars, prefer single color + explicit Java state changes (see #11).get_metadata / get_design_context returns "This figma file could not be accessed" (could not be accessed).whoami first when access fails.get_design_context on a node returns "You currently have nothing selected" even with valid nodeId.get_design_context (no rendered code).get_screenshot(<sectionId>) to identify what's inside, then ask user for individual frame URLs to call get_design_context on. Frames have node-id=NN-MM format too but represent a discrete screen.get_metadata(0:1) truncates large filesget_design_context or get_screenshot. Ask user for URLs.node-id=34-335 from the original, but the same node-id doesn't exist in their Copy file.get_design_context to verify the node still exists at the expected ID. If not, ask user to re-export the URL from the Copy file directly../gradlew assembleDebug builds every flavor. 5+ minute builds kill iteration speed../gradlew assembleXiaomiDebug (or whatever's installed on the test device). Run the full multi-channel build only at the end.dimens.xml dp_NN token sequence has gapserror: resource dimen/dp_378 not found after referencing what looks like a standard Figma value.dimens.xml has dp_1..dp_360, then jumps dp_365, dp_370, dp_400, dp_410, dp_472, dp_500, etc. — common values like 378, 395, 486 are missing.dimens.xml as needed. Don't assume the dp_NN sequence is dense.View subclass that draws a dial / indicator via Canvas.drawCircle/drawArc/drawText looks "flat" compared to Figma's layered gradient design.onDraw, keep onTouchEvent). Caller composition: FrameLayout { dial_bg + arrow_overlays + center_text + custom_dpad_view }.<selector> files with <item android:color> (not android:drawable) conventionally go in res/color/ not res/drawable/. Both work for android:textColor="@drawable/foo" references, but res/color/ is the idiomatic location and avoids confusion.Read many drawables in one turn after batch download — it hard-errors the APISymptom (real, observed): After downloading ~13+ image assets and Read-ing each one in sequence to "verify content", the Anthropic API returns:
API Error: 400 {"type":"error","error":{"type":"invalid_request_error","message":"Could not process image"}}
The turn is blocked — you can't continue, must roll back. This is not a context-budget warning, it's an upstream image-processing failure.
Cause: Anthropic's image processing has per-turn limits (count and/or cumulative size). Batch-Read-ing many PNGs (especially photos in the 100KB+ range) blows past it. SVG-as-PNG files at ~700B-2KB don't decode as images either, which can also tip the error mode.
Fix: After batch download, use ls -lhS to verify file sizes are reasonable:
Then Read at most 1–2 images per turn, and only when you specifically need visual disambiguation (e.g., which of tab_a/b is selected blue vs unselected gray). Never sweep through the whole download with Read.
Concrete budget: If you need to compare 6+ state-pair images, do it across multiple turns (3 per turn max with photos in the mix), or skip visual verification and trust the build to fail loud.
MD5 compare doesn't help when source format is wrong#RRGGBB, 16dp, or 14sp throughout the layout.match_parent inside ConstraintLayout children where 0dp constraints are needed.LinearLayout for a complex page.includeFontPadding, line height, font weight, or letter spacing.ImageView without an explicit scaleType..png extension without checking magic bytes after Figma download (see Pitfall #1).match_parent + weight=1 together in LinearLayout (see Pitfall #7).duplicateParentState for tab/button state changes (see Pitfall #11)./figma-android-xml https://www.figma.com/design/... Login screen activity_login.xml
/figma-android-xml 请根据当前 Figma Frame 实现 res/layout/fragment_product_detail.xml，XML + ViewBinding，不要用 Compose。
/figma-android-xml 对比 figma.png 和 actual.png，只列出 XML 还原差异并修复必要资源和布局。