フロントエンド & UI
Hallmark
58 のゲートと構造的な多様性の強制を備えた、量産感を避けるデザインフロー。
概要
AI コーディングアシスタント向けのデザインスキル。既定のビルドフロー 1 つと、audit、redesign、study の 3 つの動詞を持つ。2 つのビルドが同じページのリズムを共有しないよう、構造的な多様性を促す。
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark
デザインにとっての意味
- 多様化のルールが、連続するビルドで異なるマクロ構造、ナビ、フッターを強制する。
- 固定されたトークンが、トークンブロックを迂回するインラインの hex や font-family 値を禁止する。
- すべての出力が、320、375、414、768 ピクセル幅で検証される。
カバーする内容
- How to use this skill
- Disciplines that hold across every verb
- When the brief is a component, not a page
- Design flow (default)
- Hallmark study
- Output contract and scope
インストール方法
Hallmark
-
リポジトリをクローンする。
git clone https://github.com/Nutlope/hallmark -
スキルファイルの場所を Codex に指定する。
skills/hallmark/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
まずプリフライトのスキャンに、既存のフォント、パレット、モーションライブラリを読ませる。
-
オーディエンス、ユースケース、トーンのゲートに答えるか、そのまま進めるよう伝える。
-
ページに対して hallmark audit を実行し、編集なしで優先順位づけした指摘リストを得る。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。