「20〜40代向けのファッションブランドのトップページを作って」
デザインスキルって、何？
AIにデザインを判断するための手順や基準を渡す仕組みです。文字の大きさ、余白、配色、情報の順番、動きなどを目的に合わせて考えやすくします。
「余白や文字の強弱をどう決めるか」「何を見直すか」をまとめたもの。中心になるファイルは SKILL.md です。
モデルを再学習させる機能や、完成デザインを貼るだけのテンプレートではありません。AIが必要なときに指示書や資料を読み、制作に使います。
仕組みの出典：OpenAI公式：Build skills ↗
参考：Basicの制作例も見る
BASIC · 比較用に演出を追加
見慣れた構成と装飾
グラデーションや丸いパネルを後から加えた例です。スキルなしのAIが必ずこのデザインを作るという意味ではありません。
各画面は追加のアートディレクションを含む制作事例です。スキルの有無だけを変えた性能比較ではありません。
GitHubで、注目のスキルを探そう。
GitHubは、コードやツールを公開・共有する場所。デザインスキルも、作者のリポジトリから説明やファイルを確認できます。
今回は多くのStarを集める4つを選びました。Starは評価点ではなく、興味や応援の目安です。更新状況・用途・ライセンスも確認しましょう。
「GitHubって何？」から知りたい方へうみのGitHub入門ガイドを読む →以前お届けした配布資料です。2026年9月8日取得のGitHub API値。数字は変動します。人気上昇率やGitHub Trendingの順位を示すランキングではありません。出典は各項目の公式リポジトリです。
Taste Skill
★ 85,066 GitHub Stars ↗2026年9月8日時点 · 関心度の目安
LAYOUT / TYPE / SPACING「いつも似た画面になる」を見直したい人へ。レイアウト・文字・余白・モーションの判断を具体的にするスキル集です。
TASTE · 個別調整あり
横長の写真と大きな文字
ローカルのTaste系ルールに個別の要望を加えた例です。現行GitHub版の初期出力を示すものではありません。
見出しと本文の強弱、構図の変化、余白の取り方。実験的な構成から落ち着いた画面まで調整できます。
DESIGN_VARIANCE＝構図の変化
MOTION_INTENSITY＝動きの強さ
VISUAL_DENSITY＝情報の密度
現行の design-taste-frontend はv2実験版。従来版は design-taste-frontend-v1、GPT/Codex向けの強めの設計指示は gpt-taste として別に公開されています。
インストール方法・対応ツール・使い方を見る
方法① ターミナルでインストール
制作プロジェクトのターミナルで実行し、利用するAIツールを選択。Node.js／npmが必要です。
npx skills@latest add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontendCodex向けの gpt-taste を選ぶ場合
標準版とは別の選択肢です。まずはどちらか1つで試しましょう。
npx skills@latest add https://github.com/Leonxlnx/taste-skill --skill gpt-taste --agent codex方法② Codexに頼んでインストール
制作フォルダをCodexで開き、次の文章をそのまま送ってください。方法①・②は、どちらか一方でOKです。
design-taste-frontend を、このプロジェクトのCodexで使えるようにインストールしてください。 公式リポジトリ：https://github.com/Leonxlnx/taste-skill 公式READMEとSKILL.mdを確認し、ライセンス・必要な環境・導入先を短く説明してから、公式手順でインストールしてください。 既に同名スキルがある場合は、配布元と内容を確認してから対応し、勝手に上書きしないでください。 参照資料やスクリプトも不足なく導入してください。 最後に、認識されたスキル名と保存先を教えてください。読み込めない場合は必要な操作を案内してください。
どこで使える？
Claude Code／Codex：作者が利用先として案内。
Antigravity：Skills CLIの対応先に指定して導入可能。利用環境での読み込み確認が必要です。
インストール後の使い方
design-taste-frontend を使って、ファッションブランドのトップページを作ってください。 大きな写真と文字の強弱で印象を作り、余白は広めに。 動きは控えめで、読みやすさを優先してください。 PCとスマホで表示を確認し、完成画面を見せてください。
Huashu Design〈花叔〉
★ 23,952 GitHub Stars ↗2026年9月8日時点 · 関心度の目安
BRAND / PROTOTYPE / REVIEWブランドらしい見せ方まで相談したい人へ。方向決め、HTMLでの制作、レビューをまとめて扱うスキルです。
HUASHU · 個別調整あり
色と構図でブランドを伝える
深い色と非対称の配置を使った例です。Huashuを使えば常にこの色や構成になるわけではありません。
ブランド素材を読み、目的に合う構成や表現を考えること。Webの試作に加え、スライドやアニメーションも対象です。
複数のデザイン思想と評価の視点を使い分けます。特定の色や配置に固定されたテンプレートではありません。
インストール方法・対応ツール・使い方を見る
方法① ターミナルでインストール
npx skills@latest add alchaincyf/huashu-designSKILL.md だけでなく、参照資料やスクリプトのフォルダも入っているか確認。作者は古いSkills CLIでのファイル不足に注意を促しています。
方法② Codexに頼んでインストール
制作フォルダをCodexで開き、次の文章をそのまま送ってください。方法①・②は、どちらか一方でOKです。
huashu-design を、このプロジェクトのCodexで使えるようにインストールしてください。 公式リポジトリ：https://github.com/alchaincyf/huashu-design 公式READMEとSKILL.mdを確認し、ライセンス・必要な環境・導入先を短く説明してから、公式手順でインストールしてください。 既に同名スキルがある場合は、配布元と内容を確認してから対応し、勝手に上書きしないでください。 参照資料やスクリプトも不足なく導入してください。 最後に、認識されたスキル名と保存先を教えてください。読み込めない場合は必要な操作を案内してください。
どこで使える？
Claude Code／Codex：作者が対応を案内。
Antigravity：Skills CLI経由で導入可能。動画・PPTXなどの書き出しは、別途必要なツールを確認してください。
インストール後の使い方
huashu-design を使って、ファッションブランドのトップページを作ってください。 最初にブランドに合うデザイン方針を決めてください。 写真、文字、余白で世界観を伝え、動きは心地よい程度に。 HTMLで実装した後、PCとスマホをレビューして仕上げてください。
あわせて知りたい、注目の2つ。
画面の磨き直しならImpeccable。配色や設計を広く検討するならUI UX Pro Maxが候補です。
Impeccable
★ 66,250 GitHub Stars ↗2026年9月8日時点 · 関心度の目安
画面を診断して整えるスキル。見た目の講評、アクセシビリティ、レスポンシブの確認、最後の仕上げなどを目的別に依頼できます。
BEFORE
AFTER
うみの制作物ではありません。2026年9月8日キャプチャ。
npx impeccable install利用先と導入範囲を選び、AIツールを再読み込み。初回は /impeccable init で目的や対象ユーザーを設定します。Codexではスキル一覧や $impeccable から指定できます。
対応：Claude Code、Codexなどを作者が案内。Antigravity用の配布ファイルと手動配置手順もあります。Codexでは導入後にフックの承認が必要になる場合があります。
Impeccableを使って、このトップページをレビューしてください。 文字の読みやすさ、余白、ボタンの見つけやすさを確認し、 重要な問題から修正して、スマホでも再確認してください。
UI UX Pro Max
★ 125,726 GitHub Stars ↗2026年9月8日時点 · 関心度の目安
UIスタイル、配色、フォント、UXの知識を検索して設計に使うスキル。業種やサービスに合う組み合わせを検討したいときに向いています。
実行結果の比較ではなく、作者の公開スクリーンショットです。画像内の件数は掲載画像の時点のものです。
npm install -g ui-ux-pro-max-cli次にプロジェクトのフォルダで、利用先のコマンドを1つ実行します。
uipro init --ai codexClaude Code／Antigravityの場合
Claude Code：
uipro init --ai claudeAntigravity：
uipro init --ai antigravity対応：3ツールとも作者が導入先を案内。Node.js／npmに加え、検索スクリプト用のPython環境も確認します。古い uipro-cli ではなく、上記の現行パッケージを使います。
UI UX Pro Maxを使って、ファッションECに合う配色・文字・余白を提案してください。 対象は20〜40代です。選んだ理由を短く説明してから、 その方針でトップページを実装し、スマホでも使いやすくしてください。
使うAIツールに合わせて入れよう。
| スキル | Claude Code | Codex | Antigravity |
|---|---|---|---|
| Taste | 作者が案内 | 作者が案内 | Skills CLI経由 |
| Huashu | 作者が案内 | 作者が案内 | Skills CLI経由 |
| Impeccable | 専用手順 | 専用手順 | 配布ファイルを配置 |
| UI UX Pro Max | 専用CLI | 専用CLI | 専用CLI |
Taste・Huashuの npx skills@latest add … の末尾には、利用先を指定するオプションを付けられます。
--agent claude-code--agent codex--agent antigravityまずは制作プロジェクトに導入しましょう。追加ツールの有無で使える機能は変わります。最後に「読み込んだスキル名と場所を教えて」とAIに頼んで確認してください。
出典：Skills CLIの対応エージェント一覧 ↗ ／ 各スキルの公式README
インストールも、Codexに頼めます。
ターミナルに慣れていなくても大丈夫。制作フォルダをCodexで開き、下の文章を送ってください。
入れる
配布元と導入先を確認してインストール。
読み込みを確認
認識された名前と場所を確認。
名前を指定して使う
画面を作り、PC・スマホで確認。
インストール依頼文は、Taste・Huashuそれぞれの「インストール方法・対応ツール・使い方を見る」にまとめています。
入れたスキルを適用する依頼文
インストールした design-taste-frontend を読み込んで使ってください。 制作内容：ファッションブランドのトップページ 対象：20〜40代 メニュー：NEW IN / COLLECTION / JOURNAL / ABOUT 方向性：写真を大きく、文字に強弱をつけ、余白を広く。 モーション：読みやすさを保てる控えめな動き。 既存ページの文章、商品、写真、機能を保ち、別フォルダにデザイン案を作ってください。 実際のブラウザでPCとスマホを確認し、横はみ出しや操作の不具合を修正してください。 最後に完成画面と、スキルがどの判断に役立ったかを短く教えてください。
まずは、1つから試そう。
作りたい画面を決めて、目的に合うスキルを1つ選ぶ。元のページを残すと、どこが良くなったか判断しやすくなります。
Taste
構図・文字・余白の判断を深めたい。
Huashu
ブランド表現から制作・レビューまで相談したい。
Impeccable
できている画面を診断して磨きたい。
UI UX Pro Max
配色やスタイルを幅広く検討したい。
各作者の公式公開情報をもとに、うみが用途別に整理した資料です。選び分けは編集上の提案です。導入手順や対応環境は更新されるため、実行時はリンク先の最新情報をご確認ください。