skills.rest
herren-official
herren-officialOFFICIAL
Explore all skills by this author →
WebsiteGitHub

b2b-android-compose-ui

Transform Figma designs into Android Compose UI components with B2B design-system conformity.

Updated Aug 23, 2026
Search Tags:#figma#android#kotlin#design-system#compose#code-generation#ui-components
One-click install
npx skills add https://github.com/herren-official/product-agents --skill b2b-android-compose-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: b2b-android-compose-ui
Source: https://github.com/herren-official/product-agents/tree/main/skills/b2b-Android/compose-ui
Command: npx skills add https://github.com/herren-official/product-agents --skill b2b-android-compose-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Transform Figma designs into production-ready Android Compose UI components that adhere to a B2B design system, reducing manual coding time and ensuring consistency across screens.

Core Features & Use Cases

  • Automates Figma-to-Compose translation with plan-mode analysis and design-system mapping.
  • Generates reusable Compose components with a strict modifier parameter pattern for all components.
  • Provides iterative previews and build validation to closely match Figma designs in production.

Quick Start

Apply Plan Mode, feed a Figma URL, and generate the corresponding Compose UI components.

Frequently Asked Questions about b2b-android-compose-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Figma designs to Android Compose UI components?▼

To convert Figma designs to Android Compose UI, apply Plan Mode, input the Figma URL, and the tool generates production-ready Kotlin Compose components adhering to your B2B design system.

Can I generate Android Compose code that automatically follows a B2B design system?▼

Yes, generating Android Compose code that follows a B2B design system is supported through automated design-system mapping, which translates Figma properties into compliant Kotlin Compose components.

What is the best way to ensure generated Compose components match my Figma layout in production?▼

The best way to ensure Compose components match Figma layouts is using iterative previews and end-to-end build validation, which closely aligns the generated Kotlin code with the original design.

Does the Figma to Compose code generation enforce Kotlin modifier patterns?▼

Yes, the Figma to Compose code generation enforces a strict Kotlin modifier parameter pattern for all components, ensuring the generated UI follows standard Android Compose conventions.

Related Skills

Explore More Software Engineering Skills→
alanharrryy-wqalanharrryy-wq
2

figma-implement-design

Translate Figma design specifications into production-ready code via the Figma MCP workflow.

Community
Advanced
OpenElementsLabsOpenElementsLabs

implement-design

Translate Figma designs into UI code using design tokens and validation.

Official
Advanced
jhparktimejhparktime
1

compose-ui

Enforce state hoisting, modifiers, and theming in Jetpack Compose UI.

Community
Advanced
PriyanshKuniyalPriyanshKuniyal

mobile-android-design

Implement Material Design 3 patterns and Jetpack Compose for Android app UI development.

Community
Intermediate