
Panduan Menulis Prompt
Panduan Utama untuk Menguasai Prompt di enter.converge.ai
Anda mungkin sudah menemukan bahwa keajaiban utama dari enter.converge.ai terletak pada prompt. Ini adalah bahasa yang Anda gunakan untuk berkomunikasi, berkolaborasi, dan berkreasi dengan AI kami.
Semakin baik prompt Anda, semakin mengesankan hasilnya.
Bayangkan Enter sebagai developer junior yang cerdas dan sangat cepat... namun sangat buruk dalam membaca pikiran. Ia bisa membangun apa saja yang Anda minta, tetapi tidak bisa menebak maksud Anda. Tugas Anda adalah memberikan serangkaian instruksi yang sangat jelas, seperti Dokumen Persyaratan Bisnis (BRD) yang sempurna.
Panduan ini akan memandu Anda melalui seni dan sains dari pembuatan prompt yang efektif, membawa Anda dari pemula menjadi profesional.
Bagian 1: Prinsip Utama โ Membangun Fondasi yang Kokoh
Sebelum Anda membangun apa pun, ingatlah baik-baik tiga aturan emas ini.
Aturan 1: Kejelasan adalah Kunci (Jangan Ambigu)
Ambiguitas adalah musuh terbesar Anda. Instruksi Anda harus sangat presisi hingga ke tingkat piksel.
Prompt Buruk ๐:
"I need the pricing plans for my site."
Prompt Baik ๐:
"Create an interactive pricing section component with these features:- 3 pricing tiers (Starter, Professional, Enterprise) with monthly/annual toggle - Animated starfield background that reacts to mouse movement using Framer Motion - Confetti animation when switching to annual billing - Smooth price transitions using @number -flow/react- professional card with "Most Popular" badge that lifts up on desktop - Monthly/Annual toggle with animated sliding pill effect - Responsive layout with staggered card animations on scroll - Modern blue color scheme using semantic design tokens"
https://9564a74b85ba4b6b877a95dcf70a26a8.prod.enterapp.pro
Tips Pro: Mulailah prompt Anda dengan kata kerja aktif yang kuat seperti Create, Generate, Refactor, Write, Design, atau List
Aturan 2: Konteks adalah Ratu (Berikan Alasan "Mengapa")
Enter tidak tahu apa proyek Anda, untuk siapa proyek itu, atau apa tujuan Anda. Anda harus memberikan alasan "mengapa" di balik "apa" yang Anda minta.
Prompt Buruk ๐:
"Create a landing page for me."
Prompt Baik ๐:
"I am building a landing page for 'Chroma', a new AI color palette generator for designers. The design must feel futuristic, artsy, and premium to impress this audience. I want a 'glassmorphism' hero section with a subtle, animated gradient background. Instead of a boring 'features' list, I want an interactive section where the user can see sample color palettes dynamically applied to a mock UI card. This is the main selling point."
https://a9e8f5c49fbf4b2ca5a7ed6db9253f69.prod.enterapp.pro
Aturan 3: Terapkan Konsistensi (Tentukan "Batasan" Anda)
AI tidak memiliki selera bawaan. Tanpa aturan, ia akan menjadi seniman yang berantakan. Anda harus menentukan "batasan"โsistem desain Andaโagar AI dapat bekerja di dalamnya. Ini adalah rahasia untuk menghasilkan aplikasi yang rapi dan profesional.
Praktik Buruk ๐:
"Make a blue CTA button."
"Create a pricing card and highlight the 'Pro' plan."
Praktik Baik ๐:
"The app is a high-end financial analytics tool, so the theme must be 'dark mode first', professional, and data-dense, like a Bloomberg Terminal or Linear. Enforce these rules: Theme: Dark mode only. Background: '#111111'. Main Card/Module Background: '#1A1A1A'. Typography: Use 'Inter' for all text. Use 'SF Mono' for all numbers and financial data. Accent Color: A single, vibrant accent: '#00F5D4' (bright teal). Use this only for primary CTAs and active data points. Style: No border-radius; all elements must have sharp, 90-degree corners. Use 1px borders in '#333333' to define components, not shadows."
https://41849c3aa6604b49a9b8a9a6e6cb5df4.prod.enterapp.pro
Bagian 2: Panduan enter.converge.ai โ Membangun Seperti Lego
Ini adalah strategi paling penting untuk membangun seluruh aplikasi, bukan hanya halaman biasa.
Strategi 1: Bangun Secara Modular, Bukan Monolitik (Metode Lego)
Ini adalah kesalahan pemula nomor satu. Jangan mencoba membuat Enter menghasilkan seluruh aplikasi yang kompleks dalam sekali jalan.
Pendekatan profesional adalah dengan membangun satu layar lengkap atau alur pengguna pada satu waktu.
Prompt Buruk ๐:
"Build me an app like Airbnb."
Prompt Baik ๐:
"Let's build the complete user booking flow for our Airbnb-clone, 'Roam'. We'll do it screen by screen. Start with Screen 1: The Listing Details Page. This screen needs a photo grid (like Airbnb's, one main image and 4 smaller ones), a 'sticky' sidebar on the right with the booking/price-per-night module, and the main content column on the left."
"Okay, great. Now, create Screen 2: The 'Confirm and Pay' Page. When a user clicks 'Book' from Screen 1, they land here. This page needs to show a booking summary, a price breakdown, and a simple, highly-secure form for credit card input. The design must be extremely clean and trustworthy to maximize conversion."
https://26985927857e4d70be5075c634aae015.prod.enterapp.pro
Strategi 2: Berikan Contoh (Few-Shot Prompting)
Ketika pola desain yang Anda inginkan sulit dijelaskan, tunjukkan, jangan hanya katakan. Berikan contoh input/output kecil untuk melatih Enter tentang pola visual yang Anda inginkan.
Prompt Buruk ๐:
"I need to show a list of my team members."
Prompt Baik ๐:
"I need to generate a 'Meet the Team' page. I have a list of people, but I want to apply a specific visual pattern to them. Here is my pattern: Input Pattern: [Name], [Role], [Short Bio], [Image URL] Output Pattern (Visual Layout): Create a card. The [Image URL] should be 3:4 aspect ratio with a grayscale filter applied by default. Interaction: On hover, the image transitions to full color and zooms in slightly (scale 1.05). Below the image, display the [Name] in uppercase 'Inter' font (tracking-wide). Below the name, display the [Role] in a serif font, italic, and light grey. * Now, apply this exact visual output pattern to the following data: [Data for 3 team members...]. Then, render all 4 cards in a responsive 3-column grid."
https://203ec90377454c449b382cba0dd6dc99.prod.enterapp.pro
Bagian 3: Teknik Lanjutan โ Jadikan AI sebagai Mitra Anda
Setelah Anda menguasai dasar-dasarnya, gunakan teknik-teknik ini untuk meningkatkan alur kerja Anda.
Teknik 1: Minta AI untuk Mengajukan Pertanyaan kepada Anda
Tidak yakin apakah Anda telah memberikan detail yang cukup untuk layar aplikasi yang kompleks? Balikkan perannya dan buat Enter menghasilkan persyaratannya.
Prompt Buruk ๐:
"I want a user profile page."
Prompt Baik ๐:
"I want to design the complete 'Account Settings' area for a user. This will be a complex page with multiple tabs. Before you start building, ask me 5 critical questions about the required sections, data, and user actions (like 'danger zones' for deleting an account) so you can create the perfect design."
Teknik 2: Berbicaralah Seperti seorang Art Director
Enter memahami istilah-istilah desain. Gunakan kata kunci industri untuk menentukan estetika yang kompleks dengan cepat.
Prompt Buruk ๐:
"Make me a website to show my pictures."
Prompt Baik ๐
"Build a homepage for a high-end fashion photographer. The aesthetic must be 'Editorial' and 'Minimalist'. I want a full-screen, asymmetrical 'broken grid' layout, inspired by 'Awwwards' or 'Vogue'. The grid must be interactive: as the user's mouse hovers over an image, it must expand slightly (e.g., scale: 1.05) and transition from grayscale to full color. The typography must be a bold, elegant Serif font (like 'Playfair Display'), with some headlines overlapping the images. The navigation must be a tiny, minimal sans-serif, pinned to the top-left corner."
https://d38e2d22eb6b4173b8adfefb7a02816a.prod.enterapp.pro
Teknik 3: Cara Melakukan Debug (Ketika Terjadi Kesalahan)
Ketika Enter mengalami kendala atau membuat kesalahan visual pada aplikasi Anda, jangan hanya katakan "Perbaiki". Bimbing ia seperti seorang developer senior.
Berikan Tangkapan Layar ๐: Ini adalah cara tercepat. Unggah tangkapan layar dari bagian yang rusak beserta pesan kesalahannya.
"As you can see in this mobile screenshot, the cards are overflowing the container. They should be in a single-column flex layout on screens smaller than 600px. Please check the media queries."
Tanyakan Mengapa ๐:
"What is the root cause of this layout shift? Explain it to me in simple terms."
Ubah Pendekatan ๐:
"This CSS Grid approach seems to be failing. Let's try a completely different method. Refactor this entire section to use Flexbox instead."
Kesimpulan: Perjalanan Anda Baru Saja Dimulai
Membuat prompt adalah sebuah seni sekaligus keterampilan. Cara terbaik untuk belajar adalah melalui uji coba, kesalahan, dan iterasi.
Jangan takut untuk bereksperimen. Semakin jelas instruksi Anda, semakin kaya konteks Anda, dan semakin modular layar aplikasi Anda, maka semakin menakjubkan hasil yang akan Anda dapatkan.
Sekarang, buka enter.converge.ai dan coba prompt pertama Anda!
Lampiran: Lembar Panduan Prompt enter.converge.ai
Coba gunakan kata kunci ini dalam prompt Anda. Kata kunci ini membantu Enter memahami maksud Anda dengan presisi.
| Kategori | Kata Kunci |
|---|---|
| Tata Letak | Responsive, Grid layout, Flexbox, Three-column layout, Sidebar, Navbar, Footer, Header, Full-width, Centered, Sticky, Split-screen, Masonry layout, Dashboard layout, Card-based layout |
| Gaya | Glassmorphism, Neumorphism, Minimalist, Techy, Corporate, Modern, Dark mode, Rounded corners, Shadow, Gradient, Brutalist, Playful, Editorial, Futuristic, Retro, Pastel, High contrast, Clean white, Colorful accents |
| Komponen | Modal, Popup, Date picker, Carousel, Slider, Accordion, Tabs, Breadcrumbs, CTA button, Form, Input field, Dropdown, Table, Pagination, Search bar, Sidebar menu, Chat bubble, Notification toast, Progress bar, Stepper, Timeline, Card |
| Animasi & Gerakan | Hover animation, Fade-in, Slide-up, Parallax scrolling, Microinteraction, Smooth transition, Framer Motion, GSAP-like, Scroll-based reveal, Animated gradient, Looping hero video, Subtle hover glow, Animated icons |
| Inspirasi | Inspired by Linear, Like Superhuman's onboarding, Airbnb-style grid, Bloomberg-style (data-dense), Notion-like interface, Framer aesthetic, Apple-style marketing page, Stripe documentation look, Pitch deck vibe, Figma-like collaboration feel |






