フロントエンド & UI

design-skills · Editorial

厳格な 8pt グリッドの上に、Gelasio セリフで組む雑誌レイアウト。

概要

モダンなエディトリアルの見た目のためのデザインシステム指針スキル。本文と見出しの両方に Gelasio セリフ、Ubuntu Mono、白い面に載るニアブラック #111111、そして 8pt のベースライングリッド。

Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
上流の SKILL.md より

デザインにとっての意味

  • 見出しと本文を 1 つのファミリーのセリフでそろえるので、長い読み物のタイポグラフィが一貫する。
  • 8pt のベースライングリッドが、見出し、本文、余白にわたる垂直方向のリズムを徹底させる。
  • アクセシビリティの基準には、reduced-motion 対応、44px のタッチターゲット、高コントラスト対応が含まれる。

カバーする内容

  • Style foundations
  • Accessibility
  • Guideline authoring workflow
  • Required output structure
  • Component rule expectations
  • Quality gates

インストール方法

design-skills · Editorial

  1. リポジトリをクローンする。

    git clone https://github.com/bergside/awesome-design-skills
  2. スキルファイルの場所を Codex に指定する。

    skills/editorial/SKILL.md
  3. あとは作りたい UI を説明するだけ。Codex がスキルに従う。

Codex での使い方

  1. Codex にデザインの意図を言い直させ、コンポーネントに触れる前にトークンを定義する。

  2. アナトミー、バリアント、状態、レスポンシブ挙動をカバーするコンポーネントのルールを求める。

  3. QA チェックリストで締めくくり、コードレビュアーが出力を検証できるようにする。

ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。

codex-design リストをもっと見る ↗

次のステップ

セットアップなしで、Open Design とデザインする

このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。