SuperDesign.Dev

@alexabelonix Thanks! More design patterns like this every day - follow along 🙌

@SuperDesignDev very well done.

5 signs your app's mobile tab bar was built by AI. Default LLM: mismatched icons, no active state, everything the same gray. Users can't tell where they are in your app. Here's the prompt that gives your tab bar a real navigation system: superdesign.dev/?utm_source=tw…

Sign 5: No celebration moment. User completes setup and lands on... a normal dashboard. No acknowledgement. Tell AI: - Add a 2-second success animation when onboarding completes - "You're all set!" headline with confetti or a checkmark animation - Immediately show the first meaningful action - don't make them hunt First impressions compound. Make yours count. Follow @SuperDesignDev for one design pattern per day.

Sign 4: Same onboarding for everyone. AI builds one flow. A solo developer and a 50-person team see identical screens. Tell AI: - Ask ONE qualifying question on step 1: "What describes you best? Solo builder / Small team / Agency" - Route to different step 2 based on answer - Personalize the empty state CTA text to match their answer

5 signs your app's onboarding was built by AI. Default LLM: dump the user straight into a blank dashboard. No guidance. No first action. They stare at empty space and leave. Here's the prompt that turns first-run into a moment users remember: superdesign.dev/?utm_source=tw…

Sign 5: No safe area padding. On iPhone, the home indicator sits right on top of your tabs. Looks broken on every device with a notch. Tell AI: - Always add padding-bottom: env(safe-area-inset-bottom) - Tab bar total height = 49px + safe-area-inset-bottom - Test on iPhone 14 dimensions minimum: 393x852px - On Android: account for gesture navigation bar (32px) Follow @SuperDesignDev for daily design prompts. superdesign.dev/?utm_source=tw…

Sign 4: No visual separation from content. Tab bar floats over content with no border. Users scroll and suddenly can't tell where the tab bar ends and the page begins. Tell AI: - 1px top border: #E5E7EB (light mode), #374151 (dark mode) - Tab bar background: white (light) / #111827 (dark) - Blur backdrop filter if content scrolls under it: backdrop-filter: blur(12px), background at 90% opacity - Height: 49px minimum + OS safe area inset at bottom

@elijahsystems @1649511182384914433 CMS design is a great one - rich text editor toolbar, article card layouts, publish/draft states, media upload empty state. Adding it to the queue 👍

@SuperDesignDev Hey It would be great to have one around the CMS (Content Management System) section for a blog with a user-friendly interface to create, edit, and publish articles ;)

Your settings page screams AI-generated. Default LLM: one long scrolling list of inputs, delete button same size as save button, no visual grouping. Here's the exact prompt for settings screens that feel like a real product:

Sign 5: Status colors with no system. 4 different greens. "Success" is sometimes teal, sometimes lime, sometimes emerald. Tell AI: - 4 semantic status colors only: success (green), warning (amber), error (red), info (blue) - Each gets 3 values: background (10% opacity), border (40% opacity), text (full, passes contrast on white AND on its own background) - Use the same 4 everywhere: badges, toasts, alerts, form validation Follow @SuperDesignDev for daily design prompts. superdesign.dev/?utm_source=tw…

Sign 4: No color for interactive states. AI gives you one color per element. No hover. No focus ring. No pressed state. No disabled. Tell AI: - For every interactive element: default, hover (+10% lightness), active (-10%), focus (3px ring, --color-primary at 50% opacity), disabled (--color-primary at 30% opacity + not-allowed cursor) - Focus ring is not optional - it's the only indicator for keyboard users

5 signs your app's color system was built by AI. Default LLM: hardcoded hex values everywhere. Dark mode toggle that just changes background to #111827. Primary blue used for buttons, links, AND info badges. Here's the prompt that gives your app a real color system: superdesign.dev/?utm_source=tw…

Sign 5: No social proof on the new-user empty state. First time a user lands here, they see nothing. No indication anyone else uses this. Feels abandoned. Tell AI: - New user empty state: add 1 line of social proof. "Joined by 10,000+ builders" - Or show example content: grayed-out preview card showing what a filled state looks like - This alone reduces new-user bounce on first-session empty screens Follow @SuperDesignDev for daily design prompts. superdesign.dev/?utm_source=tw…

Sign 4: Same empty state everywhere. New user onboarding empty state = same as "no search results" empty state. They need completely different messages. Tell AI: - New user (zero data): motivational + CTA. "You're all set - create your first X" - No search results: clarify + reset. "No results for '[query]'" + Clear Search button - Error-caused empty: inform + retry. "Couldn't load your X" + Try Again button - Filtered to zero: show filter state + Remove Filters link

5 signs your app's empty states were built by AI. Default LLM: a blank white box. "No items found." Nothing else. Users stare at it and don't know what to do next. They leave. Here's the prompt that turns empty screens into conversion moments: superdesign.dev/?utm_source=tw…