Touch Grass: Claude Code で届けたオープンソースのブルータリスト Design System
オープンソースのブルータリスト design system をゼロから48時間で出荷した - マルチプラットフォーム tokens、10 primitives、8 patterns、公開 docs site、そして Swift package まで。Claude Code をプロダクトワークの OS として使い、iOS アプリ Timeouts の視覚的背骨をつくった。Timeouts はスマホから離れている時間のための social fitness app だ。これは vibe coding ではない。すべてのコンポーネントは brainstorming → planning → test-driven execution → code review のループを通り、skills、persistent memory、subagents がコンテキストとプロダクト判断を保ち続けた。
チャレンジ
マルチプラットフォーム tokens (CSS、Tailwind v4、Figma W3C、Swift SPM)、テスト済みコンポーネント数十点、公開 docs site、CI/CD まで含む production-grade な DS を、週末の間に届ける - vibe coding に落ちず、ビジュアルアイデンティティを失わずに。自らに課した制約: 角丸ゼロ、グレーテキストゼロ、モーションゼロ、メタデータには必ず Geist Mono。ブルータリズムは mood board ではなく、強制力として機能させた。
解決
4 ステップの儀式化された方法: 意図を短い spec に変える brainstorming、spec を依存順の TODO に変える明示的な planning、Vitest が JSX より先に書かれる test-driven execution、独立した subagent が spec と結果を突き合わせる code review。Skills が再利用可能な手続き的知識をコード化する。Persistent memory がプロダクト決定を保存し、同じことを何度も説明し直さずに済む。並列 subagents がメインコンテキストを汚さず検索とレビューを処理する。Stack: Style Dictionary 4 + Tailwind v4 + React 19 + Vite + Vitest + Playwright + Cloudflare Workers。
結果
10 primitives、8 patterns、live で描画される 8 枚の foundations ページ、17 本の Vitest suites、timeouts.app/touch-grass 上の公開 docs site、単一ソースから 4 プラットフォームへ発行される tokens、CI グリーン、MIT ライセンス、v0.1.2 タグ。空のリポジトリから公開リリースまで合計: 48 時間。Timeouts のランディングは同じ DS を build-time pinning で消費しながら並行出荷された。方法は再現可能だ - このリポジトリは、product designer が Claude Code を autocomplete ではなく OS として使う方法の概念実証である。
🖼️ ギャラリー
重要な学習
AI は product designer を置き換えない - 設計者が本来やるべきでなかった仕事の部分を置き換える。人間の仕事: 何を作るか選ぶ、視覚的テーゼを定める、tap target のサイズを決める、border-radius を禁ずるマニフェストを掲げる。コモディティな仕事: forwardRef を書く、Style Dictionary を設定する、テストケースを組む、新しいコンポーネントごとにファイルの lockstep を世話する。取引: 判断力は手元に残し、実行を委譲する。強い美意識と明確な方向性を持つデザイナーは疲れないアシスタントを得る。方向性のないデザイナーは、ノイズをより速く生成するだけだ。
