DEV Community

kanta13jp1
kanta13jp1

Posted on

How Claude Code Refactored 200+ Flutter Files in One Session — DESIGN Token Migration

#flutter #claudecode #buildinpublic #webdev

How Claude Code Refactored 200+ Flutter Files in One Session

Introduction

Every Flutter project eventually faces the "magic color" problem: Colors.blue, Colors.orangeAccent, and Colors.grey scattered across hundreds of files, drifting away from your actual brand palette.

At 自分株式会社 (https://my-web-app-b67f4.web.app/), our AI-integrated life management app built with Flutter Web + Supabase hit this exact wall. We had a carefully crafted DESIGN.md token system (Indigo/Orange dark theme), but the codebase was littered with off-brand Flutter color constants.

In sessions VSCode#107–109, Claude Code performed a 200+ file DESIGN token migration in approximately 2 hours. Here's how.

The Problem

Our docs/DESIGN.md defines:

Primary:   #5C6BC0 (Indigo 400)
Secondary: #FF7043 (Deep Orange 400)
Surface:   #1A1A2E (Dark Navy)
Enter fullscreen mode Exit fullscreen mode

But the actual code had:

color: Colors.blue,         // #2196F3 — wrong brand color
color: Colors.orangeAccent, // #FFAB40 — close but inaccurate
color: Colors.grey,         // #9E9E9E — poor contrast
Enter fullscreen mode Exit fullscreen mode

Fixing this manually across 200+ files was not realistic.

Implementation

Phase 1: Define the Mapping

First, we created a token mapping table:

Flutter Color DESIGN token hex Usage
Colors.blue 0xFF5C6BC0 primary
Colors.lightBlue 0xFF5C6BC0 primary
Colors.orangeAccent 0xFFFF7043 secondary
Colors.yellow 0xFFFFD54F warning/accent
Colors.grey 0xFFB0B0B0 muted text

Phase 2: Batch Replace with Claude Code (118 files)

The prompt to Claude Code:

Replace all off-brand Flutter color constants in lib/ according to DESIGN.md tokens.
Colors.blue → Color(0xFF5C6BC0)
Colors.lightBlue → Color(0xFF5C6BC0)
Colors.orangeAccent → Color(0xFFFF7043)
Colors.yellow → Color(0xFFFFD54F)
Exclude import lines, comments, and string literals.
Run flutter analyze after each file.
Enter fullscreen mode Exit fullscreen mode

Claude Code used Grep to enumerate targets, then Edit to rewrite 118 files sequentially.

Phase 3: Handle Shade Variants (81 files)

Colors.grey.shade400 patterns required individual judgment — simple string replacement doesn't work here:

// Before
color: Colors.grey.shade400,

// After
color: const Color(0xFFBDBDBD), // shade400 ≈ #BDBDBD
Enter fullscreen mode Exit fullscreen mode

Claude Code resolved each shade value to the correct hex.

Challenges

1. Color(0xFF...).shadeN compile error
The first batch accidentally generated Color(0xFFB0B0B0).shade200, which is invalid — only MaterialColor has .shade. flutter analyze caught this immediately.

2. PdfColors vs Color mixing
Files using the pdf package need PdfColors.grey, not Color(0xFFB0B0B0). Added a rule to check imports before replacing.

3. Trailing comma lint cascade
Mass edits introduced 36 missing trailing commas. Fixed with dart fix --apply in one pass at the end.

Results

Metric Before After
Off-brand Colors.* references 200+ 0
DESIGN token compliance ~40% ~100%
flutter analyze errors 0 0
Estimated manual time 8–12h ~2h with Claude Code

Key Takeaways

  1. Batch in phases — don't process all files at once; group by color category
  2. Run flutter analyze between phases — catch errors early
  3. Shade variants need individual handling — not just string replace
  4. Final lint pass — run dart fix --apply once at the end

The combination of a DESIGN.md token system + Claude Code batch application is highly effective for large-scale Flutter design unification.

Build in public: https://my-web-app-b67f4.web.app/

FlutterWeb #Supabase #buildinpublic #ClaudeCode

Jibun Corp's AI Hub Reaches 35 Providers: Adding SiliconFlow and Novita AI

We just crossed 35 providers in our unified AI Hub feature. Today we're adding two more OpenAI-compatible inference platforms: SiliconFlow and Novita AI.

Why SiliconFlow?

SiliconFlow (硅基流动) is China's largest AI inference platform, supporting 100+ open-source models via an OpenAI-compatible API. Two reasons we picked it:

  1. Free tier is genuinely useful — Qwen2.5-7B is available completely free, making it perfect for development and testing
  2. Access to China-specific models — Qwen2.5-72B and DeepSeek-V3 at competitive prices, with strong Chinese language performance 
siliconflow: {
  displayName: "SiliconFlow",
  envKey: "SILICONFLOW_API_KEY",
  chatUrl: "https://api.siliconflow.cn/v1/chat/completions",
  defaultModel: "Qwen/Qwen2.5-72B-Instruct",
  buildBody: OPENAI_COMPAT_BODY,
  parseResponse: OPENAI_COMPAT_PARSE,
},
Enter fullscreen mode Exit fullscreen mode

Why Novita AI?

Novita AI is a global inference platform with 100+ models and a pure pay-as-you-go credit system. The key differentiator:

  • Llama-3.1-70B at $0.23/1M tokens (input and output) — extremely competitive
  • No subscriptions, credits never expire
  • Image generation (FLUX, SDXL) alongside text models in one API 
novita_ai: {
  displayName: "Novita AI",
  envKey: "NOVITA_API_KEY",
  chatUrl: "https://api.novita.ai/v3/openai/chat/completions",
  defaultModel: "meta-llama/llama-3.1-70b-instruct",
  buildBody: OPENAI_COMPAT_BODY,
  parseResponse: OPENAI_COMPAT_PARSE,
},
Enter fullscreen mode Exit fullscreen mode

The OpenAI-Compat Pattern

All 35 providers in our hub share the same handler pattern. Once the infrastructure exists, adding a new provider is just a config block:

const OPENAI_COMPAT_BODY = (prompt: string, model: string) => ({
  model,
  messages: [{ role: "user", content: prompt }],
  max_tokens: 512,
  temperature: 0.7,
});

const OPENAI_COMPAT_PARSE = (data: unknown) => {
  // ... standard OpenAI response parsing
};
Enter fullscreen mode Exit fullscreen mode

This is the power of the OpenAI API standard becoming the industry default — every new provider that adopts it is automatically compatible with our hub.

AI University Content

Both providers got full AI University content:

  • Overview: Company background, strengths, use cases
  • Models: Pricing table, context windows, specializations
  • API: Quick-start code, rate limits, Jibun Corp integration guide

The AI University feature now covers 86 AI providers, letting users learn about the entire AI landscape in one place.

Provider Growth Trajectory 

PS#108: 14 → 20 providers
PS#109: 20 → 23 providers
PS#110: 23 → 25 providers
PS#111: 25 → 27 providers
PS#113: 27 → 29 providers
PS#115: 29 → 31 providers
PS#116: 31 → 33 providers
Daily Dev: 33 → 35 providers  ← today
Enter fullscreen mode Exit fullscreen mode

What's Next

Phase 10 candidates:

  • Naver HyperCLOVA X — Korean API, needs endpoint verification
  • Databricks — enterprise model serving, workspace URL required
  • Hyperbolic — GPU cloud with OpenAI-compat inference API

Building in public at my-web-app-b67f4.web.app

FlutterWeb #Supabase #buildinpublic #AI #OpenAI

Top comments (0)