How to 10x your UI with @lovable_dev
A step by step guide below:
A step by step guide below:
𝟭/ 𝗛𝗶𝗴𝗵-𝗟𝗲𝘃𝗲𝗹 𝗗𝗲𝘀𝗰𝗿𝗶𝗽𝘁𝗶𝗼𝗻
Make your description clear, inspiring, and outcome-focused.
Example: "Design a mobile-first, task management app for remote creative teams."
Make your description clear, inspiring, and outcome-focused.
Example: "Design a mobile-first, task management app for remote creative teams."
𝟮/ 𝗟𝗼𝗼𝗸 & 𝗙𝗲𝗲𝗹
Guide the emotional tone by using expressive design language to shape the visual direction. Use simple keywords.
Example: "Make it feel like it was crafted by an award-winning designer. Ultra-modern, playful, highly usable, with smooth microinteractions and delightful UX touches that elevate the entire experience."
Guide the emotional tone by using expressive design language to shape the visual direction. Use simple keywords.
Example: "Make it feel like it was crafted by an award-winning designer. Ultra-modern, playful, highly usable, with smooth microinteractions and delightful UX touches that elevate the entire experience."
𝟯/ 𝗕𝗿𝗮𝗻𝗱 𝗚𝘂𝗶𝗱𝗲𝗹𝗶𝗻𝗲𝘀
Specify your brand DNA like colors, fonts, spacing, and light/dark mode preferences.
Example: "Use DM Sans with medium weight. Letter spacing: -2. Line height: 1.4. Primary color: Soft Purple hashtag#7A5FFF. Secondary: Teal hashtag#00D1B2 and Coral hashtag#FF6B6B. Prioritize a dark mode UI."
Specify your brand DNA like colors, fonts, spacing, and light/dark mode preferences.
Example: "Use DM Sans with medium weight. Letter spacing: -2. Line height: 1.4. Primary color: Soft Purple hashtag#7A5FFF. Secondary: Teal hashtag#00D1B2 and Coral hashtag#FF6B6B. Prioritize a dark mode UI."
𝟰/ 𝗨𝗜 𝗟𝗶𝗯𝗿𝗮𝗿𝘆 / 𝗦𝘁𝘆𝗹𝗲
Mention your preferred UI system. This helps align layout and component behavior.
Example: "Use shadcn/ui for all components, with subtle shadows, generous padding, and large rounded corners (2xl) for a polished, modern look."
Mention your preferred UI system. This helps align layout and component behavior.
Example: "Use shadcn/ui for all components, with subtle shadows, generous padding, and large rounded corners (2xl) for a polished, modern look."
𝟱/ 𝗣𝗮𝗴𝗲 & 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗗𝗲𝘁𝗮𝗶𝗹𝘀
Get specific with details that you want on each screen or interaction.
Example: "Include dashboard with drag-and-drop task boards, team member avatars with live status, and an animated timer for deep work sessions."
Get specific with details that you want on each screen or interaction.
Example: "Include dashboard with drag-and-drop task boards, team member avatars with live status, and an animated timer for deep work sessions."
𝗙𝗶𝗻𝗮𝗹 𝗥𝗲𝘀𝘂𝗹𝘁 𝗣𝗿𝗼𝗺𝗽𝘁 🔥
"Design a mobile-first, task management app for remote creative teams.
Make it feel like it was crafted by an award-winning designer . It feel ultra-modern, playful, highly usable, with smooth microinteractions and a delightful user experience.
Use DM Sans with medium weight. Letter spacing: -2. Line height: 1.4. Primary color: Soft Purple hashtag#7A5FFF. Secondary: Teal hashtag#00D1B2 and Coral hashtag#FF6B6B. Prioritize a dark mode UI.
Use shadcn/ui for all components, with subtle shadows, generous padding, and large rounded corners (2xl) for a polished, modern look.
Include dashboard with drag-and-drop task boards, team member avatars with live status, and an animated timer for deep work sessions"
"Design a mobile-first, task management app for remote creative teams.
Make it feel like it was crafted by an award-winning designer . It feel ultra-modern, playful, highly usable, with smooth microinteractions and a delightful user experience.
Use DM Sans with medium weight. Letter spacing: -2. Line height: 1.4. Primary color: Soft Purple hashtag#7A5FFF. Secondary: Teal hashtag#00D1B2 and Coral hashtag#FF6B6B. Prioritize a dark mode UI.
Use shadcn/ui for all components, with subtle shadows, generous padding, and large rounded corners (2xl) for a polished, modern look.
Include dashboard with drag-and-drop task boards, team member avatars with live status, and an animated timer for deep work sessions"
𝗣𝗿𝗼 𝗧𝗶𝗽𝘀:
--> Iterate like a designer
Treat your prompt like a sketch — refine it, adjust spacing, tweak color choices, and iterate until it clicks.
--> Think in flows, not features
Break your ideas into specific pages or flows (e.g. "Onboarding screen with progress bar" or "Dashboard with team activity").
--> Use emotional language
Words like delightful, bold, elegant, or tactile help Lovable understand the feeling you want. Not just the structure.
--> Iterate like a designer
Treat your prompt like a sketch — refine it, adjust spacing, tweak color choices, and iterate until it clicks.
--> Think in flows, not features
Break your ideas into specific pages or flows (e.g. "Onboarding screen with progress bar" or "Dashboard with team activity").
--> Use emotional language
Words like delightful, bold, elegant, or tactile help Lovable understand the feeling you want. Not just the structure.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
