Touch Grass: ブルータリズムのオープンソース・デザインシステム
- カテゴリー:
- 製品デザイン
- 役割:
- プロジェクトの作者(デザインと実装)
- 期間:
- 2026
Touch Grassでは、視覚的な方針を、実装して検証できるコンポーネントとトークンにしました。CSS、Tailwind、Figma、JavaScript/TypeScriptを共通の定義でつなぎ、テストと公開ドキュメントを整えました。
出典：リポジトリ、npmで公開したパッケージ、2026年4月14日の自動監査です。 リポジトリ (github.com) 新しいタブで開きますReactパッケージ (npmjs.com) 新しいタブで開きますトークンパッケージ (npmjs.com) 新しいタブで開きます
チャレンジ
独自のビジュアルアイデンティティ、CSS、Tailwind、Figma、JS/TSで共有するトークン、テスト、公開ドキュメントを備えたデザインシステムを構築すること。角丸を使わず、2書体（Geist SansとGeist Mono）と明確な制約を設けて実装を導きました。
解決
デザイン上の判断：すべてのコンポーネントで角を丸めない、本文にGeist Sans、数字・ラベル・データにGeist Monoの2書体、スピナーではなくブロック文字によるローディング表示。トークンはJSONの単一ソースから生成し、Style DictionaryでCSS変数、Tailwindテーマ、Figma用JSON、JS/TS定数を出力します。ガバナンスはコードに置き、コントラストの契約テストと独自のESLintプラグインで守っています。実装ではClaude Codeを使い、短い仕様、段階的な計画、コンポーネントより先のテスト、別エージェントによるレビューで進めました。上記の判断は私が行いました。
結果
基本コンポーネント10個、複合パターン9個、テストファイル23個、CIワークフロー2本。2026年4月14日にaxe-coreで行った自動監査では、ドキュメント27ページで違反0件、合格したチェック687件でした。この結果はローカル環境でのその実行に限ったものです。@touch-grass-ds/reactと@touch-grass-ds/tokensはMITライセンスでnpmに公開しています。限界：個人プロジェクトであり、利用するチームや採用状況の指標はありません。
ギャラリー
公開ドキュメントから切り出した画像です(2026年10月に取得)。
主な学び
仕様に書いたこと、たとえばブロック文字のローディング表示は、エージェントがそのとおりに実装しました。書かなかったことはレビューで見つかりました。レビュー担当のエージェントが、Buttonにtype="button"の初期値がなく、フォーム内でクリックすると送信されてしまうことを指摘したのです。
プロダクトの課題を、実装できる体験に変えたいですか？
戦略、インターフェース、エンジニアリングをつなぎ、ハンドオフ後も読み解ける形にするお手伝いをします。
