分類 デザイン · インテリジェンス Apache-2.0 · 地球製
スター · 59.1Kダウンロード
JA
対象 · エンジニアリング

仕様からフロントエンドへ、間に引き継ぎなし

エージェントに DESIGN.md と説明を向けるだけで、システムに沿った本物のフロントエンドコード（コンポーネント、画面、ダッシュボード）をあなたのプロジェクトに直接書きます。レッドラインも、「デザイン待ち」もありません。

GitHub でスターする デスクトップアプリをダウンロード
DESIGN.md が引き継ぎ工程を飛ばして、直接フロントエンドコードとレンダリングされた UI に流れ込むエディトリアルイラスト

ひと言で言うと

Open Design はデザインシステムを機械可読にすることで、デザイナーからエンジニアへのギャップを埋めます。あなたのコードを書く同じエージェントが、システムを適用し本物の UI をレンダリングします。

エンジニアは Open Design をこう使う

  1. 01

    レッドラインではなく、システムを読む

    DESIGN.md はリポジトリの中に存在します。エージェントはコードベースの残りを読むのと同じようにそれを読みます。解釈すべき書き出された仕様はありません。

  2. 02

    システムに沿った UI を生成する

    画面やコンポーネントを説明すれば、エージェントはすでにシステムに合致したフロントエンドを書きます。プロトタイプ、管理ダッシュボード、社内ツールを、数分で。

  3. 03

    それはすでにあなたのコード

    出力はあなたのリポジトリの HTML / フレームワークコードで、PR でレビュー可能です。「デザイン」と「実装」の間に翻訳工程はありません。

エンジニアが生成できるもの

Open Design でのフロントエンド vs. 引き継ぎのやり方

必要なもの Open Design なら デザインから開発への引き継ぎ
実装の元になるデザインを得る ●エージェントが直接読む DESIGN.md 手で再解釈する Figma ファイル
システムに合わせる ●生成時に自動で強制される 仕様と見比べる。ブレが忍び込む
社内ツール / ダッシュボードを作る ●プロンプト → リポジトリ内のシステムに沿ったフロントエンド デザイナーを待ち、それから二度作る
レビュー ●コードだから PR で差分を見る モックアップとピクセル比較
コストとロックイン ●オープンソース、リポジトリ内、ローカルで動作 チーム全員がライセンスを要するデザインツール

リポジトリの中で直接生成された、システムに沿った本物のフロントエンド。作っているものに近いものを選んで説明してください。

テンプレートを見る →

エンジニアリング FAQ

  1. 01 それでもデザイナーは必要ですか？

    ブランドとディレクションには、はい。しかしシステムに沿った UI や社内ツールの構築には、エージェントが DESIGN.md を読んでフロントエンドを書きます。引き継ぎの往復はありません。

  2. 02 何を出力しますか？

    あなたのリポジトリの本物の HTML / フレームワークコードで、PR でレビュー可能です。作り直すモックアップではありません。

  3. 03 どうやってシステムに沿い続けますか？

    DESIGN.md が真実の源です。エージェントが生成時にそれを適用するので、手作業のピクセルチェックなしに出力が合致します。

  4. 04 どのエージェントを使えますか？

    Claude Code、Codex、Cursor Agent、Gemini CLI ほか、各種ファーストパーティアダプター。自分のプロバイダー鍵で。

今夜、次の UI を生成しよう

リポジトリにスターを付け、Open Design をインストールして、DESIGN.md をフロントエンドに変えよう。すでに使っているそのエージェントの中で。

GitHub でスターする デスクトップアプリをダウンロード
● Apache-2.0 ローカル優先 · BYOK macOS · Windows · Linux