Codex Design と tweakcn の比較。

tweakcn と Codex Design のデザインシステムライブラリは、どちらも AI が作ったアプリがほかの shadcn アプリと同じ見た目になるのを防ぐためのものです。tweakcn は shadcn/ui のテーマ用のビジュアルエディターです。私たちのライブラリは、Web サイトとモバイルアプリ向けの完全なデザインシステムを集めたもので、Codex や Claude Code が従えるように書かれていて、それぞれに shadcn テーマが付いています。

2026年11月6日 更新 · 約 5 分で読めます

結論から

shadcn のテーマを色ごとに手で調整したい、あるいは画像から生成したいなら、tweakcn を使いましょう。Web サイトやモバイルアプリのために、タイプスケール、レイアウトのルール、避けるべきことまで含む完全なデザインシステムに AI エージェントを従わせたいなら、Codex Design のライブラリから始めましょう。

• tweakcn を選ぶのは、ライブプレビューを見ながらすべての shadcn 変数を自分の手で調整したい、コミュニティのテーマが豊富にほしい、プロンプトや画像から AI で生成したい場合です。
• Codex Design のライブラリを選ぶのは、Codex や Claude Code でデザインしていて、Web だけでなくモバイルアプリ向けのガイダンスもほしい、あるいはエージェントが保存して従う DESIGN.md としてシステムがほしい場合です。

それぞれのツールとは

tweakcn は、Tailwind CSS と shadcn/ui のためのオープンソースのビジュアルテーマエディターで、Sahaj（GitHub では jnsahaj）が作っています。プリセットから始め、リアルタイムプレビューとコントラストチェッカーを見ながら、色、タイポグラフィ、角の半径、余白、影を調整し、テーマを CSS 変数または shadcn のレジストリコマンドとしてエクスポートします。Tailwind v4 と v3 に対応し、OKLCH でも HSL でも使えます。Pro プランでは、画像からの生成を含む AI テーマ生成が無制限になります。

Codex Design のライブラリは、このサイトで公開している無料のデザインシステム集です。どれも、ライトモードとダークモードの色、Google Fonts、タイプスケール、角の半径、余白、影、そしてそれらの使い方のルールを備えています。すべてのシステムに、ライブプレビュー、エージェントが URL から読める DESIGN.md、Tailwind v4 用の globals.css、コマンド 1 つでインストールできる shadcn テーマがあります。半数はモバイルアプリ向けで、タッチ領域、タブバー、画面の余白も定義しています。

並べて比較

2026 年 11 月 6 日時点の情報で、出典は tweakcn.com とその GitHub リポジトリです。

tweakcn を選ぶべきとき

テーマを自分で形づくりたいなら、tweakcn が向いています。shadcn の変数はどれもスライダーかカラーピッカーになっていて、変更するとプレビューがすぐ更新され、コミュニティのギャラリーには多くの出発点があります。すでにブランドカラーがあり、決める前に shadcn のコンポーネント全体でどう見えるかを確かめたいなら、CSS を手で編集するより速いです。

Codex Design のライブラリを選ぶべきとき

テーマが決めるのは色、フォント、角の半径ですが、エージェントには、見出しの大きさ、テキストの幅、セクションの間隔、避けるべきパターンも必要です。私たちのライブラリでは、各システムがそれを DESIGN.md に書き出しているので、Codex や Claude Code は shadcn のコンポーネントだけでなく、すべての画面に適用できます。アプリ向けのシステムには、48px のタッチ領域や下部のタブバーなど、スマートフォンの画面に必要なルールが加わります。さらに、紫のグラデーションやグラスモーフィズムなど AI が作ったように見えるパターンを避けているので、プロダクトを生成物のように見せたくないときの、より安全な出発点になります。

よくある質問

Codex Design のライブラリは tweakcn の代わりになりますか？

出発点となるテーマを選ぶ用途なら、なります。どのシステムも、コマンド 1 つで shadcn テーマとしてインストールできます。テーマをビジュアルに編集する用途では、tweakcn のほうが多機能です。私たちのライブラリは、AI エージェントが従うことを前提に作られています。

両方使えますか？

はい。ライブラリからシステムを選び、その shadcn テーマをインストールして、tweakcn で色を微調整します。そのあと、エージェントに DESIGN.md を合わせて更新するよう頼みましょう。

ライブラリを使うのに Codex Design プラグインは必要ですか？

いいえ。デザインシステムはこのサイトで無料で公開されていて、どのプロジェクトでも使えます。Codex Design プラグインは、Codex でデザインの方向性を比べるキャンバスを加えます。

続けて読む

• AI エージェント向けのデザインシステムDESIGN.md と shadcn テーマ付きの、無料の Web・アプリ向けデザインシステム。
• DESIGN.md：Codex にデザインシステムを渡すこの形式とは何か、完全なサンプル、Codex に守らせる方法。
• Taste Skill・Impeccable・UI UX Pro Max を比較：AI っぽさを消すデザインスキルはどれ？人気の「AI っぽさ」対策デザインスキルの比較。