文字と配置を編集できるSVG
テキスト、図形、レイアウトを要件に合わせて変更できます。原本を残し、作業用コピーで調整してください。
画像生成SaaSの画面設計 · SVG素材パック
画像生成サービスのUIキットで、実装前に導線を詰める
個人開発や新規サービスの画面設計に使えるUIキットです。プロンプト入力から生成結果、履歴、料金プランまでをひと続きで検討できます。編集可能なSVGを出発点に、無料のAI UI Designer SkillをCodexやClaude Codeで使い、要件に合わせて文言やレイアウトを変更できます。
有効な有料サブスクリプションに含まれます。クレジットは消費しません。
静的なSVG設計素材 · サンプル文言は中国語 · アプリのコードは含みません
- デスクトップ画面
- 6
- 配色テーマ
- 2
- モバイル参考画面
- 2
- 編集可能な形式
- SVG
生成した後の操作まで、画面単位で確認
画像を作る画面だけでなく、作品を探す、プランを選ぶ、プロフィールを更新する導線も確認できます。各デスクトップ画面にグレースケールのワイヤーフレームとライト・ダークの設計を収録しています。
ホーム
製品の説明と作例を示し、画像生成を始める入口を検討できます。
ログイン・登録
ログインフォームと、状態ボードにある登録項目やエラー表示を確認できます。
画像生成
プロンプト、モデル、縦横比、枚数、消費クレジットと結果の関係を確認できます。
生成履歴
画像の検索、詳細、設定の再利用、削除確認の表示を検討できます。
プラン・クレジット
残高やサンプルのプランを並べ、購入結果の設計を参照できます。
アカウント設定
プロフィール項目、保存後の表示、ログアウトの配置を確認できます。
プレビューは中国語のサンプル文言と架空の製品データを使用しています。フォームやボタンは動作しない静的デザインです。
画面の見た目と、迷いやすい状態を一緒に検討
SVGの画面に加えて、部品・状態のボードやシナリオ説明も同じZIPに収録。変更した画面とほかのページを照らし合わせられます。
ワイヤーフレームと明暗テーマ
2 個のテーマJSONを収録。グレースケールで情報の優先順位を確認してから、ライトまたはダークの配色を検討できます。
空・処理中・エラーの設計も確認
ボタン、入力欄、セレクター、カード、ダイアログの参照素材と、生成中、履歴なし、クレジット不足、ログインエラー、決済失敗の状態ボードがあります。
モバイルは生成画面と履歴を収録
生成画面と履歴を390px幅で設計しています。ほかのページのモバイル動作はシナリオに記載され、個別のモバイル設計図は含まれません。
ZIPを取り込み、サービスの要件に合わせる
無料Skillで素材を取り込めます。取り込み用の補助スクリプトにはPython 3.9 以上が必要です。
- 1
契約中のアカウントでダウンロード
サイトからの取得には有効な有料サブスクリプションが必要です。パックの取得で生成クレジットは消費しません。
- 2
ZIPの保存先をSkillに渡す
CodexまたはClaude CodeにAI UI Designer Skillを導入し、ローカルのZIPパスを指定して取り込みを依頼します。
- 3
変更箇所を指定してSVGを確認
テーマ、項目名、配置などの要望を伝えます。出力を確認し、原本を保ったまま作業ファイルを修正します。
変更例：EC商品のバナー制作画面
画像生成シーンパックのライトテーマを使って、EC商品用のバナー制作画面を設計してください。入力欄を商品名と訴求ポイントに変更し、バナーの縦横比を選べる配置にしてください。消費クレジットの説明と結果カードを残し、編集可能なSVGで出力してください。
無料Skillで始めるか、画面素材も使うか
要件からの設計、パックの取り込み、テーマの適用は無料Skillで行えます。この画面セットをサイトから入手する場合に有料サブスクリプションが必要です。
- 自分の要件から設計
- 無料Skill · 無料
- パックの取り込み・テーマ適用
- 無料Skill · 無料
- この画面セットを入手
- シーンパック · 有効な有料サブスクリプション
- 取得済み素材をローカルで利用
- シーンパック · 契約終了後も利用可能
FAQ
実装前に知っておきたい収録内容
設計素材の範囲と、ダウンロードの利用条件を確認できます。
画面構成を確かめてから、あなたのサービスへ
UIキットのプレビューで生成・履歴・料金の導線を確認し、必要な素材を選びましょう。有効な有料サブスクリプションで取得したSVGは、無料Skillでテーマや文言を調整できます。
SVG素材パックをダウンロード有効な有料サブスクリプションに含まれます。クレジットは消費しません。