Prompt Best Practices

A well-crafted product description can make a world of difference.

We've put in countless hours to figure this out, so here's our advice to help you get the best out of your app.

Project description prompt

1. Describe all the features of your app

❌ Tweetx is a social application where users can post tweets.

✅ Tweetx is a social application where users can:

- Post tweets
- Like tweets
- Comment on tweets
- Re-tweet a tweet
- Follow each other

2. If your app is not trivial, describe the different propreties of each object and their relations to each other

❌ Hasana is a project management app for users to create to-do list.

✅ Hasana is a project management app where users can:

- Create task (content, expectedDate, category, status, assignedUser)
- Create a workspace (name, logoPicture, description)
- Each user can have a role in a workspace: admin or editor or read-only
- Admin can invite other users to a workspace

3. List the pages you envision for your app

❌ Swimbnb is a pool-sharing marketplace.

✅ Swimbnb is pool sharing marketplace with these different pages:

- Pool listing where users can see all available pools
- Create listing for pool-owners to list their pools
- Booking confirmation for users to confirm their bookings
- My listings for pool-owners to manage all their listing
- Pool detail to access a specific pool

Page features prompt

https://app.marblism.com/

Marblism auto-generates page feature descriptions. Ensure to review and edit each feature for optimal results. Here are the best practices:

1. Describe the interactions from the user's point of view

❌ The CreateListingPage allows users to create a new pool listing

✅ As a pool owner, I want to be able to create a listing for my pool on Swimbnb.
I should be able to provide details such as the size and depth of the pool,
select available amenities, put a photo, set the price per hour,
and add any special rules.

2. If you don't talk about it, it doesn't exist

❌ The UserProfile page displays the profile of the user

✅ As a user, I want to be able to see other user's profile.
I want to see their latest tweets, their bio, the number of people they follow,
and the number of people following them.

3. List all interactions

❌ Display a gallery of available pools to rent.

✅ As a user, I want to see all available pools to rent.
I want to see the title, the size and depth of the pool, the picture of the pool,
the price per hour. W
hen I click on the pool's card I want the booking modal to opened
so I pick a date and a time to book the pool.
When I click on book in the modal, it shall redirect me to the booking confirmation page.

Improvement prompt

Once you deploy your app, you can prompt the AI to make changes on the fly to your app.

Here are the guidelines:

1. You can only make changes to the current page you are seeing.
2. To get a good outcome the secret is to be as precise as possible.
3. To change elements, you can reference the components' name from Ant Design.
4. You can't ask backend changes for now, for example 'Code an integration with Airtable' will fail.
5. For now, you can't make changes to the layout (left/top navbar) or global changes to the app.

Here are a few examples of good prompts:

✅ Make the cards bigger

✅ Align the button to the right of the main title

✅ Display the cards in a list instead of a grid

✅ When I press save, nothing happens, fix it

✅ Add a loader state when I press save