How are system UI elements like the Status Bar handled?

While the system handles the actual rendering, the skill ensures that appropriate spacing is reserved in the Compose layout to match the Figma design's vertical flow.

What happens if a design value is missing in Figma?

The skill is programmed to ask the user for clarification rather than guessing, offering choices between checking Figma, omitting the element, or using Material Design 3 defaults.

How does this skill ensure design accuracy?

It uses the Figma API via specific tools to retrieve exact values for padding, colors, and typography, aiming for a 95%+ compliance rate while strictly prohibiting manual guessing.

Does it support my existing project components?

Yes, the skill includes a mandatory phase to search your codebase for similar screens and common components like StatusBars or Toolbars to ensure architectural consistency.

Figma to Jetpack Compose

Name: Figma to Jetpack Compose
Author: xtone

byxtone

•

Mobile Development

Generates high-fidelity Jetpack Compose code from Figma designs with 95%+ specification compliance.

This skill automates the transition from UI design to Android development by converting Figma components into production-grade Jetpack Compose code. It strictly utilizes the Figma API to extract precise values for colors, typography, and layout, effectively eliminating 'vibe coding' and manual guesswork. By enforcing a protocol that checks existing project patterns and ensures system UI spacing is preserved, it delivers pixel-perfect implementations that remain consistent with your established codebase architecture.

Key Features

01Eliminates guesswork and 'vibe coding' through mandatory specification extraction

02Ensures accurate layout spacing for system UI elements like status bars

03Inherits existing project UI patterns and reusable common components

04Extracts precise Figma API values to achieve 95%+ design compliance

05Generates detailed compliance reports comparing Figma specs to implementation

063 GitHub stars

Use Cases

01Converting complex Figma screen designs into fully functional Compose UIs

02Standardizing UI implementations across large-scale Android projects

03Automating the creation of design-compliant theme constants and typography

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xtone/ai_development_tools figma-to-compose

For use in Claude.ai and ChatGPT

Download Skill