🤹Prompting app UI & design

Prompt your UI or upload your Figma/tldraw sketches , Databutton ensures to write React code based on your inputs!

Prompting UI efficiently

The most effective way to build the user interface you want (if you know what you want) is to give a pretty precise ask.

Example prompt 1

I want this page to have: 1. An ruby colored navigation bar card on top saying "ChatYourPdf" 2. A light grey white background gradient 3. A white card on the left for preview of PDFs that says "Add PDF" in the middle, and that pops-up a popup on click 4. A card with a full chat on the right with a messages box, a place to enter messages, and a submit button. 5. I want all buttons to be black with white text and square corners 6. Make sure that the PDF preview card is identical in size to the chat card

Example Prompt 2

I want to build an SEO helper app. It should have 1. a big black navigation bar saying "SEO Wizard", 2. a white input card with shadow in the middle where users enters a url with "https://www.databutton.com" as placeholder. Ensure that the card is not small and says "Enter your url" 3. A big "Suggest posts" button in solid black with white text as part of the input card

Try uploading your Figma / tldraw sketches✨

Level up your app's design

You can make your app's design much more unique and aesthetically pleasing with a single prompt

Example prompt:

I want you to do a design critique of #Home, come with suggestions for how we can radically change the design for the better, make it unique, and really stand out, and then implement those suggestions. Write all suggestions out loud so that I can approve before continuing.

Changing Font Style

Grab your favourite Fonts from Google Fonts and ask the Agent to change it. It works seamlessly.

1. Click "Get font"

2. Copy Embed code

3. Use this prompt:

can we use this font? [+ embed code below]

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">