LogoSkills

flutter-ui

Convert Figma designs to Flutter UI components (CoUI design system)

ํ•ญ๋ชฉ๋‚ด์šฉ
Invoke/flutter:ui
Aliases/ui, /21, /coui
Categorypetmedi-development
Complexitymoderate
MCP Serversmagic, figma, serena

/flutter-ui#

Context Framework Note: Activates when converting Figma designs to Flutter UI.

Triggers#

  • When converting Figma frames/components to Flutter
  • CoUI design system based UI development
  • When using /ui, /21 keywords

Context Trigger Pattern# 

/flutter-ui {component_type} [--options]

Parameters#

ParameterRequiredDescriptionExample
component_type โœ… Component type button, card, form, page
--figma-nodeโŒFigma node ID12:345
--nameโŒComponent nameProductCard
--feature โŒ Feature module home, store

Execution Flow# 

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚  1. Figma ๋…ธ๋“œ ๋ถ„์„ (MCP: figma)           โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚  โ€ข get_selection / get_node_info        โ”‚
โ”‚  โ€ข extract_tailwind                     โ”‚
โ”‚  โ€ข scan_text_nodes                      โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                    โ”‚
                    โ–ผ
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚  2. CoUI ์ปดํฌ๋„ŒํŠธ ๋งคํ•‘                    โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚  โ€ข Figma ํด๋ž˜์Šค โ†’ CoUI ์œ„์ ฏ              โ”‚
โ”‚  โ€ข ์ƒ‰์ƒ ๋ณ€์ˆ˜ โ†’ AppColors                โ”‚
โ”‚  โ€ข ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ โ†’ AppTextStyles         โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                    โ”‚
                    โ–ผ
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚  3. Flutter ์ฝ”๋“œ ์ƒ์„ฑ (MCP: magic)       โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚  โ€ข 21st_magic_component_builder         โ”‚
โ”‚  โ€ข Widget ๊ตฌ์กฐ ์ƒ์„ฑ                      โ”‚
โ”‚  โ€ข ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ ์ ์šฉ                   โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                    โ”‚
                    โ–ผ
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚  4. ํ”„๋กœ์ ํŠธ ํ†ตํ•ฉ                         โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚  โ€ข Feature ์œ„์ ฏ ๋””๋ ‰ํ† ๋ฆฌ์— ๋ฐฐ์น˜           โ”‚
โ”‚  โ€ข Generate Widgetbook UseCase              โ”‚
โ”‚  โ€ข ํ…Œ์ŠคํŠธ ํŒŒ์ผ ์ƒ์„ฑ                       โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

CoUI Design System#

Color Mapping#

// Figma Variable โ†’ Flutter
base-100     โ†’ AppColors.background
base-200     โ†’ AppColors.surface
base-300     โ†’ AppColors.surfaceVariant
primary      โ†’ AppColors.primary
secondary    โ†’ AppColors.secondary
accent       โ†’ AppColors.accent
neutral      โ†’ AppColors.neutral

Component Mapping#

FigmaFlutter/CoUI
btnCoButton
cardCoCard
inputCoTextField
modalCoDialog
drawerCoDrawer
navbarCoAppBar
avatarCoAvatar
badgeCoBadge
tabsCoTabBar

Typography#

// Text Styles
headline-lg  โ†’ AppTextStyles.headlineLarge
headline-md  โ†’ AppTextStyles.headlineMedium
body-lg      โ†’ AppTextStyles.bodyLarge
body-md      โ†’ AppTextStyles.bodyMedium
label-lg     โ†’ AppTextStyles.labelLarge

Output Template#

Widget File#

import 'package:flutter/material.dart';
import 'package:resources/resources.dart';

/// {component_name} widget
///
/// Figma: {figma_node_link}
class {ComponentName} extends StatelessWidget {
  const {ComponentName}({
    required this.title,
    this.onTap,
    super.key,
  });

  final String title;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      // CoUI ๋””์ž์ธ ์‹œ์Šคํ…œ ์ ์šฉ
    );
  }
}

Widgetbook UseCase# 

@UseCase(name: 'Default', type: {ComponentName})
Widget buildDefault(BuildContext context) {
  return const {ComponentName}(
    title: 'Sample Title',
  );
}

MCP Integration#

PhaseMCP ServerTool
Figma analysisfigmaget_node_info, extract_tailwind
UI generationmagic21st_magic_component_builder
Code searchserenafind_symbol, search_for_pattern

Core Rules#

Widget Structure#

  • Prefer const constructor
  • super.key always last parameter
  • Break into small reusable units

Styling#

  • No hardcoded colors -> use AppColors.*
  • withOpacity() prohibited -> use withValues(alpha:)
  • No magic numbers -> use design tokens

Responsive#

  • Utilize LayoutBuilder or MediaQuery
  • Minimum touch target 48x48

Examples#

Button Component Creation# 

/flutter-ui button --name PrimaryButton --feature common

Figma Card Conversion# 

/flutter-ui card --figma-node 12:345 --name ProductCard --feature store

Full Page Conversion# 

/flutter-ui page --figma-node 1:100 --name HomePage --feature home

References#

  • Detailed implementation: .claude/agents/flutter-ui.md
  • CoUI components: package/coui/
  • Color system: package/resources/lib/src/core/theme/