デザインシステム
Kami
履歴書、ホワイトペーパー、デック、ランディングページを、1 つのデザイン言語で組む。
概要
プロフェッショナルな文書と製品ランディングページのためのテンプレートシステム。暖かい羊皮紙のキャンバス、インクブルーのアクセント、セリフ主体の階層、9 種類の文書テンプレートと 15 の図版プリミティブ。
Typeset professional documents and product landing pages: resumes, one-pagers, white papers.
デザインにとっての意味
- アクセント 1 色とセリフ 1 ファミリーが、すべての成果物の見た目を一貫させる。
- 密度の取り決めが、半分も埋まらない本文ページを指摘する。
- 図版プリミティブが、アーキテクチャ、フローチャート、四象限、タイムライン、チャートをカバーする。
カバーする内容
- Decide the language
- Pick the document type
- Fill content into the template
- Build and verify
- Fonts
- Feedback protocol
インストール方法
Kami
-
リポジトリをクローンする。
git clone https://github.com/tw93/Kami -
スキルファイルの場所を Codex に指定する。
plugins/kami/skills/kami/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
必要なものを伝えると、決定木が合致するテンプレートを選ぶ。
-
まず Codex に、素のコンテンツを検証済みの content.json に整えさせる。
-
ビルドスクリプトを実行して、HTML、PDF、検証レポートを生成する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。