Guide to Prompting

When building landing pages or eCommerce storefronts with Frontend, the way you phrase your prompts can significantly impact the quality of results. This guide will help you create effective prompts that lead to better outcomes.

Best Practices for Prompting

Keep Prompts Small and Concise

For the best results, focus on small, specific tasks rather than large, ambiguous ones. Breaking down your project into manageable sections allows the AI to better understand your needs and deliver more accurate results.

Effective approach: Build your site section by section, focusing on one component at a time.

Be Specific and Clear

Clearly define what you want to achieve. Include specific details about functionality, design elements, or data you want to use.

Avoid Ambiguity

Ambiguous prompts can lead to unexpected results. Be precise about what you want to accomplish and provide context when necessary.

Examples of Effective Prompts

Here are some examples of well-structured prompts that will yield better results:

Adding Components

✅ “Add a product carousel on the homepage for the Hydrogen collection”
✅ “Create a newsletter signup form in the footer with name and email fields”
✅ “Add a sticky navigation bar with logo, search, and cart icons”

Page Structure

✅ “Create a product detail page with image gallery, description, and add-to-cart button”
✅ “Design a two-column layout for the blog page with featured posts on the right”
✅ “Add a hero section with a background image and overlay text”

Functionality

✅ “Implement a filter sidebar for the collection page with color, size, and price filters”
✅ “Add a quick view modal when users hover over products in the collection grid”
✅ “Create a multi-step checkout process with shipping and payment pages”

Examples of Ineffective Prompts

These prompts are too vague, complex, or broad and should be avoided:

❌ “Make a beautiful eCommerce website”
❌ “Create a complete checkout flow with customer accounts, shipping calculations, and payment processing”
❌ “Design a modern-looking site that will appeal to my target audience”

Iterative Approach

Remember that building with AI is an iterative process. Start with the basic structure, then refine and add details:

1. Begin with the core page structure
2. Add main sections and components
3. Refine with specific design elements
4. Add functionality and interactions
5. Fine-tune details and polish

By following these prompting guidelines, you’ll achieve better results and a more efficient workflow when building with Frontend.