What is android-design-to-code?

A guide for turning designs from Figma, Sketch, or Adobe XD into Android screens written with Jetpack Compose, Android’s modern UI toolkit.

Use it when building screens, reusable components, grids, spacing, exact interface text, press effects, and responsive layouts from design files.

It helps developers reproduce a design’s text, spacing, layout, interactions, and behavior on different screen sizes without guessing from the mockup.

android-design-to-code — Skill by prasad-vennam

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add prasad-vennam/Awesome-Android-AI-Agent-Skills --skill android-design-to-code

Clone the repo

git clone --depth 1 https://github.com/prasad-vennam/Awesome-Android-AI-Agent-Skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/prasad-vennam/awesome-android-ai-agent-skills/android-design-to-code/github.svg)](https://agentmods.dev/skills/prasad-vennam/awesome-android-ai-agent-skills/android-design-to-code)

Your own site

<a href="https://agentmods.dev/skills/prasad-vennam/awesome-android-ai-agent-skills/android-design-to-code"><img src="https://agentmods.dev/badge/skills/prasad-vennam/awesome-android-ai-agent-skills/android-design-to-code/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/prasad-vennam/awesome-android-ai-agent-skills/android-design-to-code"><img src="https://agentmods.dev/badge/skills/prasad-vennam/awesome-android-ai-agent-skills/android-design-to-code.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 25 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 888 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00025	$0.00888
Opus 5.5	$0.00010	$0.00355
Sonnet 5.5	$0.00005	$0.00178
Haiku 4.5	$0.00003	$0.00089

Measured 2mo ago against content hash d264560116ef, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

android-design-to-code scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/android-design-to-code/SKILL.md · 80 lines

How it starts

The opening of the file, as written. The whole thing — 80 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Android Design to Code (The Bridge) 📐🌉

Professional strategies for translating high-fidelity design specifications into clean, semantic, and pixel-perfect Jetpack Compose code.

⚡ When to Use

UI Handover: Implementing a new screen from Figma/Sketch.
Micro-Copy: Translating exact text styles and case formatting.
Grid Alignment: Replicating specific spacing and layout grids.
Component Building: Creating atoms/molecules from design symbols.
Pixel Perfection: Verifying accuracy through developer tools.

🏗️ The 4 Principles of High-Fidelity Translation

Semantic Match: Use MaterialTheme tokens (Primary, BodyLarge) instead of raw hex/pixel values.
Structural Accuracy: Replicate Flexbox (Row, Column) and Constraint systems as intended.
Interaction Fidelity: Add the correct hover, press, and click ripple effects.
Responsive Layouts: Handle how the design should shrink or grow beyond the mock's dimensions.

🛠️ Translation Workflow

1. Spacing & Grids (The 8dp Rule)

Rule: Most modern Android designs use an 8dp grid.
Use 8.dp, 16.dp, 24.dp, etc.
In Compose: Spacer(Modifier.height(16.dp)) or PaddingValues(16.dp).

2. Colors & Typography

Don't just copy the 0xFFAABBCC. Check if it's already in the colorScheme.primary or surface.
Use the M3 Typography scale (HeadlineLarge, BodyMedium) to match the designer's intent.

3. Shadows & Elevation

Designs often have custom "Soft Shadows".
Rule: In Android, use Modifier.shadow() with a high elevation for M2, or use MaterialTheme.colorScheme.surfaceColorAtElevation() for modern M3 designs.

🚀 Speeding Up Implementation

Figma Plugins: Use "Relay" or "Copy as Compose" plugins to generate base code.
Lottie/Rive: Export complex animations as JSON or RIV files for pixel-perfect motion.
Vector Assets: Export as SVG or VectorDrawable (AVD) for sharp rendering.

📐 Interaction Best Practices

Read the full file on GitHub · 80 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 80 lines · 25 tokens per session scan A d264560116ef

Subscribe to this mod's changes

android-design-to-code is a skill published in the GitHub repository prasad-vennam/Awesome-Android-AI-Agent-Skills (11 stars, last pushed 7mo ago), licensed MIT. It adds 25 tokens to every session and 888 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Design and UX Mobile ui-ux

android-design-to-code next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
android-design-to-codeprasad-vennam/Awesome-Android-AI-Agent-Skills	Skill	11	7mo ago	MIT	A	25	Claude Code, Codex
apple-designbillythekidz/apple-design-skill	Skill	5	2mo ago	MIT	A	55	Claude Code, Codex
anti-slop-designsickn33/agentic-awesome-skills	Skill	49k	yesterday	MIT	A	34	Claude Code
display-glasses-with-jetpack-compose-glimmerandroid/skills	Skill	10k	yesterday	Apache-2.0	A	112	Claude Code
glance-canonical-layoutsandroid/skills	Skill	10k	yesterday	Apache-2.0	A	56	Claude Code
expo-design-systemexpo/skills	Skill	4.1k	yesterday	MIT	A	197	Claude Code, Codex
flutter-build-responsive-layoutflutter/agent-plugins	Skill	3.2k	2d ago	BSD-3-Clause	A	51	Claude Code