skills.rest
K9i-0
K9i-0COMMUNITY
Explore all skills by this author →
Website𝕏@K9i_appsGitHub

ui-theming

Extract design tokens from reference images and apply them to Flutter ThemeData.

1|1|Updated Jan 10, 2026
Search Tags:#typography#flutter#dark-mode#ui-theming#brand-design#color-scheme
One-click install
npx skills add https://github.com/K9i-0/flutter_autonomous_template --skill ui-theming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-theming
Source: https://github.com/K9i-0/flutter_autonomous_template/tree/main/.claude/skills/ui-theming
Command: npx skills add https://github.com/K9i-0/flutter_autonomous_template --skill ui-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Apply brand-specific UI designs to Flutter apps by analyzing references and implementing a cohesive design system.

Core Features & Use Cases

  • Analyze reference images to extract color palettes, typography, border radii, spacing, and component patterns.
  • Generate and organize Theme files under lib/core/theme/ (colors, typography, radii, spacing) and integrate with ThemeData for light/dark modes.
  • Perform layout adjustments such as banners, badges, and section cards to align with brand style.
  • Verify visual consistency across screens with design-system guidelines.

Quick Start

Provide brand references and let this skill generate and apply a cohesive Flutter UI theme.

Frequently Asked Questions about ui-theming

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

FAQPage Schema
How do I extract a color palette and typography from a reference image for Flutter?▼

Yes, this skill generates both light and dark ThemeData configurations from your brand references. It maps extracted color schemes and typography to ensure consistent UI components across both modes in your Flutter application.

How do I generate a cohesive design system with spacing and border radii in Flutter?▼

To generate a cohesive design system in Flutter, this skill extracts border radii, spacing, and component patterns from reference images. It organizes these tokens into dedicated theme files under lib/core/theme/ for consistent layouts.

Does this skill support mapping extracted design tokens directly to ThemeData?▼

Yes, this skill supports mapping extracted design tokens directly to ThemeData. It integrates color schemes, typography, radius, and spacing tokens into the light and dark ThemeData configurations for seamless Flutter UI theming.

Can I apply brand-specific UI patterns to Flutter components like banners and section cards?▼

Yes, you can apply brand-specific UI patterns to Flutter components like banners and section cards. The skill performs layout adjustments to align these components with your extracted brand style and verifies visual consistency.

What do I need to provide to generate a Flutter UI theme from brand references?▼

To generate a Flutter UI theme from brand references, you simply need to provide the reference images. The skill then analyzes these inputs to extract palettes, typography, and patterns to build your cohesive design system.

Related Skills

Explore More Design & Creative Skills→
phananhtuan09phananhtuan09

frontend-design-theme-factory

Generate UI themes with color palettes, typography, spacing, and visual tokens.

Community
Advanced
weberwangweberwang
1

flutter-ui

Implement Flutter UI patterns using ThemeData, ColorScheme, and design tokens.

Community
Advanced
deichworxdeichworx

smart-swap-branding

Apply official Smart Swap branding tokens to UI components.

Community
Basic
anilcancakiranilcancakir
5

flutter-design

Translate Refactoring UI principles into Flutter ThemeData and ColorScheme patterns.

Community
Advanced