flutter-mobile-design

A Claude Code plugin that brings concept-driven design to Flutter mobile development. Instead of generating boilerplate screens, it guides Claude through a creative process -- developing a visual direction before writing a single widget -- and outputs production-grade Flutter code with distinctive visual identity.

Supports Material 3, Cupertino, Adaptive (platform-aware), and fully Custom design systems. Integrates with Riverpod, BLoC, GoRouter, and other Flutter ecosystem tools.

Installation

claude plugin marketplace add hmesfin/flutter-mobile-design
claude plugin install flutter-mobile-design

How It Works

The plugin provides a skill that activates when you ask Claude to build mobile interfaces. Rather than jumping straight to code, it runs a concept-first design process: exploring visual metaphors, establishing a design language (colors, typography, motion, layout), and making deliberate aesthetic choices. Only after the concept is locked does it generate implementation code using Flutter widgets, platform-appropriate design systems, and your chosen state management and navigation patterns.

Settings (Optional)

Copy examples/settings-template.md to .claude/flutter-mobile-design.local.md in your project root to customize behavior per-project.

The plugin works with sensible defaults -- no settings file is required.

Settings Reference

Setting	Options	Default	Description
`design_system`	`material3`, `cupertino`, `adaptive`, `custom`	`adaptive`	Design system approach
`material_theme`	`dynamic`, `seed_color`, `custom`	`seed_color`	Material 3 theme strategy
`state_management`	`riverpod`, `bloc`, `provider`, `none`	`riverpod`	State management integration
`navigation`	`go_router`, `auto_route`, `navigator2`, `none`	`go_router`	Navigation pattern
`doc_lookup`	`always`, `on-demand`	`on-demand`	When to fetch docs via context7
`creativity`	`bold`, `balanced`, `conservative`	`bold`	How adventurous design choices should be
`platforms`	list of: `android`, `ios`, `web`, `macos`, `windows`, `linux`	`[android, ios]`	Target platforms
`constraints`	list of strings	`[]`	Additional design constraints

Usage Examples

Design a home screen for a fitness tracking app

Build an onboarding flow for a fintech app

Create a settings page with adaptive platform widgets

Design a chat interface with real-time message animations

Build a photo gallery with custom hero transitions

What Makes This Different

Concept-first design -- Every screen starts with a creative brief and visual direction, not a template. The skill develops metaphors, mood, and spatial logic before generating code.
Configurable design systems -- Material 3, Cupertino, Adaptive, or fully Custom. Switch per-project based on your needs.
Opinionated aesthetic standards -- No default Roboto, no fromSeed(deepPurple). Custom typography pairings, deliberate color schemes, and design details that make apps feel crafted.
Platform-aware -- Adaptive mode delivers Material on Android and Cupertino on iOS, unified by a shared visual identity.
Full-stack mobile -- Not just UI widgets. Integrates state management (Riverpod/BLoC), navigation (GoRouter), custom transitions, haptic feedback, and accessibility from the start.
Per-project configuration -- Drop a settings file in your repo to lock in design system, brand colors, accessibility requirements, or creative constraints.

flutter-mobile-design

Popularity

What's Inside

README