Touch Grass: Claude Codeで48時間で作ったデザインシステム
Claude Codeを作業のOSとして48時間で構築したオープンソースのデザインシステム。テスト済みコンポーネント18個、アクセシビリティ監査は違反ゼロ、4プラットフォーム向けトークンを出力し、npmでv1.0.0(MIT)として公開。スマホから離れる時間のためのソーシャルジムアプリTimeoutsのビジュアル基盤です。
チャレンジ
マルチプラットフォーム 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のプリミティブと8のパターン、17のテストスイート、ドキュメント27ページでアクセシビリティ違反ゼロ、単一ソースから4プラットフォームへのトークン出力。npmで@touch-grass-ds/react v1.0.0(MIT)として公開。ドキュメントはtimeouts.app/touch-grassで公開中。
ギャラリー
重要な学習
AI は product designer を置き換えない - 設計者が本来やるべきでなかった仕事の部分を置き換える。人間の仕事: 何を作るか選ぶ、視覚的テーゼを定める、tap target のサイズを決める、border-radius を禁ずるマニフェストを掲げる。コモディティな仕事: forwardRef を書く、Style Dictionary を設定する、テストケースを組む、新しいコンポーネントごとにファイルの lockstep を世話する。取引: 判断力は手元に残し、実行を委譲する。強い美意識と明確な方向性を持つデザイナーは疲れないアシスタントを得る。方向性のないデザイナーは、ノイズをより速く生成するだけだ。
Precisa transformar um problema de produto em uma experiência implementável?
Posso ajudar a conectar estratégia, interface e engenharia em uma entrega que continua legível depois do handoff.
