フロントエンド & 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
上流の SKILL.md より

デザインにとっての意味

  • 多様化のルールが、連続するビルドで異なるマクロ構造、ナビ、フッターを強制する。
  • 固定されたトークンが、トークンブロックを迂回するインラインの 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

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

    git clone https://github.com/Nutlope/hallmark
  2. スキルファイルの場所を Codex に指定する。

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

Codex での使い方

  1. まずプリフライトのスキャンに、既存のフォント、パレット、モーションライブラリを読ませる。

  2. オーディエンス、ユースケース、トーンのゲートに答えるか、そのまま進めるよう伝える。

  3. ページに対して hallmark audit を実行し、編集なしで優先順位づけした指摘リストを得る。

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

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

次のステップ

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

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