AI UI Designer Logo
AI UI Designer

Desain layanan gambar AI · Paket sumber SVG

UI kit gambar AI: rancang alur layanan sebelum menulis kode

UI kit ini membantu pengembang mandiri dan tim produk merencanakan layanan gambar AI, mulai dari prompt hingga riwayat karya dan pilihan paket. Tinjau hubungan antarhalaman, lalu sesuaikan teks, tata letak, dan tema SVG dengan AI UI Designer Skill gratis di Codex atau Claude Code.

Termasuk dalam langganan berbayar aktif. Tidak memotong kredit.

Lihat seluruh desain halaman

Desain SVG statis · Teks contoh berbahasa Tionghoa · Tanpa kode aplikasi

Desain halaman pembuatan gambar bertema terang dengan prompt, pengaturan, dan kartu hasil
Halaman pembuatan gambar dalam paket · Tema terang
Halaman desktop
6
Tema warna
2
Referensi seluler
2
Sumber yang bisa diedit
SVG

Setelah gambar jadi, ke mana pengguna melanjutkan?

Periksa alur masuk, pembuatan gambar, pencarian karya, dan pemilihan paket sebelum mengunduh. Setiap halaman desktop memiliki wireframe abu-abu serta desain terang dan gelap untuk menilai struktur dan tampilan.

Desain beranda terang dengan pengenalan layanan, galeri, dan langkah penggunaan

Beranda layanan

Atur penjelasan produk, gambar contoh, dan akses untuk mulai membuat gambar.

Desain autentikasi dengan kolom login dan panduan pendaftaran

Login dan pendaftaran

Periksa kolom login serta rujuk pendaftaran dan pesan kesalahan pada papan status.

Desain halaman pembuatan gambar dengan panel prompt, parameter, dan kartu hasil

Halaman pembuatan gambar

Susun prompt, model, rasio, jumlah, biaya kredit, dan hasil gambar.

Desain riwayat dengan pencarian, kartu karya, dan detail gambar terpilih

Riwayat gambar

Tinjau pencarian, detail, pemakaian ulang parameter, dan konfirmasi penghapusan.

Desain halaman paket terang dengan saldo kredit dan tiga opsi fiktif

Paket dan kredit

Lihat saldo, contoh paket langganan, dan desain hasil pembelian.

Desain akun dengan formulir profil dan tanggapan setelah penyimpanan

Pengaturan akun

Rencanakan kolom profil, konfirmasi penyimpanan, dan tombol keluar.

Pratinjau mempertahankan teks contoh Tionghoa dan data produk fiktif. Tombol, formulir, dan halaman pembelian merupakan desain statis.

Pikirkan juga tampilan kosong, proses berjalan, dan kegagalan

ZIP menyatukan desain halaman, komponen, dan catatan skenario agar perubahan bisa dibandingkan dengan halaman lain dalam layanan.

Berkas SVG untuk disesuaikan

Ubah teks, bentuk, dan susunan sesuai kebutuhan produk. Simpan paket asli sebagai referensi dan kerjakan revisi pada salinan.

Tinjau struktur sebelum memilih warna

Tersedia 2 berkas JSON tema. Gunakan wireframe untuk memeriksa hierarki informasi, lalu pilih tampilan terang atau gelap sebagai titik awal.

Komponen dan status antarmuka

Lihat tombol, kolom input, pemilih, kartu, dan dialog, beserta status pembuatan berjalan, riwayat kosong, kredit tidak cukup, kesalahan login, dan pembayaran gagal.

Cakupan referensi seluler yang jelas

Halaman pembuatan gambar dan riwayat digambar selebar 390px. Perilaku seluler halaman lain dijelaskan dalam skenario, tanpa gambar seluler tersendiri.

Impor ZIP, lalu jelaskan kebutuhan produk Anda

Paket bisa diimpor dengan Skill gratis. Skrip bantu impor memerlukan Python 3.9 atau versi lebih baru.

  1. 1

    Unduh melalui akun berlangganan

    Masuk dengan langganan AI UI Designer berbayar yang aktif. Unduhan paket tidak menghabiskan kredit pembuatan gambar.

  2. 2

    Berikan lokasi ZIP kepada Skill

    Pasang AI UI Designer Skill di Codex atau Claude Code. Berikan jalur lokal berkas ZIP dan minta asisten mengimpor paket.

  3. 3

    Sesuaikan dan periksa SVG

    Pilih tema serta jelaskan kolom dan tata letak yang diinginkan. Tinjau hasilnya, lalu lanjutkan revisi pada salinan kerja sambil menyimpan sumber asli.

Contoh permintaan: panel gambar produk untuk toko online

Gunakan tema terang dari paket pembuatan gambar untuk merancang panel gambar produk toko online. Sediakan kolom nama produk, keunggulan utama, dan pilihan rasio gambar. Pertahankan keterangan biaya kredit dan kartu hasil. Keluarkan desain sebagai SVG yang bisa diedit.

Mulai dari kebutuhan sendiri atau dari desain halaman?

Skill gratis dapat merancang dari kebutuhan Anda, mengimpor paket, dan menerapkan tema. Langganan berbayar aktif diperlukan untuk mengunduh kumpulan halaman ini dari situs.

Merancang dari kebutuhan sendiri
Skill gratis · Gratis
Mengimpor paket dan menerapkan tema
Skill gratis · Gratis
Mengunduh kumpulan halaman ini
Paket skenario · Langganan berbayar aktif
Memakai berkas unduhan secara lokal
Paket skenario · Tetap bisa setelah langganan berakhir
FAQ

Isi berkas, bahasa, dan syarat unduhan

Bedakan materi desain yang diterima dengan fungsi aplikasi yang perlu dikembangkan.

Tinjau halaman yang dibutuhkan, lalu sesuaikan desainnya

Lihat alur pembuatan gambar, riwayat, dan paket dalam pratinjau UI kit. Jika sesuai, unduh SVG dengan langganan berbayar aktif dan gunakan Skill gratis untuk menyesuaikannya dengan produk Anda.

Unduh desain SVG

Termasuk dalam langganan berbayar aktif. Tidak memotong kredit.