デザインシステム
Stitch Design Taste
DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。
概要
Google Stitch の画面生成に最適化した DESIGN.md を生成するスキル。雰囲気、色、タイポグラフィ、コンポーネント、レイアウト、モーション、そして明示的な禁止パターンのリストを符号化する。
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion,
デザインにとっての意味
- Stitch の画面はネオンの紫グラデーションではなく、彩度 80% 未満のアクセント 1 色を継承する。
- 中央寄せのヒーローや均等な 3 列カードは、設定したばらつきを超えると禁止される。
- ローディングと空状態は、ありきたりなスピナーではなくスケルトンで組み立てたものになる。
カバーする内容
- Overview
- Prerequisites
- Analysis and synthesis instructions
- Output format
- Best practices
- Common pitfalls to avoid
インストール方法
Stitch Design Taste
-
リポジトリをクローンする。
git clone https://github.com/Leonxlnx/taste-skill -
スキルファイルの場所を Codex に指定する。
skills/stitch-skill/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
プロジェクトの雰囲気を伝えると、スキルが密度・ばらつき・モーションのスコアを決める。
-
hex コードと機能別のカラーロールを備えた、7 セクション構成の DESIGN.md を出力する。
-
そのファイルを Stitch に直接、または Stitch の MCP サーバー経由で渡す。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 
フロントエンド & UI できること imagegen-frontend-web ランディングページのセクションごとに、横長の参考画像を 1 枚ずつ生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。