Skills
.Work. You
Rest

flutter-design-to-code

Community

Turn designs into production-ready Flutter UI.

Design & Creative#automation#figma#assets#flutter#design-to-code#token-mapping#zeplin
Authordus2183-commits
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill automates turning design specifications into production-ready Flutter UI by handling asset downloads, token mapping, and naming conventions, reducing manual handoffs and errors.

Core Features & Use Cases

  • Automatic 3x asset download and naming into assets/image/3.0x/{module} following conventions (ic_, bg_, btn_, img_, avatar_, logo_)
  • Token mapping to AppColors / AppTextStyles / AppSpacing with pubspec.yaml updates
  • Design-to-code across Figma, Zeplin, and screenshots, producing ready-to-integrate Flutter widgets

Quick Start

Provide a Figma/Zeplin design source link and ask Claude to generate Flutter UI and assets per project conventions.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: flutter-design-to-code
Download link: https://github.com/dus2183-commits/flutter-skills/archive/main.zip#flutter-design-to-code

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.