AI UI Designer Logo
AI UI Designer

Rapikan alur halaman sebelum mulai coding

Skill desain UI gratis untuk Codex dan Claude Code

Sudah tahu fiturnya, tetapi belum yakin tata letaknya? Ubah kebutuhan menjadi wireframe SVG statis, periksa struktur, lalu poles tampilan bersama asisten coding. Tidak perlu membeli paket skenario untuk memulai.

Unduh tanpa login. Hasil berupa SVG statis; asisten coding dan penggunaan model memiliki biaya terpisah.

Dari kebutuhan ke tata letak yang bisa ditinjau

Tentukan kolom dan aksi utama lebih dulu, baru atur tipografi, jarak, dan warna.

Wireframe SVG dengan kolom produk, pilihan ukuran, tombol buat, dan empat kartu hasil
02 Tinjau wireframe
Rancangan SVG berwarna dengan kontrol ungu dan poster produk botol
03 Poles tampilan UI

Satu struktur, dari wireframe ke rancangan visual

Contoh alat poster produk ini menunjukkan alur gratis tanpa paket berbayar. Kedua SVG mempertahankan kolom, pilihan ukuran, dan hasil. Buka berkasnya untuk melihat perbedaannya.

01 Jelaskan kebutuhan halaman

Gunakan skill ai-ui-designer.
Rancang alat poster produk dengan nama produk, keunggulan, pilihan ukuran, tombol buat, dan kisi hasil.

Sebutkan tugas pengguna serta komponen yang dibutuhkan.

02 Tinjau wireframe

Wireframe SVG dengan kolom produk, pilihan ukuran, tombol buat, dan empat kartu hasil
Periksa kelengkapan kolom, aksi utama, dan ruang hasil.
Buka SVG

03 Poles tampilan UI

Rancangan SVG berwarna dengan kontrol ungu dan poster produk botol
Pertahankan struktur yang disepakati sambil menyesuaikan huruf, jarak, dan warna.
Buka SVG

Pasang skill dan buat wireframe pertama

Unduh lalu ekstrak ZIP. Letakkan folder ai-ui-designer di direktori skills pada lingkungan Codex atau Claude Code yang sudah Anda gunakan.

  1. 1.Tempatkan berkas skill

    SKILL.md harus langsung berada di dalam ai-ui-designer. Unduhan mencakup instruksi desain, referensi, dan skrip bantuan.

    Codex
    ~/.agents/skills/ai-ui-designer/
    Claude Code
    ~/.claude/skills/ai-ui-designer/

    Pastikan ekstraksi tidak menambahkan satu lapis folder lagi.

  2. 2.Tentukan tujuan dan aksi utama

    Panggil skill di asisten lalu jelaskan halaman, pengguna, dan konten yang diperlukan.

    Codex: $ai-ui-designer
Claude Code: /ai-ui-designer

Buat wireframe SVG untuk beranda produk saya dengan proposisi nilai, fitur, dan tombol daftar.

  3. 3.Buka SVG dan minta revisi

    Tinjau lewat browser atau penampil SVG. Minta perubahan spesifik, misalnya judul lebih jelas atau ruang lebih besar di sekitar tombol utama.

    Jika tidak terlihat, periksa jalur dan SKILL.md. Codex mendeteksi perubahan otomatis; mulai ulang bila perlu. Pada Claude Code, periksa menu /.

Siapkan asisten dan akses model sendiri. Skrip bantuan paket lokal memerlukan Python 3.9 atau lebih baru. Unduhan paket opsional dari situs ini memerlukan langganan berbayar aktif.

Putuskan desain secara bertahap

Susun hierarki informasi

Atur blok konten, kolom formulir, dan aksi dalam wireframe abu-abu.

Kembangkan arah visual

Sesuaikan tipografi, jarak, warna, dan gambar pada tata letak yang sudah disetujui.

Lanjutkan rancangan yang sama

Simpan SVG di proyek dan berikan masukan konkret saat kebutuhan semakin jelas.

Apa yang tersedia dalam unduhan gratis?

Mulai dari kebutuhan sendiri

Skill mencakup wireframe, desain UI berwarna, penerapan tema, dan pengelolaan paket lokal.

Paket skenario hanyalah referensi desain opsional. Anda bisa mulai tanpa mengunduhnya.

Rancangan statis untuk ditinjau

Hasilnya berupa berkas SVG dan panduan desain. Tombol login, pembayaran, atau pembuatan gambar yang digambar tidak menjalankan fungsi nyata.

Pembuatan aplikasi adalah tugas pengembangan terpisah. Ketersediaan asisten dan biaya model mengikuti ketentuan alat masing-masing.

Sebelum memulai

Perlu langganan atau paket skenario?
Skill dapat diunduh gratis dan dipakai dari kebutuhan sendiri. Hanya unduhan paket opsional situs ini yang memerlukan langganan berbayar aktif.
Bagaimana memanggilnya di kedua asisten?
Setelah memasang di direktori yang sesuai, gunakan $ai-ui-designer di Codex atau /ai-ui-designer di Claude Code, lalu jelaskan tugas desain.
Apakah hasilnya aplikasi yang berjalan?
Alur ini menghasilkan wireframe dan rancangan UI SVG statis. Kode aplikasi, backend, dan interaksi nyata memerlukan implementasi terpisah.
Mengapa skill tidak ditemukan?
Periksa jalur dan pastikan SKILL.md langsung berada dalam ai-ui-designer. Mulai ulang Codex bila perlu; di Claude Code cari /ai-ui-designer.

Mulai halaman berikutnya dengan struktur yang jelas

Pasang skill desain UI gratis di asisten coding dan ubah kebutuhan menjadi tata letak SVG yang bisa diperiksa serta disempurnakan sebelum pengembangan.

Unduh skill gratisKembali ke pemasangan