The structure of prompts like this can be divided into 5 steps 👇
1) High-Level Description
Describe what you are building:
For example:
“Design a high-end, mobile-first crypto wallet.”
2) Look and Feel (Buzzwords)
Describe how the app should feel using buzzwords:
For example:
“The app should feel like it was crafted by world-class designers, an award-winning design: ultra-minimalist layout, luxurious aesthetic.”
3) Branding
Provide primary/secondary colors, fonts, letter spacing/line height, and mention whether the focus is on light or dark mode:
For example:
“Use refined typography (Inter or Geist). Regular font weight with -5 letter spacing. Gray (#4F5D61) as the primary color, light blue (#99B3B6) and orange (#FF6E35) as secondary colors, applied to a clean light-mode UI.”
4) UI Library
Mention the UI library or UI library style you want to use for the project (most tools can work with any library):
For example:
“Use the shadcn UI library to build all components.”
5) Page/Component Details
Describe in detail what you want to see on each page you are building:
For example:
“Collapsible navigation including the following pages (Home, Portfolio, Buy/Sell, Profile, Settings). On the Home screen, include an overview of my account health and a summary of my portfolio.”
🌈 Overall Example Prompt:
“Design a mobile-first, high-end crypto wallet.
The app should feel like it was crafted by world-class designers, an award-winning design: ultra-minimalist layout, luxurious aesthetic.
Use refined typography (Inter or Geist). Regular font weight with -5 letter spacing. Gray (#4F5D61) as the primary color, with light blue (#99B3B6) and orange (#FF6E35) as secondary colors, applied within a clean light-mode UI.
Use the shadcn UI library to build all components.
Include a collapsible navigation with pages (Home, Portfolio, Buy/Sell, Profile, Settings).
On the Home screen, display my account health analysis and a summary of my portfolio.”
© Copyright Notice
The copyright of the article belongs to the author. Please do not reprint without permission.
Related Posts
No comments yet...