How to Build Your Frontend

Start with a prompt

Your first prompt should explain in a clear, structured way, what users can see and what happens when they click different buttons. Always start with the index page and go from there. For example:

We’re going to build an app that ___________.

On the homepage (/), there should be ___________.

Create a page called (Page Name) that displays ___________.

Create a page called (Page name) that displays ___________.

Add links to the __ and __ pages from the home page.

Create only the frontend - we’ll add the backend later.

Thereafter, each prompt you give can expand - adding new pages, components and functionalities.

Add your branding

Once you have an initial preview, you can prompt the Agent to update it to visually match your branding. We recommend using exact colour codes and font names, but if you don’t have a brand identity yet, you can leave it to the agent.

Here’s an example of a prompt:

That’s great!
Now let’s update the design to match my brand design.
Please use the following colour codes: #000000 #ffffff #ff5733 #ffc733 #3349ff.
Please use the font Poppins for Headers and Montserrat for body text.

Add images

Currently, the easiest way to add images to your app built in Fine is to upload them to your GitHub repository and tag them in using @.

Finish your first conversation and click Export to save your code to GitHub
Upload your files to the GitHub repository in the folder /public/images
Go back to Fine and start a new conversation, selecting the Project from the dropdown menu.
Ask Fine to add the image in the relevant place, tagging the filename in GitHub using @

You can also copy and paste a public URL into Fine for the Agent to use as an image source (e.g. a public sharing link to your Google Drive or a link to a well-known image on the internet with the appropriate license) but be aware that if the URL changes, the image will disappear from your website.

Use small components

For easy management of your code, best AI success and fast loading speeds, we recommend using small components.

What this means is rather than all the code for a page appearing in one file, it’s broken into lots of relevant components, which are stored in one file. The page then imports and customizes the relevant component.

For example, instead of coding the navigation and footer into each page, you’ll have a component “navigation” and a component “footer”. When you want to add them to a page, you’ll import them and customize them.

Fine does this for you by default - but it can help to be clear in your prompts by referring to the creation and use of specific components. For example:

In the footer component, add a link to the privacy policy.
Create a new “staff-dashboard” component, which displays a table of active jobs, their status and their assigned staff. Then, add the staff-dashboard component to the /manage-jobs page.
Create a new “testimonial-card” component, which is a card showing a name, company name, job title, logo and quote. Then add three testimonial cards to the home page before the footer.

Using small, repeated components helps create clean, consistent UIs and ensures changes are updated across the board.