見た目を、型付きのトークンとして記録します
Loomはコードを読み、デザイン上の判断を、デザイントークン標準の最初の安定版であるDTCG 2025.10形式のトークンとして書き出します。それぞれの値には、コードのどこから来たかという根拠がつきます。Loomが変換できない値は、推測せずに一覧にして、人の判断に委ねます。
コンポーネントのトークン、モード、ブランドは、CSS変数、Tailwind、CSS-in-JS、DTCGとしてビルドされ、すべてのモードとブランドでコントラストを確認します。
Loomはトークンの名前を変えません。各トークンを階層と役割に対応づけます。名前の変更は、チームが承認した提案を通してのみ行います。
トークン化の前と後のデモでは、オープンソースのメモアプリtakenoteの基本ボタンのスタイルルールを、変換の前と後で比べられます。スライダーを動かすと、ルールの値が一つずつ、Loomが生成したトークンに置き換わり、見た目は変わりません。ブラウザが2つのボタンの計算済みスタイルを比べます。データは、Loomがtakenote向けに生成したトークンファイルです。「後」のルールは、Loomのトークンのコードモッドがそのトークンから書いたもので、置き換えごとに確度を示します。完全には一致しないものは、理由を添えてそのまま残します。
すべてのコンポーネントに、一つのコントラクトがあります
コントラクトは、コンポーネントごとに一つの記録です。目的、使うべきときと使うべきでないとき、構造、API、状態、振る舞い、アクセシビリティ、コンテンツのルールをまとめます。システム変換では、見つかったすべてのコンポーネントについてコントラクトを下書きし、足りない点はすべてチームへの質問として示します。
コントラクトは最初、骨組みの状態から始まります。質問に答えるのはチームです。Loomが答えをつくり出すことはありません。
コンポーネントは、レビューの前に実装し、チェックします
Loomは一つのコントラクトからReactとReact Native向けのコンポーネントを書き、人がレビューする前にチェックします。すべての状態に対するaxe、キーボードとフォーカスのスクリプト、そして2つのプラットフォーム間の同等性（パリティ）です。
**対応済み：**Loom Base（Loom自身のデザインシステム）は、この方法で書きました。69個のコンポーネントがあり、Webとネイティブで453件中453件の同等性テストに合格しています。最終的な承認は、必ず人が行います。
「準備完了」には、明確な基準があります
コンポーネントが準備完了になるのは、コントラクトがそろい、自動チェックに合格し、両方のプラットフォームで同じように振る舞い、担当者として名前のある人が承認したときです。Loomは準備とチェックを行います。決めるのはチームです。
ルールは、エージェントが従える形で書きます
システム変換では、エージェント向けのパッケージを書き出します。AGENTS.mdファイルと、システムから生成したルールです。
禁止表現、推奨する用語、UIの文言のパターンといったコンテンツのルールは、ルールの記録として残り、Loomが画面の構成、コード、コマンドラインでチェックします。
色の組み合わせ、書体、ロゴの余白、避けるべき言葉といったブランドのビジュアルルールは、監査とエージェントがチェックします。ローカライズへの対応もチェックします。コンポーネントを疑似ローカライズした状態と各言語で描画し、切れる、はみ出す、翻訳できないテキストを報告します。
見た目が変わっていないことを、数値で確かめる
ルールは、システム変換の後、主要な画面の差分がピクセルの0.5%以内であること、そして検出された差分はすべて人がレビューすることです。Loomは変換前後のスクリーンショットをこのルールに照らして比べ、変化した箇所を色で示します。
プロダクトの移行は、コードモッドとプルリクエストで行います。名前が変わったコンポーネント、プロパティ、値、トークンは書き換え、それ以外はプルリクエストの中のチェックリストになります。
プロトタイプは、実際のシステムからつくります
アイデアをすばやく試作し、検証し、探ることができないなら、そのデザインシステムは役割を果たしているとは言えません。画面を組み立てると、Loomはシステム自身のコンポーネントからクリックできるプロトタイプをつくり、組み立てながらシステムのルールでチェックします。
**対応済み：**私たちの参照システムについて、開発サーバー上でシステムのコンポーネントからページを組み立てられます。
Storybookのストーリーは、コントラクトから生成します
Loomはコンポーネントのコントラクトから、Storybookのストーリーを生成します。私たちの参照システムでは、生成したストーリーが実際のブラウザで表示されます。
システムのないチームは、Loom Baseから始められます
デザインシステムのないチームは、Loom自身のシステムであるLoom Baseから始められます。Loomはアプリの色と文字からテーマをつくり、アプリが使うものだけに絞り込み、移行計画を書きます。できあがったものは、初日から自社のものです。これまでに動かしたのは、パイロットのアプリ一つだけです。
デザインシステムは、チームが参照するマニュアルではなく、チームが使う道具であるべきです。「整える」は、システムをその道具にします。
今後の予定
- お客様自身のコンポーネント。 お客様自身のコンポーネントをこの方法で書き、お客様のCIでビジュアルリグレッションテストを、実機でネイティブのテストを行うようになります。
- 移行のプルリクエストにスクリーンショット。 主要なすべての画面のスクリーンショットを自動で撮って移行のプルリクエストに添付し、お客様のリポジトリで移行を動かします。
- すべてのシステムでのプロトタイプ。 コンポーザーがほかのシステムでも動き、文章で書いた要件からエージェントがプロトタイプをつくるようになります。
- お客様のシステムのストーリー。 お客様自身のシステム向けにStorybookのストーリーを生成します。
- イラストのライブラリ。 管理されたイラストのライブラリが、ブランドのビジュアルルールに加わります。
よくある質問
プロダクトの見た目は変わりますか？
いいえ。システム変換では見た目を保ちます。0.5%のルールと人によるレビューで、それを測れるようにしています。
Reactを使っている必要がありますか？
現在、Loomが書けるのはReactとReact Nativeです。監査では、React、TypeScript、CSS、素のHTMLのアプリを読めます。ほかの技術スタックは候補であり、まだ対応していません。
コントラクトの質問には、誰が答えるのですか？
自社のチームが、私たちの専門家と一緒に答えます。Loomは質問と根拠を一覧にし、決めるのは人です。
トークンの名前を変える必要はありますか？
いいえ。Loomは既存の名前を階層と役割に対応づけます。名前の変更は、チームが望む場合にだけ、移行を伴う提案として行います。