Flash DSM - エージェントが土台にするデザインゲノム。
ファウンデーションを組み立てれば、すべてのコンポーネントとモジュールがそれに従います。デザインゲノムは、それぞれがどこにあり、変更で何が動くかを把握しています。
Figmaは飛ばして、デザインシステムから始める。
Figmaをはじめとするキャンバス型のツールは、デザインシステムの「絵」を描くために作られたもので、システムそのものを組み立てるためのものではありません。まず絵を描き、その下にシステムを後から逆算し、結局はぴったり一致しないコードをリリースすることになります。Flashはこの順序を逆にします。先にシステムを組み立て、本当に正確なコードへ直行する。しかもシステムは機械が読める形なので、AIツールが生成するあらゆるもののガードレールにもなります。
色、書体、スペーシング、コンポーネント。すべてがつながる。
ブリーフ、URL、Figmaファイルのどれかを渡せば、Flashが型紙を裁ちます。両テーマの完全なカラースケール、書体のペア、スペーシング、角丸、モーション、そしてそれらを参照するコンポーネント。これは出発点であって、成果物ではありません。成果物は、エディターでそこから何を作るかで決まります。
説明する
プロンプトを入力するか、公開中のURLを貼るか、Figmaファイルを接続。どの方法でもFlashがデザインDNAを抽出します。
自分のものにする
Flashが完全なトークンスケールを立ち上げます。ライトとダークのカラー、書体のペア、スペーシング、角丸、シャドウ、モーション。それをその場で編集できます。フォントを差し替え、スケールを調整し直し、気に入らない選択は消してください。
リリースする
CSS変数、Tailwind設定、Tokens Studio JSONをエクスポート。GitHubに直接プッシュできます。
- ブランドDNAを抽出中
- カラースケールを構築中
- タイポグラフィを組み合わせ中
- スペーシングと角丸を設計中
- モーションとエフェクトを調整中
- コンポーネントをマッピング中
+ ドメイン特化コンポーネント8〜14個をトークンにマッピング
型紙はひとつ。生地はお好きなだけ。
仕立て屋の型紙が持っているのは、寸法と縫い目です。生地の色は決して持ちません。この切り分けがあるから、ひとつのシステムで会社全体に服を着せられます。
全員が共有する型紙
構造は、変わってはいけない部分です。カードが何でできているか、ボタンがラベルの周りにどう余白を取るか、どんな状態があるか。Flashはそれを一か所にまとめるので、どの製品も同じ形から裁てます。
製品ごとに選ぶ生地
色、書体、角丸、モーション。テーマは構造の上に乗り、構造に触れずに差し替わります。だから隣のチームとまったく違う見た目にしながら、コンポーネントはすべて共有できます。
システムが行き詰まる理由
特定の青と一体になったコンポーネントを配ると、次のチームは「それはうちの青じゃない」と言って自前で書きます。2か月後には、システムを2つ抱えています。生地を分けておくことが、それを防ぎます。
デザインシステムは、仕事を平板にしませんか？
誰も決め直すべきでない部分に決着をつけるだけです。だからこそ、あなたにしか作れない部分のための余地が生まれます。
デザインシステムはどれも唯一無二
Flashはテンプレートを渡しません。ファウンデーションもコンポーネントもモジュールも、すべてあなたのブランドに合わせて組み立てられます。その逆ではありません。
あなただけのスタイル
カラー、タイポグラフィ、スペーシングを定義するのはあなたです。プリセットのパレットから選ぶことはありません。
アート、エフェクト、モーション
イラスト、エフェクト、アニメーション、トランジションはシステムの一部です。ひとつの画面に後付けする一回限りの装飾ではありません。
コンポーネントとモジュールを、あなた流に
プロダクトのビジョンに合った新しいコンポーネントやモジュールを作れます。Flashが固定のライブラリに縛ることはありません。
導入企業のロゴは、まだありません。
Flashは新しいプロダクトで、推薦の言葉は集めようと思えば集められます。お金を払う前に自分で確かめられることを3つ用意しました。
実例を開く
このページのシステムはすべて公開されています。開いて、生成されたトークンを読み、自分のアカウントにフォークして分解してください。スクリーンショットは1枚もありません。
ファイルを持って出ていける
エクスポートされるのはtokens.css、Tailwind設定、Tokens Studio JSON。手書きでも作れる普通のファイルなので、私たちがどうなろうと動き続けます。
日付を読む
修正も機能も、公開した日付とともに書き残しています。手が止まれば、誰かに言われる前にここで分かります。
気になることは？
Flashとは？
Flashはデザインシステムビルダーです。プロンプト、公開中のURL、Figmaファイルのいずれかから、完全なトークンアーキテクチャを立ち上げます。ライトとダークのカラースケール、タイポグラフィのペア、スペーシング、角丸、シャドウ、モーション、さらにそれらのトークンにマッピングされたドメイン特化コンポーネントまで。編集したら、CSS、Tailwind、Tokens Studio JSONをエクスポートするか、GitHubにプッシュします。
AIビルダーにデザインシステムが必要なのはなぜですか？
Lovable、v0、Boltのようなツールは画面を高速に生成しますが、何かで固定しない限り、新しいプロンプトのたびに独自の色やスペーシングを発明してしまいます。デザインシステムはそのルールの層です。機械可読なトークンを渡せば、出力はブランドに忠実で、アクセシブルなコントラストを保ち、すでにリリースしたコードとも一致します。Flashはその層を作り、ツールが実際に読む形式（kit.md、トークンファイル、MCP）で提供します。
Flashは誰のためのツールですか？
UIの品質に責任を持ちながら、デザインシステムの管理に時間を割けないデザインエンジニア（個人でもチームでも）のためのツールです。リリースのスピードに追いつくシステムを必要とする、動きの速い開発チームにも向いています。
Flashは無料で使えますか？
始めるぶんには無料です。どのアカウントもGenomeをひとつ、カード登録なしで無料で作れます。Genomeとは、ひとつのデザインシステムと、そこから読み取るすべてのものです。Pro、Team、Studioでは、モジュールの取り込み、更新同期、共有Genome、クライアントへの引き渡しが加わります。どれがどのプランかは料金ページをご覧ください。
既存のデザインをインポートできますか？
Figmaファイルを接続するか、公開中のWebサイトのURLを貼り付けるか、GitHubやStorybookから取り込んでください。Flashが既存のデザインDNAを抽出し、構造化された編集可能なトークンに変換します。
FlashはFigmaやコードと同期し続けますか？
現時点でできることは次のとおりです。Figma、URL、コードベースからのインポート。CSS、Tailwind、Tokens Studio JSONのエクスポート。GitHubへのプッシュ。Flashプラグイン経由でFigmaへバリアブルを送ること。コードやFigmaからの変更が自動で戻ってくる、より深い双方向同期は展開中です。できたふりをするより、控えめに約束するほうを選びます。
何をエクスポートできますか？
本番で使える形式です。CSSカスタムプロパティのtokens.css、tailwind.config.jsの拡張、Figmaと往復できるTokens Studio JSON、コンポーネント仕様。GitHubへの直接プッシュもできます。
実際に使えるコードを生成しますか？
エクスポートされるのは、手で書くのと同じCSS変数とTailwindトークンです。そのままコードベースに入れられます。独自ランタイムなし、ロックインなし。
AIのUIジェネレーターと何が違いますか？
画面ジェネレーターが渡すのはモックアップです。Flashが渡すのは、その下にあるシステムです。一貫したスケール、セマンティックトークン、両方のカラーモード、そしてハードコードされた値ではなくトークンを参照するコンポーネント。だから、その後に作るものすべてが一貫し続けます。
Flashが生成したものの所有権は自分にありますか？
完全にあなたのものです。すべてのトークン、コンポーネント仕様、エクスポートはあなたに帰属します。クライアントワーク、商用製品、自社のデザインツールに自由に使えます。