デザインをディレクションし、制作はエージェントに任せる
システムと基準はあなたが定める。画面、状態、バリエーション、ハイフィデリティのカンプはエージェントがレンダリングします。長方形を押し動かす時間を減らし、良いとは何かを決める時間を増やしましょう。
ひと言で言うと
Open Design は決して疲れない制作アシスタントです。あなたがデザインシステムを定義しセンスを判断し、エージェントが残りをシステムに沿って、あなたのリポジトリの中で生成します。
デザイナーは Open Design をこう使う
- 01
システムをコード化する
ブランドを DESIGN.md に落とし込みます。タイプスケール、カラー、スペーシング、コンポーネント、トーン。これがエージェントの従う真実の源です。
- 02
ロングテールを生成する
本来なら手で組み上げるあらゆる画面、状態、バリエーションを、エージェントがシステムに沿ってレンダリングします。だから退屈な 80% は数分で片付きます。
- 03
ディレクションして磨く
言葉で批評します。「スペーシングを詰めて、空状態をもっと温かく」。最終判断はあなたが握り、反復はエージェントが行います。
デザイナーがディレクションできるもの
プロトタイプ プロンプト全文を読む → Web Prototype Taste エディトリアル
エディトリアル・ミニマリストなウェブプロトタイプ。暖色モノクロームキャンバス、セリフ見出し＋グロテスク本文、1pxヘアライン、ミュートパステルチップ、余白重視、アンビエントモーション。
プロトタイプ プロンプト全文を読む → Web Prototype Taste Brutalist
スイス産業印刷スタイルのウェブプロトタイプ。新聞紙キャンバス、モノリシックな黒のグロテスク書体、ビューポートから溢れる数字、ヘアライングリッド分割、ハザードレッドアクセント、ASCII シンタックス装飾。Leonxlnx/taste-skill `brutalist-skill`（スイス産業印刷モード）より抽出。
プロトタイプ プロンプト全文を読む → モバイルオンボーディング
3つのスマホ画面を並べたマルチスクリーンのモバイルオンボーディングフロー（スプラッシュ、バリュープロップ、サインイン）。ステータスバー、スワイプドット、プライマリCTAを含む。『モバイルオンボーディング』『iOSオンボーディング』『スマホサインアップ』『移动端引导』に関する要件に対応。
プロトタイプ プロンプト全文を読む → ワイヤーフレームスケッチ
手描き風のワイヤーフレーム。方眼紙の背景、マーカー/鉛筆のトーン、複数のタブラベル、付箋メモ、ラフなチャート、ハッチング塗りを収録。「ワイヤーフレーム」「スケッチ」「手描き」「ローファイ」「ホワイトボード」などの要件に最適。
プロトタイプ プロンプト全文を読む → Web Prototype Taste Soft
Apple レベルのソフトなウェブプロトタイプ。シルバー/クリームキャンバス、ダブルベゼルカード、ネストボタン CTA、大きなスコーナー、スプリングモーション、アンビエントメッシュ。Leonxlnx/taste-skill の soft-skill およびセクション 4-8 に基づく。
画像 プロンプト全文を読む → 画像ポスター
ポスター、キービジュアル、エディトリアルイラスト向けの単一画像生成スキル。デフォルトは gpt-image-2 ですが、上流ツールを通じて Flux、Imagen、Midjourney にも対応。出力は PNG/JPEG ファイルとしてプロジェクトフォルダに保存されます。
Open Design でのデザイン vs. 手作業のやり方
| 必要なもの | Open Design なら | 手作業のデザインツール |
|---|---|---|
| デザインシステムを構築 | ●エージェントがどこにでも適用する DESIGN.md | ツールごとに手で保守するライブラリ |
| バリエーションと状態を作る | ●プロンプトからシステムに沿って生成 | フレームを複製して一つひとつ調整 |
| ハイフィデリティのカンプ | ●フラットなモックではなく本物の HTML にレンダリング | どのみちエンジニアが作り直すピクセル作業 |
| 一貫性を保つ | ●一つのシステムが自動的に強制される | 手作業の規律。時とともにブレる |
| 引き継ぎ | ●成果物はコード。翻訳のギャップなし | 仕様書とレッドライン |
ディレクションからエージェントが生み出した、システムに沿ったハイフィデリティの作品。あなたのスタイルに近いものを選んで磨きましょう。
デザイナー FAQ
-
01 これは私の代わりになりますか？
いいえ。代わるのは雑務です。システムとセンスはあなたが定め、繰り返しの制作はエージェントが行います。だからあなたにしかできない決定に時間を使えます。
-
02 見た目のコントロールをどう保てますか？
あなたの DESIGN.md が契約です。エージェントはその範囲内でレンダリングし、あなたは正しくなるまで言葉で批評します。
-
03 出力は編集可能 / 本物ですか？
フラットな書き出しではなく、本物の HTML/CSS です。だから作り直されることなく、そのまま本番に運ばれます。
-
04 どのエージェントを使えますか？
Claude Code、Codex、Cursor Agent、Gemini CLI ほか、各種ファーストパーティアダプター。自分のプロバイダー鍵で。
今夜、次のデザインをディレクションしよう
リポジトリにスターを付け、Open Design をインストールして、制作はエージェントに任せ、センスはあなたが判断しよう。すでに使っているそのエージェントの中で。