SuperDesign.Dev

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

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…

@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…

@jinyibruceli @1705811898665689088 Exactly right. The constraint has to come before the generation. Most vibe coders prompt for features and wonder why the output looks generic - because they never told the AI what constraints to hold.

@SuperDesignDev the real problem is designers still reviewing ai output like it's a junior hire who needs coaching, not a pattern-matcher that needs constraints upfront. garbage in. garbage out. just faster.

Your app's spacing screams AI-generated. Default LLM: random margins everywhere. 4px here, 40px there, elements touching borders. No system, no rhythm. Here's the prompt that gives your app a consistent spacing system:

Sign 5: One error style for everything. Network failure, 404, auth expired, rate limit - AI handles all of them identically. Same red banner. Same message. Tell AI: - Network/timeout: retry-focused (Try Again + wait indicator) - 404 Not Found: redirect-focused (Go Home + search box) - Auth expired: action-focused (Log In Again button) - Rate limit: inform + wait (show cooldown timer) - Empty state != error state - style them differently Follow @SuperDesignDev for daily design prompts. superdesign.dev/?utm_source=tw…

Sign 4: No illustration or icon. Blank white or dark space with red text. Clinical. Cold. Breaks trust immediately. Tell AI: - Error icon: 48px warning triangle or broken cloud, #EF4444 - 24px margin below icon before title text - For data-loading errors: disconnected plug or empty folder illustration - For auth errors: lock icon - Match the icon to the error type - not a generic !

5 signs your app's error screens were built by AI. Default LLM: a red "Error" in the middle of the screen. "Something went wrong." One Retry button that doesn't work. Users close the tab and never come back. Here's the prompt that gives your errors real UX: superdesign.dev/?utm_source=tw…