Panduan Menulis Prompt

Panduan Menulis Prompt

Panduan Utama untuk Menguasai Prompt di enter.converge.ai

GuideTerra at Enterยท

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.

KategoriKata Kunci
Tata LetakResponsive, Grid layout, Flexbox, Three-column layout, Sidebar, Navbar, Footer, Header, Full-width, Centered, Sticky, Split-screen, Masonry layout, Dashboard layout, Card-based layout
GayaGlassmorphism, Neumorphism, Minimalist, Techy, Corporate, Modern, Dark mode, Rounded corners, Shadow, Gradient, Brutalist, Playful, Editorial, Futuristic, Retro, Pastel, High contrast, Clean white, Colorful accents
KomponenModal, 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 & GerakanHover 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
InspirasiInspired 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

You might also like

Curated automatically from similar topics to keep you in the same flow.