UI デザインにおすすめの Codex スキル。
そのままの Codex がデザインする画面は、そつはないものの見覚えのあるものになりがちです。デザインスキルは Codex にセンス、つまりタイポグラフィ、余白、レイアウトについての考え方を与えます。知っておきたいスキルとプラグイン、それぞれの得意分野、インストール方法を紹介します。
2026年11月6日 更新 · 約 7 分で読めます
デザインスキルが実際にしていること
スキルとは、タスクに必要なときに Codex が読み込む指示のセットです。デザインスキルは一般的に、どのフォントやタイプスケールを使うか、余白をどれくらい取るか、テンプレートっぽく見えるので避けるべきレイアウトパターンは何か、結果をどう確認するかを Codex に伝えます。モデルは同じでも、作業の前提になるブリーフがずっと良くなるのです。
以下のスキルの多くは Codex プラグインとして配布されているので、1 回のインストールでまとめて追加できます。インストール後は新しい Codex セッションを始めてスキルを読み込ませ、$ に続けてスキル名を書いて呼び出すか、リクエストが合えば Codex に選ばせましょう。
1. Taste Skill（design-taste-frontend）
向いている用途： AI が生成したように見せたくないランディングページ、マーケティングサイト、リデザイン。
Taste Skill は Leonxlnx によるオープンソース（MIT ライセンス）のスキルで、GitHub で最も人気のあるデザインスキルのひとつです。メインのスキル design-taste-frontend は、クライアントのブリーフをもとに、リサーチ済みの 20 のアートディレクションから 1 つを選び、クレジット付きのオープンライセンス写真を探し、ブラウザで 3 つの画面幅で結果を確認します。バージョン 2.5（2026 年 11 月）は企業サイトやマーケティングサイトに特化し、アプリ画面には対応しなくなりました。Node.js 22 以降と、Chrome、Edge、Chromium のいずれかが必要です。
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill
2. スタイル系スキル：ソフト、ミニマル、ブルータリスト
向いている用途： 目指す見た目がすでに決まっているとき。
同じ作者は、以前の単一スタイルのスキルを別のコレクションで公開しています。どれも名前を指定して呼び出したときだけ動きます。
high-end-visual-design：やわらかなコントラスト、ゆったりした余白、スプリングベースのモーションを持つ、落ち着いた洗練された UI。minimalist-ui：抑えた配色とすっきりした構成の、エディトリアルなプロダクト UI。industrial-brutalist-ui：硬質なスイス・タイポグラフィ、強いコントラスト、実験的なレイアウト。gpt-taste：GPT モデルと Codex 向けに調整された、より厳格なバリエーション。レイアウトの変化が大きく、モーションも大胆です。
codex plugin marketplace add Leonxlnx/taste-skill-classics
codex plugin add taste-skill-classics@taste-skill-classics
3. 画像から始めるスキル
向いている用途： コードを書く前に、ビジュアルの方向性を画像で探りたいとき。
これらのスキルは、まずエージェントにデザイン画像を生成させます。imagegen-frontend-web はランディングページのセクションごとに 1 枚ずつ画像を作り、imagegen-frontend-mobile は統一感のあるアプリ画面のセットを作ります。image-to-code は画像を生成して分析し、それに合わせてページを組み立てます。画像を生成できるエージェントが必要です。
codex plugin marketplace add Leonxlnx/imagegen-skills
codex plugin add imagegen-skills@imagegen-skills
4. Anthropic の frontend-design スキル
向いている用途： 意図のあるデザインへ、短く汎用的に後押ししたいとき。
Anthropic は frontend-design を、公開リポジトリ anthropics/skills で Apache 2.0 ライセンスのもと公開しています。美的な方向性やタイポグラフィ、テンプレートの初期値のように見えない選択についての指針を与えてくれます。Claude 向けに書かれたものですが、同じ SKILL.md 形式なので、frontend-design フォルダを ~/.agents/skills にコピーすれば Codex でも使えます。
5. Figma プラグイン
向いている用途： デザインやデザインシステムを Figma で管理しているチーム。
OpenAI のプラグインカタログには、Code to Canvas、Code Connect、デザインシステムのルールに対応した Figma プラグインがあります。Plugins Directory から探すか、Codex CLI で /plugins を実行してください。
Codex Design の位置づけ
私たちのプラグイン Codex Design は、スタイル系のスキルではありません。Codex にキャンバスを与えるものです。画面とリファレンス画像を横に並べ、フォント、色、余白をビジュアルに編集できます。上のどのスキルとも併用できます。センス系のスキルにデザインを形づくらせ、そこから生まれた方向性をキャンバスで比べましょう。Codex Design のインストールはプロンプト 1 つで完了します。
自分のデザインシステム用のスキルを書く
いちばん良いデザインスキルは、自分で書いたものであることが少なくありません。プロダクトに配色、フォント、コンポーネントが決まっているなら、一度書き出しておけば、Codex がデザインするすべての画面がそれに従います。次の内容を、リポジトリの .agents/skills/acme-ui/SKILL.md として保存します。
---
name: acme-ui
description: Acme’s visual design rules. Use when designing or reviewing any Acme screen, page, or component.
---
# Acme UI
## Foundations
- Colors: ink #1F2430, accent #3B5BDB, surface #F7F8FA. No other hues.
- Type: Inter. Body 16px/1.5, headings 600 weight, never more than 3 sizes per screen.
- Spacing: multiples of 8px. Cards use 24px padding and 12px radius.
## Components
- Primary buttons are solid accent, one per screen.
- Forms put labels above fields, never placeholders as labels.
## Before you finish
- Check contrast meets WCAG AA.
- Check the layout at 390px and 1440px wide.
description は具体的に書きましょう。Codex はスキルをいつ使うかを description から判断するので、「Design rules」より「Use when designing or reviewing any Acme screen」のほうがうまく働きます。
コツ
- スタイル系スキルは一度に 1 つだけ使う。 ミニマル系とブルータリスト系のスキルを一緒に使うと、指示がぶつかります。
- 大事な場面ではスキルを名前で呼び出す。 Codex が選ぶのに任せず、たとえば
$minimalist-uiのように指定します。 - インストール前にスキルの中身を読む。 スキルはエージェントの権限で実行される指示で、プラグインはツールやフックを追加できます。