{"id":"2023086925817729306","url":"https://x.com/Av1dlive/status/2023086925817729306","text":"","author":{"name":"Avid","username":"Av1dlive","avatarUrl":"https://pbs.twimg.com/profile_images/2010392290590912512/x7vtAe5W_200x200.jpg"},"createdAt":"Sun Feb 15 17:28:04 +0000 2026","engagement":{"replies":46,"retweets":137,"likes":1552,"views":492142},"article":{"title":"How to Design Using AI in 2026","previewText":"Designing was hard. The era of vibe-coding, made the ability to build good designs super easy.\nWhat was hard always was  \n\nTASTE.\n\nI built 5+ projects using AI before I figured this out.\n\nThe answer","coverImageUrl":"https://pbs.twimg.com/media/HBOQRMjakAANRUt.jpg","content":"Designing was hard. The era of vibe-coding, made the ability to build good designs super easy.\n\nWhat was hard always was  \n\nTASTE.\n\nI built 5+ projects using AI before I figured this out.\n\nThe answer never lied in better prompts.\n\nIt was that AI amplified the one skill which I ignored: developing taste.\n\nHere's the workflow that clicked for me:\n\n## Execution Is Easy, Judgment Is Everything\n\nYou can ask Claude to \"design a dashboard\" and get something that works. \n\nBut does it look good? Does it even feel right?\n\nAI excels at patterns it's seen. Your job is knowing which patterns are worth copying.\n\nThe designers who I see excelling in 2026 aren't the ones with the longest prompts or the newest tools.\n\nThey are more often the ones who've trained their eye by \n\n- studying hundreds of interfaces, \n\n- deconstructing what works\n\n- feeding that judgment back into their AI workflow.\n\nThink about it: when you see a beautifully spaced landing page or a perfectly balanced color palette.\n\nYou're not impressed by the technical execution. \n\nYou're impressed by the taste behind it.\n\nAI can execute anything. You just need to know what's worth executing.\n\n## Build Taste → Generate → Iterate\n\nHere's the exact process I use now, broken into 5 steps that actually work together:\n\n1. Build Taste Through Visual References\n\nMoodboarding is peak 2010s, but it works perfectly for vibe design in 2026.\n\nBefore I touch any AI tool, I spend 20-30 minutes gathering screenshots of interfaces which are not just \"pretty\" designs  rather interfaces that solve the same problem I'm working on.\n\nWhere to look:\n\n- Awwwards for cutting-edge web design\n\n- Pinterest AI search (upload a screenshot, find similar designs)\n\n- Dribbble for UI patterns\n\nPro tip: Don't just save random pretty images. Ask yourself: \"What specifically works here?\" Is it the hierarchy? The spacing? The color restraint? Try naming it as  this builds your design vocabulary.\n\n2.    Video → Code: The Kimi K2.5 Shortcut\n\nYou can literally record a video of any website you like and have AI recreate the code.\n\nHere is the prompt i use to Reverse engineer screen recordings to landing pages:\n\n![Prompt I use ](https://pbs.twimg.com/media/HBNNDiPaUAANpQ4.jpg)\n\nKey points:\n\n- Captures 80% of the aesthetic immediately\n\n- Parses structure, components, and transitions frame-by-frame\n\n3. Learn the Language of Design\n\nI struggled to make sense of anything till I understood the exact terms \n\nYou can't prompt what you can't name\n\nBefore generating anything, learn these terms so you can give AI precise instructions\n\ninstead of garbage requests like \"make this prettier fam\" or the best one \"please\".\n\na) Typography basics:\n\n- Hierarchy (H1→H6→body→captions)\n\n- Kerning (space between two letters)\n\n- Leading (vertical line spacing)\n\n- Weight (thin/regular/bold/black)\n\nb) Layout fundamentals:\n\n- White space (breathing room around elements)\n\n- Proximity (grouping related items)\n\n- Contrast ratio (4.5:1 minimum for accessibility)\n\nc) Color system:\n\n- Primary (brand colors, max 2)\n\n- Accent (CTAs and highlights)\n\n- Semantic (error red, success green, warning yellow)\n\n- Neutral (text grays)\n\nHere is why this matters: When you say \"reduce the leading on H2s to 1.4\" AI executes perfectly.\n\nThe difference is precision. AI doesn't guess what \"better\" means. \n\nBut it knows exactly what \"increase white space between sections from 32px to 48px\" means.\n\n4. Meta-Prompts + Skills: Build Once, Use Forever\n\nMeta-prompts create range. \n\nSkills lock in quality. \n\nI prefer to use both.\n\n- Phase 1 : Meta - Prompt \n\nUse AI to write prompts to feed to AI \n\n![Optimised Version of the Reddit Prompt](https://pbs.twimg.com/media/HBNoImGaEAAPWHC.jpg)\n\nI would suggest to take a look at the original prompt posted on Reddit by user [JCodesMore](https://www.reddit.com/user/JCodesMore/) on r/PromptEngineering\n\nThis would help to optimise the prompt for your use case \n\nThen paste the style brief into Minimax-2.5 ( my current favourite model for front-end design). This is subjective for everyone :)\n\nOutcome: you can produce dozens of distinct “vibe specs” quickly. \n\nVolume builds taste.\n\n- Phase 2- Skills.md\n\nThis is my new favourite to have all the required best practices and design philosophies at my disposal\n\nWhat “skills” are: reusable, task-scoped rule packs (constraints + checks + workflows) that agents apply whenever the task matches\n\n## My Current 3 favourite skills \n\n1) UI Skills  (made by @Ibelick )\n\nA library of reusable “fix packs” for agent-built UI: accessibility, motion performance, metadata hygiene, etc.\n\nRole: prevent common mistakes by default.\n\n2) UI/UX Pro Max - Design Intelligence\n\nA searchable design playbook for web + mobile. \n\nYou can literally pick up a stack and get recommendations for it \n\n![](https://pbs.twimg.com/media/HBNrecyaQAEK_5a.png)\n\nInstall it using \n\n![](https://pbs.twimg.com/media/HBNrvSZakAAjIbJ.jpg)\n\n3) RAMS : final QA with line-level fixes\n\nAutomated review that flags UI issues and returns concrete fixes (often with line numbers).\n\nRole: last-mile polish before you ship.\n\n## Workflow  I follow\n\n1. Meta-prompt → vibe spec (style intent, hierarchy, interaction feel)\n\n1. Generate code (Minimax-2.5)\n\n1. Apply skills (baseline constraints: UI + motion + metadata)\n\n1. Run UI/UX Pro max review (standardize production UI patterns)\n\n1. Final polish with RAMS (fix flagged issues, ship)\n\nWhy this compounds: once your constraints live as skills, every future UI inherits them by default which mean less rework, fewer regressions and  more consistent taste.\n\n## 5. The Zoom-In Method: 50% → 99% → 100%\n\nThis is the framework that changed everything for me. Stop expecting AI to nail it in one shot.\n\n1. First pass (50%): Full context dump\n\nGive AI everything you know about the project:\n\n- Goal and core features\n\n- Target audience and vibe\n\n- Color palette (specific hex codes)\n\n- Every page and component needed\n\n- Reference code from designs you like\n\n![Here is the Framework for the prompt I use](https://pbs.twimg.com/media/HBNuVanbYAAcBkO.jpg)\n\n2. Second pass:  Self-Review (99%)\n\nUse this prompt for the  AI to self-reflect\n\n![Self reflection Prompt](https://pbs.twimg.com/media/HBNus_CbAAA0UJC.jpg)\n\nAI catches 70% of its own mistakes when you make it review its work. \n\nFont sizes, padding inconsistencies, hierarchy issues ; it fixes them without you pointing them out. \n\nRepeat this for each page. \n\nYou're now at 99%.\n\n3. Micro pass (100%): Pixel-perfect polish\n\nThis is the final nail in the coffin. \n\n![Final Polish](https://pbs.twimg.com/media/HBNw1RWbEAAvucf.jpg)\n\nBeing specific = better results. Screenshots help even more.\n\n## The Philosophy: AI as Your Junior Designer\n\nIn this workflow, you stop treating AI like a \"black box\" and start treating it like a junior designer. \n\nProfessional design is a progression from low-fidelity wireframes to high-fidelity mockups, ending with polished micro-interactions.\n\nThe Zoom-In Method allows you to guide the tool through this proven process. \n\n- Old Way: 6–8 hours of manual labor and \"fighting\" the software.\n\n- New Way: 1–2 hours of strategic guidance and systematic refinement.\n\n## The New Design Moat\n\nYour taste and process are your true competitive advantages.\n\n- Precision: Trade \"make it look good\" for professional terminology.\n\n- Curation: Use real-world references to kill generic outputs.\n\n- Efficiency: Let the Zoom-In Method handle the technical heavy lifting while you focus on cohesion and empathy.\n\n> The Bottom Line: You are no longer the bottleneck of your own creativity.\n\nStop overthinking and start shipping.\n\nBefore you generate anything, learn these terms. This is the difference between getting exactly what you want and getting random garbage.\n\nTypography basics:\n\n- Hierarchy (H1→H6→body→captions)\n\n- Kerning (space between two letters)\n\n- Leading (vertical line spacing)\n\n- Weight (thin/regular/bold/black)\n\nLayout fundamentals:\n\n- White space (breathing room around elements)\n\n- Proximity (grouping related items)\n\n- Contrast ratio (4.5:1 minimum for accessibility)\n\nColor system:\n\n- Primary (brand colors, max 2)\n\n- Accent (CTAs and highlights)\n\n- Semantic (error red, success green, warning yellow)\n\n- Neutral (text grays)"},"adhxContext":{"savedByCount":1,"publicTags":[],"previewUrl":"https://adhx.com/Av1dlive/status/2023086925817729306"}}