Articles in this category

GOOD STUFF!

How to Create Your First Prompt

Andrija Krstic Updated by Andrija Krstic

This article will guide you through the process of developing an excellent initial prompt and then dissecting it for all of the component parts that make it so great.
Learn more about best practices for prompting the builder in the article linked here.

Important considerations

  • Be clear about your site structure before starting the build. Have a defined vision of what you want to create, including the key components, number of pages, layout style, and the full checkout flow. Knowing this upfront helps ensure consistency and efficiency throughout the project.
  • Start with smaller, focused prompts instead of asking for a full website in one step. Large one-shot builds often produce incomplete or inconsistent results. If the homepage is simple, you can prompt for it as a whole, but it is usually best to begin with a single section such as the hero area and build from there.
  • When words are not enough to explain what you need, use screenshots for visual guidance. Upload an image that represents the layout or look you are aiming for so the builder can use it as inspiration.
Consider using a more advanced AI model when analyzing images or working on complex page structures. Learn more about model options and their use cases in the related article here.

Example prompts

Let's give a couple of examples on how the first prompt should look like based on the different use cases.

Creating a landing page similar to FabFitFun.

Create a high-converting landing page modeled on FabFitFun’s “Get the Box” page. The design should feel modern, premium, and lifestyle-oriented, with a soft and feminine visual language. Use a clean white background (#FFFFFF) with light beige (#F8F6F4) section dividers and muted gold (#B89B83) accents for icons and CTAs. Apply thin light gray borders (#E6E6E6) to cards and content blocks. Buttons use rounded corners (8px radius), soft shadows, and hover state in #B89B83 with white text. Layout should follow a centered 12-column grid with generous spacing (80–100px) between sections.

At the top, include a full-width hero section with a bright lifestyle image background and overlay text: “Discover Your New Favorite Things” followed by a short subtext “Curated seasonal boxes filled with beauty, wellness, and home essentials delivered to your door.” Place a bold CTA button “Get Started” linking to plan selection.

Below the hero, create a “How It Works” section with three evenly spaced steps in a horizontal row, each using an icon, short headline, and description. Example: “1. Personalize your box – Choose products that match your style,” “2. Enjoy flexibility – Swap, skip, or update anytime,” “3. Save more – Get premium brands for less.” Use soft card borders and equal spacing.

Next, add a “What’s Inside” showcase with a clean 3-column grid of lifestyle product categories (Beauty, Home, Wellness, Fashion). Each card includes an image, short name, and small descriptive text. Keep visuals bright, airy, and evenly framed.

Follow this with a testimonial and trust section in beige background (#F8F6F4). Headline: “Trusted by Over a Million Members.” Underneath, list three horizontally aligned benefit icons with short blurbs such as “Save up to 70% off retail,” “Exclusive member sales,” and “Customize every box.”

Then add a “This Season’s Box” preview showing 6–8 product images in two rows of 3–4 columns. Each card should include product photo, short title, and price or label like “Member Favorite.” Add a “Get the Box” CTA below the grid.

After that, add a “Why Members Love Us” section with 2–3 horizontal feature blocks alternating text and imagery, describing benefits like quality, variety, and convenience. Maintain symmetry and consistent padding.

Next, build a “Choose Your Plan” pricing section. Use two columns side by side showing “Seasonal Plan” and “Annual Plan.” Each card includes price, short description, key perks, and a large CTA button “Start Membership.” Use light border, rounded corners, and hover effect.

Finish with a clean footer featuring quick links, newsletter signup field, and small brand logo in muted gray.

Ensure mobile responsiveness: all multi-column layouts collapse to single column, images scale fluidly, and CTAs remain centered and tappable. Optimize for SEO with proper heading structure (H1 hero, H2 sections), descriptive alt text, and meta description focus on “subscription box,” “seasonal products,” and “membership.” Maintain consistent padding, visual hierarchy, and soft color palette throughout.

Output of the prompt above can be seen here. AI model used is Expert, raw credit cost was $4.

Creating a hero section inspired by Loot Crate

Prompt example:

Recreate a hero section inspired by the attached example. Use a full-width layout with a dark navigation bar at the top containing the logo on the left, a “Subscriptions” dropdown, and “How It Works,” “Support,” and “Join | Log In” links on the right. Below the header, include a large hero banner with a split composition. The left side should have bold uppercase headline text “WANDS AT THE READY” and a subheadline “Join the Wizarding World” with an orange CTA button labeled “Get Wizarding World.” Use black text (#000000) for headings and orange (#FF4E00) for the button, with white text inside the button.

The right side of the hero banner should display themed product images (for example, scarf, pin, notebook, and bag) arranged with slight overlap and subtle shadowing. Use a faint patterned background texture resembling aged parchment or newspaper print to add depth without distracting from the main visuals. Maintain wide margins and centered alignment for balance. The section should be responsive with the text stacking above the imagery on mobile. Use clean typography with strong weight for headings (e.g., Poppins 800) and medium weight for subtext.

Image added to the prompt:

Builder output:

Above prompt took $1.2 of credit. Used model was Advanced.
If you're replicating the layout that already exists, it is advised to share screenshots of the sections you're looking to replicate and prompt the builder to stick with the layout which was shared as inspiration. Advanced AI model works best for these types of prompts.

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free