🤹Prompting App UI

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

Prompting UI efficiently

The most effecitve way to build the UI 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 navbar 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

Result by starting a page with Example Prompt 1

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

Result by starting a page with Example Prompt 2

Try uploading your figma / tldraw sketches✨

Changing Font Style

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