Best of UI Design — April 2026

  1. 1
    Article
    Avatar of piirjq3y7ofa7m8zrpdg8Anubhav Bhatt·2w

    DESIGN.md - UI design systems format shared with AI

    Google's Stitch has introduced DESIGN.md, an open-source file format designed to standardize how UI design systems are shared with AI tools. It combines machine-readable design tokens (colors, typography, spacing) with human-readable context explaining design intent, enabling AI to generate consistent, brand-aligned interfaces without repeated manual explanation. The format includes validation tools like accessibility checks and integrates with workflows such as Tailwind and CI pipelines, aiming to become a universal design contract that reduces friction and improves designer-developer collaboration.

  2. 2
    Article
    Avatar of bradfrostBrad Frost·3w

    Mouth Coding

    Brad Frost introduces 'mouth coding' — a practice of verbally collaborating with an LLM in real time to build websites during live conversations. Using a real-world example of redesigning a small counseling practice's website with his wife, he outlines the key ingredients: live conversation, speech-to-text transcription, solid UI infrastructure, live preview, additional context, and human judgment. He argues this approach democratizes web creation, enables genuine cross-disciplinary collaboration, and is especially valuable for nonprofits and small organizations that lack dedicated web staff. The core thesis is that AI should facilitate human creativity rather than replace it, and mouth coding represents the most participatory, inclusive design process he's experienced in years.

  3. 3
    Article
    Avatar of fireup-proFireUp·2w

    and it might replace the way we share UI Design forever : fireup.pro

    Google has unveiled Stitch, an experimental AI design tool from Google Labs that generates UI layouts and frontend code from text descriptions. The more significant announcement is DESIGN.md, a machine-readable design specification format that replaces static files like Figma exports or PDFs. DESIGN.md enables AI tools to generate consistent UI from shared rules, allows developers to integrate design intent directly into code pipelines, and makes design version-controllable like software. The format represents a shift from 'design as a file' to 'design as a system-readable spec', potentially transforming how design and development teams collaborate.

  4. 4
    Article
    Avatar of thoughbotthoughbot·4w

    The age of snarky UI

    A critique of condescending and snarky UI copy patterns found in modern apps and devices. Using a Hyundai IONIQ dashboard notification as a starting point, the author examines how vague or guilt-tripping language in interfaces — from confirmshaming to passive-aggressive streak reminders to hollow fitness encouragement — undermines clarity and frustrates users. The core argument is that humor or humanized tone should never come at the expense of clear, direct communication.

  5. 5
    Video
    Avatar of wdsWeb Dev Simplified·4w

    Can I Build This UI In 10 Minutes

    A developer attempts to recreate a UI design using only CSS in 10 minutes as part of a timed challenge on CSSBattle-style platform. The walkthrough covers planning the layout using flexbox, applying CSS variables for colors, styling score rows with dotted borders, and fine-tuning typography and spacing. After achieving a 73% match manually, the author tests the same challenge with AI, which scores only 61% and produces quirky artifacts like unnecessary linear gradients, hardcoded pixel values, and ignored CSS variable instructions — concluding that AI is a useful starting point but not a reliable replacement for hands-on CSS skills.

  6. 6
    Article
    Avatar of lobstersLobsters·5w

    devins.page/dev.css

    dev.css is a tiny (~5.5kb minified) classless CSS framework inspired by new.css that makes plain HTML files look modern and responsive without any class names. It supports semantic HTML elements including header, main, aside (sidebar), and footer. The framework offers optional addons (sticky header, one-line header, scroll-to-top button, responsive sidebar) and themes including Catppuccin and terminal styles. It can be installed via CDN link or npm package and is best suited for simple blogs, personal sites, link pages, or HTML prototyping.

  7. 7
    Article
    Avatar of collectionsCollections·3w

    DESIGN.md: an open standard for describing design systems to AI agents

    Google's Stitch team has open-sourced DESIGN.md, a file format specification that enables AI agents to read and act on design systems. The format pairs structured design tokens (hex codes, font sizes) with human-readable rationale explaining the reasoning behind design decisions. The GitHub-published spec includes a token section, a work-in-progress components section for role-based references, and a CLI tool that validates files against the spec with WCAG contrast ratio checks. The goal is to provide a shared foundation so AI agents and tools can consistently generate and consume design systems without each platform inventing its own approach.

  8. 8
    Video
    Avatar of juxtopposedJuxtopposed·5w

    I Redesigned the ENTIRE Apple Music UI

    A comprehensive UI/UX redesign critique of Apple Music covering its core inconsistencies and proposed fixes. Key issues addressed include the confusing dual-universe library vs. Apple Music separation, inconsistent and poorly ordered context menus, broken search UX on mobile, cluttered album and artist pages, poor playlist sorting, a dysfunctional radio/podcast section, and an overcrowded now-playing screen. The redesign proposes unified terminology (save vs. add), consistent icon usage, better search organization, collapsible sidebars on desktop, a dedicated song info page with clickable credits, and a personalized home and discovery experience.

  9. 9
    Video
    Avatar of primeagenThePrimeTime·5w

    Too dangerous to release?!

    Anthropic has released Claude Mythos Preview, a new AI model that won't be made publicly available due to its advanced security research capabilities. The model scored 77.8% on SWE-bench compared to Opus 4's 53.4%, and demonstrated the ability to autonomously find and exploit zero-day vulnerabilities across major operating systems and browsers, including a 27-year-old OpenBSD bug and a 16-year-old FFmpeg vulnerability. Anthropic plans to release safeguards with an upcoming Claude Opus model instead. The video takes a skeptical, humorous tone toward Anthropic's fear-based messaging around AI safety, drawing parallels to similar 'too dangerous to release' narratives around GPT-2, while also reflecting on how AI is gradually making traditional developer skills less essential.

  10. 10
    Video
    Avatar of kevinpowellKevin Powell·3w

    No more magic numbers for your breakpoints

    Using CSS container queries with the `ch` unit instead of arbitrary pixel or rem values creates content-aware breakpoints. When a three-column layout is set to break at 90ch, each column is roughly 30 characters wide — aligning with minimum readable line-length guidelines. Unlike media queries, container queries respect the element's own font size, so breakpoints adapt automatically when the base font size changes. This approach replaces magic numbers with meaningful, content-first breakpoints.

  11. 11
    Article
    Avatar of uxplanetUX Planet·4w

    The Future of UI Design is Agentic Design

    Anima Agent is a Figma plugin that uses AI (defaulting to Claude Sonnet) to generate UI designs from text prompts. Three practical scenarios are covered: creating a new mobile app design from scratch, generating variants of an existing design, and building screens using components from an existing design system. The tool produces auto-layout-ready Figma frames quickly, though outputs may have visual defects requiring manual cleanup, and components generated from a design system are detached rather than true Figma component instances.

  12. 12
    Video
    Avatar of juxtopposedJuxtopposed·2w

    I Let My Subscribers Pick My Design App

    A hands-on comparison of 18+ design and prototyping tools tested by recreating the same UI button in each. Tools reviewed include Figma alternatives (Penput, Lunacy, Affinity), motion/animation tools (Rive, Cavalry, Friction), creative tools (Blender, Unicorn Studio), pixel art editors (Aseprite, Pixie Editor), vector editors (Inkscape, Graphite), and unconventional picks (Godot, PowerPoint, MS Paint). Each tool is evaluated on intuitiveness, design capabilities, prototyping/animation features, and overall usability. Key takeaways: Cavalry is a strong After Effects replacement, Blender is underrated for UI, Pixie Editor impressed for pixel art, and Inkscape remains the top Linux design tool.

  13. 13
    Video
    Avatar of primeagenThePrimeTime·4w

    Trash Made a Black Mirror App | The Standup

    A developer called Trash Dev showcases 'Got Receipts,' a vibe-coded iPhone app he built to photo-document and timestamp household grievances (like food left in the sink) as evidence in spousal arguments. The app features categorized photo/video logs per person, a feed, streaks, stats, and a freemium model ($2.99/month or $20/year for tracking more than 3 people). Built entirely with AI assistance without any prior Swift experience, the app is live on the App Store. The episode devolves into comedic feature brainstorming including divorce attorney ad integrations, UNO-reverse receipt cancellation mechanics, and an 'expose' hype video feature. The hosts draw parallels to the Black Mirror episode 'The Entire History of You.'

  14. 14
    Video
    Avatar of kevinpowellKevin Powell·6w

    3 modern CSS properties to add to your reset

    Three modern CSS properties worth adding to your reset stylesheet: `min-block-size: 100svh` to keep footers at the bottom on short pages (preferring SVH over DVH to avoid mobile repaint glitches), `scrollbar-gutter: stable` on the HTML element to prevent layout shift when navigating between pages with and without scrollbars, and `interpolate-size: allow-keywords` to enable smooth CSS transitions to intrinsic sizes like `auto`, `fit-content`, `min-content`, and `max-content`. The post also touches on pairing `interpolate-size` with `prefers-reduced-motion` for accessibility-conscious animation control.

  15. 15
    Article
    Avatar of stuffandnonsenseBlogging and all that Malarkey·3w

    How I designed an information-rich website for The Shared Homeland Paradigm

    Andy Clarke shares his design process for building an information-rich website for The Shared Homeland Paradigm, a political research project on Palestine-Israel. He walks through his typography selection process (settling on Bankside Sans by Dalton Maag), graphic concept development including topographical maps, a carefully considered color palette that avoids politically charged flag colors, and the use of Eleventy as the CMS. The post emphasizes story-led web design where layout, type, and graphics work together to communicate complex ideas.

  16. 16
    Article
    Avatar of nxNx·3w

    Sharing Tailwind CSS Styles Across Apps in a Monorepo

    Tailwind v4's CSS-first configuration with @theme makes it straightforward to share design tokens across multiple apps in a monorepo. By placing a globals.css file with @theme directives in a dedicated shared package and referencing it via pnpm/npm workspaces, all apps can import the same colors, typography, and spacing tokens. Each consuming app just needs the @tailwindcss/vite plugin and a CSS entry point that imports both Tailwind and the shared package. For automating @source directives so Tailwind scans the right files across the dependency graph, the @juristr/nx-tailwind-sync Nx sync generator handles this automatically. A full working GitHub example is provided.

See all UI Design archives