フロントエンド & UI
imagegen-frontend-mobile
上質なモバイルアプリの画面フローを、コードではなく画像として生成する。
概要
iOS、Android、クロスプラットフォーム製品向けに、モバイル画面のコンセプトとフローを画像だけで扱うスキル。画面はすっきりしたスマートフォンのモックアップの中に提示し、コードは一切書かない。
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, s
デザインにとっての意味
- 画面はスマホの中の Web サイトのようには見えず、セーフエリアとシステム領域を尊重する。
- 固定したデザインバイブルが、パレット、書体、アイコンを全画面で一貫させる。
- 複数画面のセットは、無関係な単発モックアップではなく、説得力のあるフローを形づくる。
カバーする内容
- Platform mode rule
- Generate enough screens rule
- App design bible rule
- Safe area and system region rule
- Device mockup frame rule
- Text size and readability rule
インストール方法
imagegen-frontend-mobile
-
リポジトリをクローンする。
git clone https://github.com/Leonxlnx/taste-skill -
スキルファイルの場所を Codex に指定する。
skills/imagegen-frontend-mobile/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
アプリのカテゴリと画面数を伝えると、各画面がそれぞれ 1 枚の画像になる。
-
スキルはまず iOS、Android、クロスプラットフォーム中立のいずれかのモードを選ぶ。
-
文字が小さい、あるいはフレーミングが不均一な画面は、再生成を頼む。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-web ランディングページのセクションごとに、横長の参考画像を 1 枚ずつ生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。