フロントエンド & UI
design-skills · Brutalism
打ちっぱなしコンクリート風のレイアウト、Darker Grotesque の見出し、赤とオーカー。
概要
1950 年代の打ちっぱなしコンクリート建築に着想を得た、ブルータリズム UI の指針スキル。装飾を排し、機能的で、あえて不調和。見出しに Darker Grotesque、白地に赤 #DD614C とオーカー #DAA144。
Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
デザインにとっての意味
- 太く装飾のない要素が飾りを削ぎ落とすので、構造とコピーが重みを担う。
- 赤とオーカーという強い 2 色のアクセントが、グラデーションと影を完全に置き換える。
- アクセシビリティの下限は依然として適用されるので、不調和なレイアウトでもコントラストと見えるフォーカスは保たれる。
カバーする内容
- Brand
- Style foundations
- Accessibility
- Rules: do
- Quality gates
- Example constraint language
インストール方法
design-skills · Brutalism
-
リポジトリをクローンする。
git clone https://github.com/bergside/awesome-design-skills -
スキルファイルの場所を Codex に指定する。
skills/brutalism/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
コンポーネントを選ばせる前に、トーンは太く装飾なしだと Codex に伝える。
-
品質ゲートが求めるとおり、すべてのルールをトークンか閾値に紐づける。
-
出力をレビューするときは、各「すべき」ルールに具体的な「してはいけない」例を対にする。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。