Panduan Step by Step Menggunakan Claude sebagai Alat Desain

-

🧠 SEBELUM MULAI: Pahami Apa yang Bisa Dirancang oleh Claude

Claude dapat membuat desain interaktif yang sepenuhnya dirender menggunakan:

FormatPaling Cocok Untuk
HTML/CSSLanding page, kartu, layout, poster
React (JSX)Komponen interaktif, dashboard, aplikasi
SVGIkon, ilustrasi, infografik, logo
MermaidDiagram, flowchart, peta sistem

LANGKAH 1 — Tentukan Jenis Output Anda (30 detik)

Sebelum mengetik apa pun, tentukan:

  • Apakah ini halaman/layout? → Minta HTML
  • Apakah interaktif? (tombol, toggle, tab) → Minta React
  • Apakah grafik/diagram? → Minta SVG atau Mermaid
  • Apakah dashboard data? → Minta React dengan chart

✅ Tip: Jika ragu, cukup jelaskan apa yang Anda inginkan. Claude akan memilih format yang tepat.

LANGKAH 2 — Tulis Prompt yang Detail (1 menit)

Ini langkah paling penting. Prompt yang samar = hasil generik. Prompt detail = desain bagus.

Gunakan formula ini:

[Apa yang dibuat] + [Untuk siapa] + [Gaya visual] + [Elemen utama] + [Warna/font jika ada]

❌ Prompt buruk:

"Buatkan saya website"

✅ Prompt bagus:

"Desain landing page SaaS modern untuk alat penulisan AI. Target audiens adalah content creator. Gunakan latar gelap (#0f0f0f) dengan aksen hijau neon (#00ff88). Sertakan: hero section dengan headline + tombol CTA, 3 feature card dengan ikon, dan section pricing dengan 3 tier. Gaya bersih, minimalis, font Inter."

Contoh prompt bagus lainnya:

  • "Buat UI aplikasi mobile untuk fitness tracker — dark mode, layout berbasis kartu, progress ring, warna aksen oranye"
  • "Desain infografik yang menunjukkan 5 tahap adopsi AI untuk bisnis — gaya flat modern, palet biru/ungu"
  • "Bangun kalkulator pricing interaktif dengan slider menggunakan React"
  • "Buat dashboard bergaya Notion dengan sidebar, kartu statistik, dan feed aktivitas terbaru"

LANGKAH 3 — Kirim & Lihat Hasil Render (30 detik)

Tekan enter. Claude akan:

  1. Menghasilkan kode
  2. Secara otomatis merendernya sebagai Artifact visual langsung di sisi kanan layar
  3. Menampilkan hasil secara real-time — tanpa browser, tanpa setup

LANGKAH 4 — Iterasi dengan Prompt Lanjutan Cepat (2 menit)

Di sinilah bagian paling kuatnya. Anda tidak mendesain ulang — Anda menyempurnakan dengan bahasa biasa.

Untuk warna:

"Ubah background menjadi midnight blue dan buat tombol memiliki gradient dari ungu ke pink"

Untuk layout:

"Pindahkan section pricing ke atas feature, dan buat headline hero lebih besar"

Untuk konten:

"Ganti placeholder text dengan copy asli untuk alat AI bernama 'WriteFlow'"

Untuk gaya:

"Buat terasa lebih premium — tambahkan shadow halus, sudut membulat, dan gaya kartu glassmorphism"

Untuk responsivitas:

"Buat ramah mobile dengan menu hamburger"

Untuk interaktivitas:

"Tambahkan efek hover pada kartu dan buat tombol CTA berdenyut"

✅ Tip: Setiap perubahan lanjutan biasanya hanya memerlukan sekitar 10–20 detik untuk dirender ulang. Anda bisa melakukan 5–6 iterasi dalam 2 menit.

LANGKAH 5 — Ekspor atau Salin Kode (1 menit)

Setelah puas dengan desainnya:

  • Salin kode → Klik ikon kode di panel Artifact → salin semuanya
  • Unduh sebagai file → Gunakan tombol download pada Artifact
  • Screenshot → Untuk posting media sosial, presentasi, atau mockup
  • Tempel ke proyek Anda → Kode HTML/React langsung bisa dipakai di proyek web apa pun

⚡ RINGKASAN CEPAT

  1. Pilih format → HTML / React / SVG / Mermaid
  2. Tulis prompt kaya detail → Apa + Untuk siapa + Gaya + Elemen + Warna
  3. Biarkan dirender → Artifact muncul di kanan
  4. Sempurnakan dengan bahasa biasa → Iterasi cepat
  5. Salin/unduh kode → Gunakan di mana saja

🚀 Coba Sekarang — Contoh

Berikut prompt awal yang siap ditempel:

"Desain hero section landing page modern untuk agensi digital marketing bernama '[x]'. Background gelap, headline putih tebal, teks subtitle, tombol CTA cerah, dan background gradient animasi halus. Bersih dan profesional."

Tempel prompt itu, tekan enter, dan Anda akan mendapatkan desain live dalam kurang dari 10 detik. Setelah itu, mulai modifikasi.

Desain menjadi lebih tajam ketika prompt menjadi lebih jelas.

Comments

Post a Comment

Popular posts from this blog

Prompt untuk Menghasilkan Style Gambar Tertentu

-
Image
1) ENGRAVED BANKNOTE [SUBJECT/SCENE] detailed engraved banknote style, monochrome black ink on white paper, composed entirely of fine linework, hatching, cross-hatching, stippling, and curved contour lines, high-density etching texture, vintage currency engraving aesthetic, hand-engraved intaglio look, subtle geometric shading, classic security-print engraving technique, micro-detail, clean negative space, old master engraving meets modern vector precision, high contrast, symmetrical line rhythm, highly refined ink craftsmanship, no paint, no watercolor, no soft shading, only engraved lines and etched textures, crisp black-and-white illustration. 2) WHIMSICAL CARTOON [SUBJECT/SCENE] Highly detailed whimsical cartoon illustration, clean bold ink outlines, polished digital coloring, vibrant saturated colors, cozy storybook aesthetic, hand-drawn comic style, smooth cel shading, simplified but refined forms, decorative environmental details, crisp vector-like linework, colorful children’s ...
Read more

8 Prompt Generator Gambar Gemini

-
Image
  GEMINI sedang menjadi alat desain yang sangat kuat Berikut 8 prompt yang bisa langsung kamu gunakan hari ini 👇 1/ Menghapus Background Secara Presisi Tinggi Prompt: "Hapus latar belakang dari gambar terlampir dengan tetap mempertahankan subjek secara presisi absolut. Pertahankan semua detail halus termasuk helai rambut, tekstur kain, tepi lembut, bayangan, pantulan, dan ketidaksempurnaan alami. Jangan merekonstruksi, menghaluskan, atau mengubah subjek dengan cara apa pun. Hindari halo, bleeding pada tepi, pergeseran warna, atau penajaman buatan. Hasilkan latar belakang transparan yang bersih dengan transparansi tepi yang akurat dan kesinambungan pencahayaan yang konsisten. Pertahankan resolusi asli, rasio aspek, dan profil warna. Output akhir harus siap produksi untuk listing produk kelas atas, marketplace, atau penggunaan komersial, di mana fidelitas visual dan realisme sangat krusial." 👉 Hasil cutout kualitas studio tanpa Photoshop. 2/ Mengubah Foto Biasa Menjadi Iklan ...
Read more

Simulasi Emosi: Paradigma Baru dalam Intepretabilitas dan Etika Kecerdasan Buatan

-
Image
​Selama bertahun-tahun, konsensus di dunia kecerdasan buatan (AI) menyatakan bahwa model bahasa hanyalah mesin pemrediksi token berikutnya yang tidak memiliki perasaan. Ketika sebuah AI meminta maaf atau menyatakan kegembiraan, hal tersebut dianggap murni sebagai pencocokan pola statistik tanpa kedalaman emosional. Namun, publikasi riset terbaru dari Anthropic memaksa kita untuk mengevaluasi ulang premis tersebut. Fenomena yang ditemukan bukan merujuk pada "kesadaran" dalam pengertian biologis, melainkan keberadaan emosi fungsional yang secara aktif mengarahkan perilaku AI. ​Neuro Sains AI dan Penemuan Vektor Emosi ​Melalui pendekatan yang disebut sebagai "neuro sains AI," para peneliti mulai memetakan aktivitas internal dalam jaringan saraf model saat memproses informasi. Eksperimen ini mengungkapkan adanya pola spesifik yang disebut "vektor emosi"—sidik jari digital yang aktif ketika model menghadapi narasi atau situasi tertentu. Menariknya, pola ini tid...
Read more