フロントエンド & UI
design-skills · Terracotta
クリーム地にクレイのアクセント、DM Serif Display の見出し、長文の読み物向け。
概要
日に焼けたようなエディトリアルインターフェースの指針スキル。クリーム #F3E9D8 の面、テラコッタ #C56A3C のアクセント 1 色、DM Serif Display の見出し、JetBrains Mono。ブログやストーリーテリング向けに調整されている。
A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.
デザインにとっての意味
- アクセントは 1 色だけなので、強調が乱発されず、見出しが階層を担う。
- 暖かいクリームの面は、真っ白なページに比べて長い記事でのぎらつきを抑える。
- インクブラウンの本文に載るディスプレイセリフの見出しが、明快なエディトリアルのリズムを作る。
カバーする内容
- Brand
- Style foundations
- Rules: do
- Rules: don’t
- Component rule expectations
- Quality gates
インストール方法
design-skills · Terracotta
-
リポジトリをクローンする。
git clone https://github.com/bergside/awesome-design-skills -
スキルファイルの場所を Codex に指定する。
skills/terracotta/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
コンポーネントを書かせる前に、Codex をテラコッタとクリームのトークンに向ける。
-
コンポーネントごとにアナトミー、バリアント、状態を求め、余白トークンは明示的に名指しする。
-
既存の不揃いな UI を作り直すときは、アンチパターンと移行メモを求める。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。