{"id":23569,"date":"2025-11-13T22:52:44","date_gmt":"2025-11-13T22:52:44","guid":{"rendered":"https:\/\/pokecon.jp\/job\/?p=23569"},"modified":"2025-11-13T22:52:44","modified_gmt":"2025-11-13T22:52:44","slug":"figma-mcp-%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6-production-ready-%e3%81%aa-flutter-%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e7%94%9f%e6%88%90%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/pokecon.jp\/job\/23569\/","title":{"rendered":"Figma MCP \u3092\u4f7f\u3063\u3066 Production Ready \u306a Flutter \u30b3\u30fc\u30c9\u3092\u751f\u6210\u3059\u308b"},"content":{"rendered":"\n<\/p>\n
\n

\u3053\u3093\u306b\u3061\u306f\u3002@shanonim<\/a> \u3067\u3059\u3002
\u30c7\u30b6\u30a4\u30f3\u304b\u3089\u30b3\u30fc\u30c9\u3092\u81ea\u52d5\u751f\u6210\u3059\u308b\u6280\u8853\u306f\u3001\u592a\u53e4\u306e\u6614\u304b\u3089\u8a66\u884c\u932f\u8aa4\u304c\u7e70\u308a\u8fd4\u3055\u308c\u3066\u304d\u305f\u5922\u306e\u6280\u8853\u3067\u3059\u304c\u3001\u751f\u6210AI\u3068MCP (Model Context Protocol) \u306e\u767b\u5834\u306b\u3088\u3063\u3066\u5927\u304d\u304f\u9032\u5316\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u7279\u306b Figma \u304c\u516c\u958b\u3057\u3066\u3044\u308b Dev Mode MCP\u30b5\u30fc\u30d0\u30fc (\u4ee5\u4e0b\u3001Figma MCP) \u306f\u3001Claude \u306a\u3069\u306eAI\u30a2\u30b7\u30b9\u30bf\u30f3\u30c8\u3068\u9023\u643a\u3059\u308b\u3053\u3068\u3067\u3001\u9ad8\u54c1\u8cea\u306a\u30b3\u30fc\u30c9\u3092\u751f\u6210\u3067\u304d\u308b\u753b\u671f\u7684\u306a\u30c4\u30fc\u30eb\u3068\u3057\u3066\u6ce8\u76ee\u3055\u308c\u3066\u3044\u307e\u3059\u3002
Figma MCP\u516c\u958b\u5f53\u521d\u306f\u300c\u610f\u56f3\u3057\u305f Widget \u69cb\u9020\u306b\u306a\u3089\u306a\u3044\u300d\u300c\u547d\u540d\u304c\u5206\u304b\u308a\u306b\u304f\u3044\u300d\u3068\u3044\u3063\u305f\u8ab2\u984c\u304c\u3042\u308a\u3001\u306a\u304b\u306a\u304b\u958b\u767a\u73fe\u5834\u306b\u6d78\u900f\u3057\u306a\u304b\u3063\u305f\u5370\u8c61\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u6700\u65b0\u306e\u30aa\u30fc\u30d7\u30f3\u30d9\u30fc\u30bf\u7248\u3067\u306f\u30c4\u30fc\u30eb\u3068\u30d7\u30ed\u30f3\u30d7\u30c8\u304c\u4ee5\u524d\u3088\u308a\u5145\u5b9f\u3057\u3001\u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u3055\u308c\u308b\u30b3\u30fc\u30c9\u306e\u54c1\u8cea\u304c\u5411\u4e0a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u3053\u306e\u9032\u5316\u3092\u6d3b\u304b\u3057\u3001\u52b9\u7387\u3088\u304f Production Ready \u306a\u30b3\u30fc\u30c9\u3092\u751f\u6210\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u3082\u3046\u5c11\u3057\u3060\u3051\u5de5\u592b\u304c\u5fc5\u8981\u3067\u3059\u3002
\u672c\u8a18\u4e8b\u3067\u306f\u3001\u300cMCP friendly \u306a Figma Design\u300d\u3068\u300c\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u56fa\u6709\u306e Context \u8a2d\u5b9a\u300d\u3068\u3044\u30462\u3064\u306e\u89b3\u70b9\u304b\u3089\u3001Figma MCP\u9023\u643a\u306b\u3088\u3063\u3066\u81ea\u52d5\u751f\u6210\u3055\u308c\u308b\u30b3\u30fc\u30c9\u306e\u54c1\u8cea\u3092\u3055\u3089\u306b\u9ad8\u3081\u308b\u305f\u3081\u306e\u5b9f\u8df5\u7684\u306a\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n

\n \ud83e\udd1d Figma MCP \u3068 Cursor \u306e\u9023\u643a<\/h2>\n

\u4eca\u56de\u306f\u3001Figma MCP\u306e\u9023\u643a\u5148\u3068\u3057\u3066 Cursor \u3092\u4f7f\u7528\u3057\u307e\u3059\u3002
\u30b5\u30f3\u30d7\u30eb\u3068\u3057\u3066\u7c21\u5358\u306a\u96fb\u8a71\u30a2\u30d7\u30ea\u306e Figma Design \u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n

\"\"<\/p>\n

Figma \u3068 Cursor \u305d\u308c\u305e\u308c\u3067\u9023\u643a\u306e\u8a2d\u5b9a\u3092\u3057\u307e\u3059\u3002
Ref: https:\/\/developers.figma.com\/docs\/figma-mcp-server\/local-server-installation\/#cursor<\/a><\/p>\n

\"\"
\"\"<\/p>\n

Figma \u4e0a\u3067\u5bfe\u8c61\u306e\u30ec\u30a4\u30e4\u30fc\u3092\u9078\u629e\u3057\u3066\u30ea\u30f3\u30af\u3092\u30b3\u30d4\u30fc\u3057\u307e\u3059\u3002\u305d\u306eURL\u3092 Cursor \u306eAI\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u306b\u6e21\u3059\u3053\u3068\u3067\u3001Figma MCP\u3092\u4f7f\u7528\u3057\u305f\u30c7\u30b6\u30a4\u30f3\u89e3\u6790\u304c\u59cb\u307e\u308a\u307e\u3059\u3002
\u4eca\u56de\u306e\u4f8b\u3067\u306f\u3001\u30b3\u30fc\u30c9\u60c5\u5831\u3092\u89e3\u6790\u3059\u308b get_design_context<\/code> \u3068\u3001\u753b\u50cf\u304b\u3089UI\u60c5\u5831\u3092\u89e3\u6790\u3059\u308b get_screenshot<\/code> \u306e2\u3064\u306e\u30c4\u30fc\u30eb\u304c\u5b9f\u884c\u3055\u308c\u307e\u3057\u305f\u3002
\"\"
\"\"<\/p>\n

\u5b9f\u969b\u306b\u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u3055\u308c\u305f\u30b3\u30fc\u30c9\u3092\u4ee5\u4e0b\u306b\u793a\u3057\u307e\u3059\u3002
\u30c7\u30b6\u30a4\u30f3\u304c ListView<\/code> BottomNavigation<\/code> Floating Action Button<\/code> \u3068\u3044\u3063\u305f Component \u3092\u4f7f\u3063\u3066\u3044\u308b\u3053\u3068\u3092\u7406\u89e3\u3057\u3001\u305d\u308c\u3089\u3092\u7684\u78ba\u306b\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n

\n
class<\/span> VoipHomePage<\/span> extends<\/span> StatefulWidget<\/span> {<\/span>\n  const<\/span> VoipHomePage<\/span>(<\/span>{<\/span>super<\/span>.<\/span>key}<\/span>)<\/span>;<\/span>\n\n  @override<\/span>\n  State<\/span>VoipHomePage<\/span>><\/span><\/span> createState<\/span>(<\/span>)<\/span> =<\/span>><\/span> _VoipHomePageState<\/span>(<\/span>)<\/span>;<\/span>\n}<\/span>\n\nclass<\/span> _VoipHomePageState extends<\/span> State<\/span>VoipHomePage<\/span>><\/span><\/span> {<\/span>\n  int _selectedIndex =<\/span> 0<\/span>;<\/span>\n\n  @override<\/span>\n  Widget<\/span> build<\/span>(<\/span>BuildContext<\/span> context)<\/span> {<\/span>\n    return<\/span> Scaffold<\/span>(<\/span>\n      backgroundColor:<\/span> Colors<\/span>.<\/span>white,<\/span>\n      body:<\/span> SafeArea<\/span>(<\/span>\n        child:<\/span> Column<\/span>(<\/span>\n          crossAxisAlignment:<\/span> CrossAxisAlignment<\/span>.<\/span>start,<\/span>\n          children:<\/span> [<\/span>\n            \n            const<\/span> Padding<\/span>(<\/span>\n              padding:<\/span> EdgeInsets<\/span>.<\/span>fromLTRB<\/span>(<\/span>24<\/span>,<\/span> 36<\/span>,<\/span> 24<\/span>,<\/span> 12<\/span>)<\/span>,<\/span>\n              child:<\/span> Text<\/span>(<\/span>\n                'Recents'<\/span><\/span>,<\/span>\n                style:<\/span> TextStyle<\/span>(<\/span>\n                  fontSize:<\/span> 30<\/span>,<\/span>\n                  fontWeight:<\/span> FontWeight<\/span>.<\/span>w500,<\/span>\n                  color:<\/span> Color<\/span>(<\/span>0xFF0A0A0A<\/span>)<\/span>,<\/span>\n                  letterSpacing:<\/span> 0.4<\/span>,<\/span>\n                )<\/span>,<\/span>\n              )<\/span>,<\/span>\n            )<\/span>,<\/span>\n            const<\/span> Divider<\/span>(<\/span>height:<\/span> 1<\/span>,<\/span> thickness:<\/span> 1<\/span>,<\/span> color:<\/span> Color<\/span>(<\/span>0xFFE5E7EB<\/span>)<\/span>)<\/span>,<\/span>\n            \n            Expanded<\/span>(<\/span>\n              child:<\/span> ListView<\/span>(<\/span>\n                padding:<\/span> EdgeInsets<\/span>.<\/span>zero,<\/span>\n                children:<\/span> [<\/span>\n                  _buildCallItem<\/span>(<\/span>\n                    name:<\/span> 'John Smith'<\/span><\/span>,<\/span>\n                    time:<\/span> '10:30 AM'<\/span><\/span>,<\/span>\n                    isMissed:<\/span> false<\/span>,<\/span>\n                  )<\/span>,<\/span>\n                  _buildCallItem<\/span>(<\/span>\n                    name:<\/span> 'Sarah Johnson'<\/span><\/span>,<\/span>\n                    time:<\/span> '9:15 AM'<\/span><\/span>,<\/span>\n                    isMissed:<\/span> true<\/span>,<\/span>\n                  )<\/span>,<\/span>\n                  _buildCallItem<\/span>(<\/span>\n                    name:<\/span> 'Mike Wilson'<\/span><\/span>,<\/span>\n                    time:<\/span> 'Yesterday'<\/span><\/span>,<\/span>\n                    isMissed:<\/span> false<\/span>,<\/span>\n                  )<\/span>,<\/span>\n                  _buildCallItem<\/span>(<\/span>\n                    name:<\/span> 'Emily Davis'<\/span><\/span>,<\/span>\n                    time:<\/span> 'Yesterday'<\/span><\/span>,<\/span>\n                    isMissed:<\/span> false<\/span>,<\/span>\n                  )<\/span>,<\/span>\n                  _buildCallItem<\/span>(<\/span>\n                    name:<\/span> 'Robert Brown'<\/span><\/span>,<\/span>\n                    time:<\/span> 'Monday'<\/span><\/span>,<\/span>\n                    isMissed:<\/span> false<\/span>,<\/span>\n                  )<\/span>,<\/span>\n                  _buildCallItem<\/span>(<\/span>\n                    name:<\/span> 'Lisa Anderson'<\/span><\/span>,<\/span>\n                    time:<\/span> 'Monday'<\/span><\/span>,<\/span>\n                    isMissed:<\/span> true<\/span>,<\/span>\n                  )<\/span>,<\/span>\n                ]<\/span>,<\/span>\n              )<\/span>,<\/span>\n            )<\/span>,<\/span>\n          ]<\/span>,<\/span>\n        )<\/span>,<\/span>\n      )<\/span>,<\/span>\n      \n      bottomNavigationBar:<\/span> Container<\/span>(<\/span>\n        decoration:<\/span> const<\/span> BoxDecoration<\/span>(<\/span>\n          border:<\/span> Border<\/span>(<\/span>\n            top:<\/span> BorderSide<\/span>(<\/span>color:<\/span> Color<\/span>(<\/span>0xFFE5E7EB<\/span>)<\/span>,<\/span> width:<\/span> 1<\/span>)<\/span>,<\/span>\n          )<\/span>,<\/span>\n        )<\/span>,<\/span>\n        child:<\/span> BottomNavigationBar<\/span>(<\/span>\n          currentIndex:<\/span> _selectedIndex,<\/span>\n          onTap:<\/span> (<\/span>index)<\/span> {<\/span>\n            setState<\/span>(<\/span>(<\/span>)<\/span> {<\/span>\n              _selectedIndex =<\/span> index;<\/span>\n            }<\/span>)<\/span>;<\/span>\n          }<\/span>,<\/span>\n          type:<\/span> BottomNavigationBarType<\/span>.<\/span>fixed,<\/span>\n          selectedItemColor:<\/span> const<\/span> Color<\/span>(<\/span>0xFF2B7FFF<\/span>)<\/span>,<\/span>\n          unselectedItemColor:<\/span> const<\/span> Color<\/span>(<\/span>0xFF6A7282<\/span>)<\/span>,<\/span>\n          selectedFontSize:<\/span> 12<\/span>,<\/span>\n          unselectedFontSize:<\/span> 12<\/span>,<\/span>\n          backgroundColor:<\/span> Colors<\/span>.<\/span>white,<\/span>\n          elevation:<\/span> 0<\/span>,<\/span>\n          items:<\/span> const<\/span> [<\/span>\n            BottomNavigationBarItem<\/span>(<\/span>\n              icon:<\/span> Icon<\/span>(<\/span>Icons<\/span>.<\/span>access_time)<\/span>,<\/span>\n              label:<\/span> 'Recents'<\/span><\/span>,<\/span>\n            )<\/span>,<\/span>\n            BottomNavigationBarItem<\/span>(<\/span>\n              icon:<\/span> Icon<\/span>(<\/span>Icons<\/span>.<\/span>people_outline)<\/span>,<\/span>\n              label:<\/span> 'Contacts'<\/span><\/span>,<\/span>\n            )<\/span>,<\/span>\n            BottomNavigationBarItem<\/span>(<\/span>\n              icon:<\/span> Icon<\/span>(<\/span>Icons<\/span>.<\/span>dialpad)<\/span>,<\/span>\n              label:<\/span> 'Keypad'<\/span><\/span>,<\/span>\n            )<\/span>,<\/span>\n            BottomNavigationBarItem<\/span>(<\/span>\n              icon:<\/span> Icon<\/span>(<\/span>Icons<\/span>.<\/span>settings_outlined)<\/span>,<\/span>\n              label:<\/span> 'Settings'<\/span><\/span>,<\/span>\n            )<\/span>,<\/span>\n          ]<\/span>,<\/span>\n        )<\/span>,<\/span>\n      )<\/span>,<\/span>\n      \n      floatingActionButton:<\/span> FloatingActionButton<\/span>(<\/span>\n        onPressed:<\/span> (<\/span>)<\/span> {<\/span>}<\/span>,<\/span>\n        backgroundColor:<\/span> const<\/span> Color<\/span>(<\/span>0xFF00C950<\/span>)<\/span>,<\/span>\n        elevation:<\/span> 4<\/span>,<\/span>\n        child:<\/span> const<\/span> Icon<\/span>(<\/span>\n          Icons<\/span>.<\/span>phone,<\/span>\n          color:<\/span> Colors<\/span>.<\/span>white,<\/span>\n          size:<\/span> 28<\/span>,<\/span>\n        )<\/span>,<\/span>\n      )<\/span>,<\/span>\n    )<\/span>;<\/span>\n  }<\/span>\n\n  Widget<\/span> _buildCallItem<\/span>(<\/span>{<\/span>\n    required String<\/span> name,<\/span>\n    required String<\/span> time,<\/span>\n    required bool isMissed,<\/span>\n  }<\/span>)<\/span> {<\/span>\n    \n  }<\/span>\n}<\/span>\n<\/span><\/span><\/code><\/pre>\n<\/div>\n
\n \ud83c\udfa8 MCP friendly \u306a Figma Design<\/h2>\n
\u524d\u8ff0\u306e\u72b6\u614b\u3067\u3082\u5341\u5206\u306b\u52d5\u4f5c\u3059\u308b\u30b3\u30fc\u30c9\u3067\u3059\u304c\u3001\u3055\u3089\u306b\u54c1\u8cea\u3092\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u306b Figma Design \u5074\u306e\u69cb\u9020\u3092\u898b\u76f4\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n
\u5148\u307b\u3069\u30b3\u30fc\u30c9\u751f\u6210\u3057\u305f\u30c7\u30b6\u30a4\u30f3 (Before \u30c7\u30b6\u30a4\u30f3) \u306f\u3001\u898b\u305f\u76ee\u3092\u4f5c\u308b\u305f\u3081\u3060\u3051\u306b\u5358\u7d14\u306a Component \u3092\u7a4d\u3093\u3060\u30ec\u30a4\u30e4\u30fc\u69cb\u9020\u3067\u3057\u305f\u3002
After \u30c7\u30b6\u30a4\u30f3\u3067\u306f\u3001\u3059\u3079\u3066\u306e Component \u306b AutoLayout \u3092\u8a2d\u5b9a\u3057 Size \u3092\u660e\u8a18\u3001\u547d\u540d\u3092\u308f\u304b\u308a\u3084\u3059\u304f\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\n\n\n\n\n
Before \u30c7\u30b6\u30a4\u30f3\u306e\u30ec\u30a4\u30e4\u30fc\u69cb\u9020<\/th>\nAfter \u30c7\u30b6\u30a4\u30f3\u306e\u30ec\u30a4\u30e4\u30fc\u69cb\u9020<\/th>\n<\/tr>\n<\/thead>\n
\"\"<\/td>\n\"\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
After \u30c7\u30b6\u30a4\u30f3\u3067\u518d\u5ea6\u30b3\u30fc\u30c9\u751f\u6210\u3092\u884c\u3063\u305f\u7d50\u679c\u306e Diff \u3092\u4ee5\u4e0b\u306b\u629c\u7c8b\u3057\u307e\u3059\u3002
\u3088\u308a\u9069\u5207\u306a Widget \u304c\u63a1\u7528\u3055\u308c\u308b\u3001Column\/Row \u306b\u9069\u5207\u306a Alignment<\/code> \u304c\u8a2d\u5b9a\u3055\u308c\u308b\u7b49\u306e\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n
\"\"
\"\"
\"\"<\/p>\n
\n \u2699\ufe0f \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u56fa\u6709\u306e Context \u8a2d\u5b9a<\/h2>\n
Flutter \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u6a2a\u65ad\u7684\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u3084\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u30d1\u30bf\u30fc\u30f3\u3092\u63a1\u7528\u3059\u308b\u3053\u3068\u304c\u4e00\u822c\u7684\u3067\u3059\u3002<\/p>\n
    \n
  • \u72b6\u614b\u7ba1\u7406: Riverpo<\/code>, Provider<\/code>, Bloc<\/code> \u306a\u3069<\/li>\n
  • \u30a4\u30df\u30e5\u30fc\u30bf\u30d6\u30eb\u306a\u30c7\u30fc\u30bf\u30af\u30e9\u30b9: freezed<\/code>\n<\/li>\n
  • \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0: go_router<\/code>, auto_route<\/code> \u306a\u3069<\/li>\n
  • \u305d\u306e\u4ed6: flutter_hooks<\/code>, retrofit<\/code> \u306a\u3069<\/li>\n<\/ul>\n
    \u3053\u308c\u3089\u306e\u60c5\u5831\u3092\u4e8b\u524d\u306bAI\u306b\u4f1d\u3048\u308b\u3053\u3068\u3067\u3001\u751f\u6210\u3055\u308c\u308b\u30b3\u30fc\u30c9\u304c\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306b\u6cbf\u3063\u305f\u3082\u306e\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
    Cursor \u306e\u5834\u5408\u3001Cursor Settings -> Rule, Memories, Commands \u306e\u30bb\u30af\u30b7\u30e7\u30f3\u304b\u3089 Project Rules<\/code> \u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002
    \"\"<\/p>\n
    Figma MCP\u306b\u95a2\u3059\u308b rule \u306b\u52a0\u3048\u3001\u30a2\u30d7\u30ea\u3067\u4f7f\u7528\u3059\u308b\u4e3b\u8981\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u4f7f\u3044\u65b9\u306b\u95a2\u3059\u308b\u8a18\u8ff0\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
    \n
    ---\ndescription: Figma Dev Mode MCP\u30eb\u30fc\u30eb\nglobs:\nalwaysApply: true\n---\n\n## Figma MCP \u30a2\u30bb\u30c3\u30c8\n- Figma Dev Mode MCP \u30b5\u30fc\u30d0\u30fc\u304c\u63d0\u4f9b\u3059\u308b\u753b\u50cf\/SVG\u306e\u30ed\u30fc\u30ab\u30eb\u30db\u30b9\u30c8\u30bd\u30fc\u30b9\u3092\u76f4\u63a5\u4f7f\u7528\u3059\u308b\u3053\u3068\n- \u65b0\u3057\u3044\u30a2\u30a4\u30b3\u30f3\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u306a\u3044\uff08\u3059\u3079\u3066Figma\u30da\u30a4\u30ed\u30fc\u30c9\u306b\u542b\u307e\u308c\u308b\uff09\n- \u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\u3092\u4f7f\u7528\/\u4f5c\u6210\u3057\u306a\u3044\n\n## Flutter \u958b\u767a\u30b9\u30bf\u30c3\u30af\n\n### \u72b6\u614b\u7ba1\u7406: Riverpod\n- \u3059\u3079\u3066\u306e\u72b6\u614b\u7ba1\u7406\u306b Riverpod\uff08hooks_riverpod\uff09\u3092\u4f7f\u7528\n- Provider \u306e\u7a2e\u985e: `Provider`, `StateProvider`, `StateNotifierProvider`, `FutureProvider`, `StreamProvider`\n- ConsumerWidget \u307e\u305f\u306f HookConsumerWidget \u3092\u4f7f\u7528\uff08StatelessWidget \u306e\u4ee3\u308f\u308a\uff09\n- ref.watch() \u3067\u30ea\u30a2\u30af\u30c6\u30a3\u30d6\u306b\u76e3\u8996\u3001ref.read() \u3067\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u30fc\u5185\u3067\u8aad\u307f\u53d6\u308a\n- \u30d1\u30e9\u30e1\u30fc\u30bf\u4ed8\u304d\u306f `.family`\u3001\u81ea\u52d5\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u306f `.autoDispose` \u4fee\u98fe\u5b50\u3092\u4f7f\u7528\n\n### React Hooks: flutter_hooks\n- HookWidget \u307e\u305f\u306f HookConsumerWidget \u3092\u4f7f\u7528\uff08StatefulWidget \u306e\u4ee3\u308f\u308a\uff09\n- \u3088\u304f\u4f7f\u3046 Hooks: `useState`, `useEffect`, `useMemoized`, `useTextEditingController`, `useAnimationController`\n- Hooks \u306f build \u30e1\u30bd\u30c3\u30c9\u5185\u3067\u306e\u307f\u3001\u6761\u4ef6\u5206\u5c90\/\u30eb\u30fc\u30d7\u5185\u3067\u306f\u547c\u3073\u51fa\u3055\u306a\u3044\u3001\u5e38\u306b\u540c\u3058\u9806\u5e8f\u3067\u547c\u3073\u51fa\u3059\n\n### \u30a4\u30df\u30e5\u30fc\u30bf\u30d6\u30eb\u30c7\u30fc\u30bf: freezed\n- \u3059\u3079\u3066\u306e\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u306b freezed \u3092\u4f7f\u7528\n- json_serializable \u3068\u7d44\u307f\u5408\u308f\u305b\u3066 JSON \u30b7\u30ea\u30a2\u30e9\u30a4\u30bc\u30fc\u30b7\u30e7\u30f3\n- Union types \u3067\u8907\u6570\u306e\u72b6\u614b\u3092\u8868\u73fe\uff08initial\/loading\/loaded\/error \u306a\u3069\uff09\n- copyWith, ==, hashCode \u306f\u81ea\u52d5\u751f\u6210\u3055\u308c\u308b\n\n### \u30b3\u30fc\u30c9\u751f\u6210\n- `flutter pub run build_runner build` \u3067\u30b3\u30fc\u30c9\u751f\u6210\n- \u958b\u767a\u4e2d\u306f `flutter pub run build_runner watch` \u3092\u4f7f\u7528\n- `*.freezed.dart` \u3068 `*.g.dart` \u306f\u81ea\u52d5\u751f\u6210\u306a\u306e\u3067\u7de8\u96c6\u3057\u306a\u3044\n\n### \u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\n- ConsumerWidget\/HookConsumerWidget \u3092\u512a\u5148\u4f7f\u7528\n- \u30d7\u30ed\u30d0\u30a4\u30c0\u30fc\u306f\u5358\u4e00\u8cac\u4efb\u3067\u5c0f\u3055\u304f\u4fdd\u3064\n- freezed \u3067\u30a4\u30df\u30e5\u30fc\u30bf\u30d6\u30eb\u306a\u72b6\u614b\u7ba1\u7406\n- `select` \u3067\u90e8\u5206\u7684\u306a\u518d\u30d3\u30eb\u30c9\u5236\u5fa1\u3001`autoDispose` \u3067\u81ea\u52d5\u7834\u68c4\n<\/code><\/pre>\n<\/div>\n
    \u3053\u306e rule \u3092\u8a2d\u5b9a\u3057\u305f\u72b6\u614b\u3067\u3001\u518d\u5ea6\u30b3\u30fc\u30c9\u751f\u6210\u3092\u884c\u3063\u305f\u7d50\u679c\u3092\u4e00\u90e8\u629c\u7c8b\u3057\u307e\u3059\u3002\u30e9\u30a4\u30d6\u30e9\u30ea\u56fa\u6709\u306e\u8a18\u6cd5\u304c\u30b3\u30fc\u30c9\u751f\u6210\u6642\u306b\u53cd\u6620\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3057\u305f\u3002
    \"\"<\/p>\n
    \n \ud83c\udfaf \u307e\u3068\u3081<\/h2>\n
    Figma MCP\u3092\u3088\u308a\u6d3b\u7528\u3059\u308b\u305f\u3081\u306b\u3001Design \u5074\u306e\u69cb\u9020\u6539\u5584\u3068 Context \u8a2d\u5b9a\u306e2\u3064\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002
    \u4eca\u56de\u306f\u30b7\u30f3\u30d7\u30eb\u306aUI\u30c7\u30b6\u30a4\u30f3\u3067\u691c\u8a3c\u3057\u307e\u3057\u305f\u304c\u3001\u8907\u96d1\u306aUI\u306e\u5834\u5408\u3067\u3082\u9069\u5207\u306b\u30ec\u30a4\u30e4\u30fc\u3092\u5206\u96e2\u3057\u3066 Widget \u6bce\u306b\u30b3\u30fc\u30c9\u3092\u751f\u6210\u3059\u308c\u3070\u3001\u9ad8\u3044\u7cbe\u5ea6\u3067UI\u69cb\u7bc9\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n
    \u6b63\u5f0f\u30ea\u30ea\u30fc\u30b9\u306b\u5411\u3051\u305f\u3001\u3055\u3089\u306a\u308b Figma MCP \u306e\u9032\u5316\u3082\u697d\u3057\u307f\u3067\u3059\u306d\u3002
    \u3046\u307e\u304f\u4f7f\u3044\u3053\u306a\u3057\u306a\u304c\u3089\u30c7\u30b6\u30a4\u30f3\u3068\u5b9f\u88c5\u306e\u30b5\u30a4\u30af\u30eb\u3092\u52a0\u901f\u3055\u305b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\ud83d\ude80<\/p>\n
    \n \ud83d\udd16 \u53c2\u8003\u30ea\u30f3\u30af<\/h2>\n