X Bookmarks: Design & UI (Feb–Jun 2026)

Bookmarked design/UI tweets covering typography, color, animation, layout, design tools, and inspiration. Excludes pure CSS techniques (see X Bookmarks: CSS & Frontend Techniques) and 3D/shader content (see X Bookmarks: 3D & Shaders (Mar–May 2026)). Source: raw/x-bookmarks/bookmarks.jsonl

Deep Review 2026-07-06

Typography, UI libraries, and design-system source material

Takeaway: The new Interfaces issue routes to the typography/tooling lane: web typography is still a system problem covering typeface choice, font loading, legibility, measure, and interface fit. Keep it near Type Foundries Reference, Inter Font, and Interface Micro-Polish rather than turning it into a one-off inspiration item. Stack Sans routes to Fonts — Picks & Free as a project-specific font candidate, and Emil's UI-library list now has a focused UI Primitives Shortlist page for NumberFlow, input-otp, Liveline, Leva, cmdk, Virtuoso, dnd kit, and Sonner before custom builds. Source: X bookmark artifact audit, 2026-07-06

Motion tuning and future interface references

Takeaway: Interface Micro-Polish and X Bookmarks: CSS & Frontend Techniques now own the implementation details, while this hub preserves the design direction. Transitions Refine is interesting because the tuning surface sits directly inside Cursor/Codex/Claude Code and can suggest transition changes from the working code; animation review rows reinforce "review animations, don't guess." Paper Shaders stays a Shader Effects Libraries / X Bookmarks: 3D & Shaders (Mar–May 2026) source because the value is open shader material, not ordinary component polish. The split-layout framework, custom environment favicons, and minimal personal-site notes are broader interface references: tools should make state, context, and environment obvious without making the UI louder. Source: X bookmark artifact audit, 2026-07-06

Deep Review 2026-07-04

Personal website as playable world

Takeaway: Personal Website References now treats People Network Ledger's concept as a playable-world reference: the reviewed video shows a Mario 64-like spatial scene inside browser chrome, with a portrait-room label, coin/star-style counters, and low-poly navigation. Use it when a personal site should express taste through explorable software, not just a static portfolio layout. Source: X/@turtlesoupy and local video review, 2026-07-04

Task completion states and liquid-glass menus

Takeaway: Interface Micro-Polish now carries Chris Tate's completed-task treatment as a concrete progress-UI rule: use checkmarks plus dimming instead of strikethrough when completed rows may still need to be scanned. Liquid Glass for the Web and Liquid Glass JS now carry Jesse Vermeulen's menu video as a visual target for live glass: refractive dropdown edges, background lensing, and material continuity while menu groups change. Source: X/@ctatedev and local image review, 2026-07-04; Source: X/@jesse_vermeulen and local video review, 2026-07-04

Theme-adaptive avatar media

Takeaway: Interface Micro-Polish and Chanh Dai Components now carry Chanh Dai's theme-adaptive avatar demo as a component craft rule: media should shift contrast with the active surface when static images become too loud or too flat across light/dark mode. The reviewed contact sheet shows a centered avatar bright in light mode, dimmed/desaturated in dark mode, and restored after the theme toggle returns. Source: X/@iamncdai and local video review, 2026-07-04

Loading motion catalog

Takeaway: Frontend and Design Skills now owns the UI/UX Savior loader catalog as icon-sized motion inspiration, not as a replacement for skeletons. The reviewed video shows rows for circles, dot clusters, fade circles, balls, clocks/hourglasses, Wi-Fi bars, and common action icons; use those families when an inline loader should match the action being awaited. Source: X/@UiSavior and local video review, 2026-07-04

SaaS dashboard cheatsheet

Takeaway: Dashboard Design System now owns Tanjim's CloseCRM artifact as dashboard-layout evidence, not just a checklist quote. The reviewed image shows the six rules working together: Inter-like type, a 240px-class sidebar, 48px table scan rows, compact stat cards, top-right create action, a chart/donut split, and task/deal lists that keep operational work visible without hero-page theatrics. Source: X/@Tanjim38 and local image review, 2026-07-04

Footer design explorations

Takeaway: Brennan's footer mock and Daman's four-footer set stay hub-only as layout references, but the local image reviews give the same rule from two directions: editorial footers can carry brand weight through scenic imagery, oversized wordmarks, and sparse navigation without turning into a bottom-of-page junk drawer. Daman's set adds a softer visual grammar: illustrated landscapes, cherry blossoms, cloudscapes, thin column nav, newsletter/contact modules, and small legal links. Source: X/@Brennan_designs and local image review, 2026-07-04; Source: X/@daman76752 and local image review, 2026-07-04

Deep Review 2026-07-03

Dashboard clarity cheatsheet

Takeaway: Dashboard Design System now has artifact-level evidence for the SaaS-dashboard density rules that were previously mostly checklist-driven: 14px base text, 16px base icons, 1/1.2/1.5px strokes, regular/medium/rare semibold weights, quiet navigation, compact stat cards, and charts that leave the hierarchy to the numbers. The local image review matters because it shows the rules working together on a dark finance dashboard instead of as isolated token trivia. Source: X/@AliGrids and local image review, 2026-07-03

UI defaults and layered app backgrounds

Takeaway: UI Design Defaults (Cheatsheets) now carries @_heyrico's artifact-backed defaults: Hugeicons-style thin icon grammar, 16px-class icons, two-weight type hierarchy, and Tailwind Neutral-style restraint applied to an email-client mockup. Texture & Grain Resources now carries @yahyavision's app-background recipe as visual construction, not just a slogan: shapes, blur, texture, then product UI. These are floor-setting craft rules, not a license to make every interface look like the same neutral SaaS screenshot. Source: X/@_heyrico and local image review, 2026-07-03; Source: X/@yahyavision and local image review, 2026-07-03

Font shortlist and softer item removal

Takeaway: Two small visual artifacts now have durable homes. Fonts — Picks & Free and Type Foundries Reference keep Yahyavision's "only fonts I'll ever need" image as a type-direction moodboard, not a license checklist: the reviewed image lists Awesome Serif, Coolvetica, Instrument Serif, Helvetica Neue, DM Serif Display, Caros, Bunch, Bricolage Grotesque, DM Mono, Inter, Darker Grotesque, and Tusker Grotesk. Interface Micro-Polish gets AliGrids' item-removal comparison as a concrete exit rule: fade/blur/scale the chip content first, then collapse the wrapper so removable pills, tags, and filter rows do not jump. Source: X/@yahyavision and local image review, 2026-07-03; Source: X/@AliGrids and local video review, 2026-07-03

Numeric stability and playful controls

Takeaway: Interface Micro-Polish and Frontend and Design Skills now carry two low-level craft defaults. Soren Blank's tabular-nums artifact proves why changing numeric UI needs fixed-width numerals: the timer without tabular numbers shifts during countdown, while the tabular version keeps the text block stable. AliGrids/Yui's pagination/control demo is a motion-language reference for playful surfaces: soft segmented tabs, icon tiles, pagination dots, plus/minus steppers, list/column toggles, and follow buttons can animate state while preserving layout. Source: X/@sorenblank and local video review, 2026-07-03; Source: X/@AliGrids and local video review, 2026-07-03

Brand-kit prompting and gradient text polish

Takeaway: Two parked rows now have canonical homes instead of coverage-floor notes. Taste Skill Framework (Leonxlnx/taste-skill) gets @jamescoder12's seven-part Gemini brand-identity prompt thread as taste-brandkit checklist evidence: strategy foundation, logo concepts, color, type, visual direction, voice/messaging, and brand-bible output. Gradient Shimmer gets @mona_biasia's package as a narrow React text-effect source for active labels and live-agent affordances. The standard stays high: prompt packs and shimmer components are useful when they produce or support a system, not when they become a substitute for judgment. Source: X/@jamescoder12, 2026-03-12; Source: X/@mona_biasia, 2026-06-21

Motion references, Pica, and Emil's AI skill watch

Takeaway: Three design-source rows now have durable homes. Design Inspiration Galleries adds 60fps as the motion-detail gallery for shipped-app UI/UX animation references; the reviewed artifact shows shots, apps, ads, storyboards, category chips, and app examples like Grok, Swiggy, Apple, and Zomato. Pica Font Manager captures Josh Puckett's native/free macOS font manager, while Type Foundries Reference gets the Grilli Type signal. Animations.dev now tracks Emil Kowalski's AI/design-engineering expansion note: /emil-design-eng crossed 100K installs and animations.dev will refresh its AI section with LLM workflow notes in August. The executable route still stays in design-engineering-polish. Source: X/@Abmankendrick and 60fps review, 2026-07-03; Source: X/@joshpuckett and Pica review, 2026-07-03; Source: X/@emilkowalski, 2026-06-24

Deep Review 2026-07-02

Texture overlays, cubed terminals, and AI brand boards

Takeaway: Three more parked visual rows now have artifact-level routing. Texture & Grain Resources gets @AlbiaHossain's black-and-white overlay set: a contour-line maze and a warped stripe/halftone fabric texture for blend-mode masks. Design Effects and Motion Sources gets @invinciDesigns' p5js cubed-terminal video as red-grid computational art direction, not an OS architecture claim. Taste Skill Framework (Leonxlnx/taste-skill) gets DrapzDZN's Radiant brand board as evidence for taste-brandkit: AI brand output is worth keeping only when it includes identity system material - logo mark, spacing, typography, color, usage, and application mocks - rather than a single pretty logo. Source: local image and video artifact reviews, 2026-07-02

Slow-motion review, brand-system motion, and cinematic hero references

Takeaway: Four parked visual rows now have artifact-level review instead of coverage-floor notes. Design and Animation gets AliGrids' 0.1x animation review pattern: slow a hover or selection animation until the pointer target, moving pill, label reveal, tooltip timing, and layout continuity are visible. Public Brand Guideline References gets the Cash App brand-guideline video as a motion-bearing system reference, with floating product objects and section navigation proving that a guideline site can demonstrate behavior. Pankaj's weekly designs stay hub-only as cinematic hero-composition references: astronaut/focus, AI-chat, finance cloud/sea, and contact-lens closeup hero directions. Design Effects and Motion Sources gets Abubaker's visual exploration as pixel/dither art direction: luminous green particle ribbons, pastoral terrain, statue/temple silhouettes, and retro computer objects. The self-thread CTAs in the Pankaj and Abubaker rows are booking links, not source artifacts. Source: local video and image artifact reviews, 2026-07-02

Interface Craft launch and Collletttivo type sources

Takeaway: Two visual rows now have durable design homes. Interface Micro-Polish and Design Engineering Resources get Interface Craft's launch artifact as a broader learning surface: card transitions, color cards, mobile task-list states, active rows, scheduling/reflect/create controls, and opacity/zoom controls. Fonts — Picks & Free and Type Foundries Reference get the @toolfolio typographic-goldmine video as evidence for Collletttivo: an open-source type foundry with 16 typefaces and specimen pages that let designers audition letter spacing, line height, and size before download. Source: X/@AliGrids and local video review, 2026-07-02; Source: Interface Craft, 2026-07-02; Source: X/@toolfolio and local video review, 2026-07-02; Source: Collletttivo, 2026-07-02

Visual Unicode search

Takeaway: Charcuterie graduates from "demo attached" to a focused design-tool page. The durable idea is perceptual Unicode search: identify glyphs by what they look like, browse nearby glyph neighborhoods, and sketch shapes to find matching characters. The local launch artifact says CLIP and uses the "Charcutrie" spelling; the current site says SigLIP 2 and "Charcuterie", so the site is the implementation authority while the screenshot remains launch evidence. Source: X/@meodai, 2026-04-07; Source: Charcuterie site, 2026-07-02

Vercel Design Engineer Principles

Takeaway: Design Engineering now carries Vercel's explicit design-engineer operating contract: obsess over usefulness, own the whole experience, understand constraints, build for different contexts, and push for excellence when clarity, craft, performance, or trust is at risk. The reviewed image is not just inspirational copy; it is a checklist for agent-built UI ownership from product problem through code, words, states, accessibility, performance, feedback, and team defaults. Source: X/@JohnPhamous, 2026-06-19; Source: Vercel Design Engineer Principles, 2026-07-02

Image-first taste, launch motion, and careers interaction

Takeaway: Three visual rows now have durable design homes instead of "demo attached" notes. Taste Skill Framework (Leonxlnx/taste-skill) captures the image-first web-art-direction rule from Lex Lin's Forma artifact: generate separate horizontal references per section before coding. Design and Animation and Design Effects and Motion Sources capture Mark Vassilevskiy's launch-motion reel and the resolved Skale reference: product launch videos can be compressed interaction specs, not just promos. Design Agencies Reference captures the Locomotive careers/contact page as agency-grade recruitment interaction: muted full-bleed avatar video, cursor-triggered screen states, sound control, role pills, and open-role culture flow. Source: X/@LexnLin, 2026-05-02; Source: X/@MarkKnd, 2026-05-02; Source: Skale, checked 2026-07-02; Source: X/@Abmankendrick, 2026-06-12; Source: Locomotive Careers, checked 2026-07-02

Anime.js text reveal and Figma shader motion

Takeaway: Two visual rows now have durable implementation routes. Text Animations Collection (animate-text) and the animejs skill now treat Anime.js scrambleText() as the first-party path for terminal-style text scramble/reveal effects, with official controls for reveal direction, cursor, perturbation, easing, and timeline composition. The Figma Config shader row stays routed through Figma Motion, Shader Effects Libraries, and Design and Animation: the local video shows a generated "The Alien Metamorphosis" landing page with blue dither/shader alien motion and a dashboard section, which is evidence for prototyping shader-style surface treatments in design tooling before web implementation. Source: X/@JulianGarnier, 2026-04-29; Source: Anime.js docs, 2026-07-02; Source: X/@sunalsood, 2026-06-25

Deep Review 2026-07-01

Prompt-to-hero, video plates, and manipulable explanation

Takeaway: Three artifact-heavy design bookmarks are now routed into durable design practice. The Taskora/Nano Banana + Google Flow + Lovable row belongs to Prompt Recipes: its reusable value is a complete prompt-to-hero contract, not a standalone tool recommendation. The Veo/Flow background row extends the same page with an AI-video hero recipe: use generated video as a calm background plate, then harden poster image, mobile crop, contrast, and reduced-motion behavior. Josh Puckett's Interface Craft row belongs to Interface Micro-Polish and Design Engineering Resources: design concepts such as leading and measure should often be manipulated directly, not merely explained in prose or static screenshots. Source: X/@viktoroddy, 2026-02-02; Source: X/@viktoroddy, 2026-03-07; Source: X/@joshpuckett, 2026-06-19

Agent inboxes and B2B ad libraries

Takeaway: Two parked rows were reviewed and routed out of the design floor. AgentMail belongs primarily in agent tooling: the local card only preserves the Startup Program visual, while the durable value is two-way inbox infrastructure, API/SDK/CLI, hosted MCP, and current pricing/package snapshots. Adfolio stays a design/content reference: the live site is currently behind a Vercel Security Checkpoint, but the reviewed video preserves the actual product shape, a B2B ad library with Ads/Landing Pages/About navigation, filters for industry/platform/offer/angle, sponsor CTA, newsletter capture, and per-card landing-page/breakdown routes. Source: X/@agentmail, 2026-06-16; Source: X/@kail_designs, 2026-03-14

Dynamic trays, animation tips, and visual font search

Takeaway: Benji Taylor's X dynamic-trays row is now promoted to Dynamic Trays: advanced actions can live in nested contextual trays while the base UI stays simple. Emil Kowalski's practical skill-file tips are now attached to Animations.dev, Design and Animation, and design-engineering-polish instead of becoming a duplicate skill. Arcotype Font Browser was refreshed from the launch video and live site: the canonical domain is www.arcoty.pe, the product is currently waitlist-gated, and its durable value is visual-similarity/vibe font search rather than another static font list. StyleX and Agent GUIs were already promoted; this review rechecked source/version state and video evidence. Source: X/@benjitaylor, 2026-06-26; Source: X/@emilkowalski, 2026-03-11; Source: X/@gabbisoong, 2026-03-24

Deep Review 2026-06-30

Slot Text, Linear composer, and Copilot focus handoff

Takeaway: Three rows from the 2026-06-30 one-by-one review graduated beyond coverage-floor notes. Slot Text is now versioned at 0.3.2 and remains a microinteraction tool for tiny dynamic labels. Agent Operations Skills shows agent work inserted into an existing composer/update workflow: the agent drafts from recent activity and Slack, then the human verifies and posts. Copilot Design System adds the higher-level design-system model: presence, memory, attention, shared awareness, and Throw & Catch focus handoff across surfaces. Source: X/@DanielWhit21874, 2026-06-24; Source: npm registry packument, 2026-07-01; Source: X/@linear, 2026-06-18; Source: X/@qianjiang___, 2026-06-16

Streaming chat and scroll polish

Takeaway: The shadcn chat and scroll-fade artifacts move this from "nice component release" to a product invariant: chat UIs must preserve reader intent while streaming. Use MessageScroller/@shadcn/react for behavior such as anchoring, auto-follow, prepend preservation, and visibility, then use scroll-fade/shimmer for overflow and live-status polish. Source: X/@shadcn, 2026-06-26; Source: X/@iamncdai, 2026-06-27

Editable motion micro-assets

Takeaway: Its Hover and Super Hover both graduate from inspiration to implementation sources. Its Hover is a shadcn-installable animated icon library; Super Hover is a narrow pointer hit-testing tool for moving/scrolling hover surfaces. Use them only when motion clarifies interaction intent; otherwise default to static icons and ordinary CSS states. Source: X/@abhijitwt, 2026-06-27; Source: X/@nonzeroexitcode, 2026-06-17

Coder app discovery bundle

Takeaway: Coder Apps Bundle captures the HeyForm/Checkmate/Sevalla/DocMD/CSS toggles bookmark as a multi-tool shelf, not a single design-source proof. The video review matters: the attached media is a VARCHIVE gallery of AI-coded software/design projects, so the bookmark's design value is discovery and categorization rather than evidence that HeyForm itself has a notable interaction pattern. Source: X/@csaba_kissi, 2026-06-22; local media review, 2026-06-30]

Unicorn Studio pixel/dither recipe

Takeaway: Unicorn Studio is now a focused tool page, not a ledger-only inspiration note. Oriku's thread gives an exact no-code WebGL layer stack: boosted image/video, Blue Noise Dither, Organic Glyph Dither, Mouse Trail with Noise Displace, then God Rays. Route these effects through Design Effects and Motion Sources / Shader Effects Libraries first, and through design-engineering-polish before shipping them inside product UI. Source: X/@Oriku175, 2026-06-24; Source: Unicorn Studio, 2026-06-30

Importance-ordered intro animation

Takeaway: Emil Kowalski's Linear example is now encoded in Animations.dev and design-engineering-polish: intro animations should reveal by semantic importance, not by DOM order or vertical position. H1 first, explanatory copy second, primary product surface third, and secondary feed/changelog/controls later. The same applies to onboarding surfaces where UI controls sit above the task but are less important than the user's first mental model. Source: X/@emilkowalski, 2026-06-16

Re-sync 2026-06-29 (+new)

LLM-safe design systems

Takeaway: Polar's Orbit post and Linear's StyleX migration both reinforce AI-Native Design Patterns: agent-era design systems should make invalid design states impossible to express. Docs make behavior more likely; typed tokens, StyleX constraints, codemods, and compile-time boundaries make it enforceable. The deeper Orbit distinction is that a class/value is not a decision: background-card carries design intent, while bg-gray-100 only carries a nearby color. Source: X/@emilwidlund, 2026-06-16; Source: X/@kenneth_skovhus, 2026-06-23

Version check: @stylexjs/stylex latest is 0.19.0 on npm as of 2026-06-30. GitHub releases lag npm, so implementation should check npm/docs directly. Source: npm registry and GitHub facebook/stylex, 2026-06-30

Motion vocabulary and Lottie skills

Takeaway: Text-to-Lottie and Emil Kowalski's /animation-vocabulary skill are the same product lesson at two layers: use a code-first renderer for deterministic assets, and use named motion vocabulary so the agent can select the right transition/easing behavior. Source: X/@dorukkavcioglu, 2026-06-27; Source: X/@emilkowalski, 2026-06-29

Version check: diffusionstudio/lottie exposes Git tag v1.0.0 and default branch HEAD 39bb536f27225a198ed4c1ec92de0a4ab8665a9c as of 2026-06-29. Source: git ls-remote, 2026-06-29

Agent-era product design workflow

Takeaway: Ramp's workflow signal now has local artifact evidence in AI-Native Design Patterns: use an LLM to clarify the problem, validate assumptions with users, prototype the real interaction with AI, refine the surviving concept in Figma, then iterate against live behavior. The playbook's real provocation is that Figma becomes refinement infrastructure, not the place where product ideas are invented. Source: X/@aakashgupta and local image review, 2026-07-04

Astryx and Meta component sources

Takeaway: Astryx Design System is now promoted out of hub-only status. The durable signal is not just "Meta has components"; it is that a design system can expose component docs, themes, templates, CLI/MCP-like agent routes, and StyleX-backed conventions so humans and agents build from the same operating surface. Source: X/@Astryxdesign, 2026-06-24; Source: X/@mellyeliu, 2026-06-25; Source: GitHub facebook/astryx, 2026-06-29

Version check: facebook/astryx main is 73bcac9ab899432ab409edec127e58c6c973d87e; @astryxdesign/core, @astryxdesign/cli, and @astryxdesign/theme-neutral latest are 0.1.3 on npm as of 2026-07-04. Source: GitHub; npm registry, 2026-07-04

Cloudflare Kumo

Takeaway: Cloudflare Kumo is promoted as the Cloudflare/Base UI component-library source: accessible React components, CLI-readable docs, granular imports, primitive re-exports, and Figma/token tooling. The original bookmark is a visual button-improvement signal; the version authority is the repo and npm package. Source: X/@nandafyi, 2026-06-19; Source: GitHub cloudflare/kumo, 2026-06-29

Version check: @cloudflare/kumo latest is 2.6.0 on npm and release tag @cloudflare/kumo@2.6.0 was published 2026-06-22. Source: GitHub API; npm registry, 2026-06-29

Re-sync 2026-06-28 (+new)

shadcn streaming chat behavior

Takeaway: Shadcn UI Ecosystem now has the chat-interface primitive lesson: a great streaming transcript preserves reader intent. MessageScroller owns anchoring, saved-thread restore, prepended history, scroll controls, and visibility; scroll-fade and shimmer handle the polish layer. Source: X/@shadcn, 2026-06-26

Design systems as agent skills

Takeaway: v0 by Vercel Design Systems 2.0, Astryx Design System, Inter Font, and X dynamic trays all point at the same design-system rule: source code, usage examples, tokens, providers, motion behavior, interaction primitives, and source-of-truth distributions must be agent-readable before generation. Inter is now promoted because the correct implementation source is rsms/inter; Google Fonts is a fallback, not the authority. Source: X/@v0, 2026-06-25; Source: Astryx; Source: rsms/inter

Motion and surface references

Takeaway: The batch adds UI inspiration plus promoted implementation/source pages: Its Hover for shadcn-installable animated icons, shadcn scroll-fade for overflow affordances, and the HeyClicky Figma Motion teaching video through Figma Motion, Clicky, and Agent GUIs. The reviewed video shows voice prompts steering a Figma Motion canvas with visible path/target controls. Keep dithered charts, cube-OS visuals, aesthetic footers, loading states, shimmer, and HyperFrames 3D keyframing as references unless they recur. Source: X Bookmark Ingest 2026-06-28; X/@heyclicky and local video contact sheet, 2026-07-04

Re-sync 2026-06-26 (+new)

Vercel product-design loop

Takeaway: Vercel's product-design article gives a concrete implementation for agent-readable product/design standards: repository-local skill, canonical references, exemplars, deterministic linters, and a review loop that updates guidance from accepted Slack/Figma/GitHub decisions. This reinforces Kevin's ordering: design-engineering-polish, Frontend and Design Skills, and Frontend and Design Skills before generic design review. Source: Vercel blog, 2026-06-25

Figma shaders and motion dither

Takeaway: The new Figma shader/motion examples are a practical source for distinct surface treatments: dither, shader passes, and timeline motion can now be prototyped in design tooling before becoming web code. Deep artifact review confirmed the visual shape: a generated "The Alien Metamorphosis" landing page with blue dither/shader alien motion and a dashboard section. Route implementation through Figma Motion, Shader Effects Libraries, and Design and Animation. Source: X/@sunalsood, 2026-06-25; Source: local video artifact review, 2026-07-02

animations.dev as design-engineering reference

Takeaway: The "gradient profile pic" joke resolves to Animations.dev as a real source: Emil Kowalski's course, motion examples, and design-engineering craft reference, not a styling meme. Add to moodboard/design-engineering source discovery when the UI needs motion vocabulary or when the agent needs concrete taste sources to emulate. Source: X/@GianlucaNDRT, 2026-06-23; Source: animations.dev, 2026-06-30

Re-sync 2026-06-25 (+new)

v0 Design Systems 2.0

Takeaway: v0 by Vercel now treats a design system as a scoped skill: import GitHub/npm/Storybook/docs/Figma/screenshots/consumer apps, verify a starter app, then use that saved skill in future chats. This is Constraints over Context as a product feature: teach the generator safe components, tokens, providers, and usage patterns before asking for UI. Source: X/@v0, 2026-06-25; Source: v0 docs

Code taste is design taste translated to engineering

Takeaway: Code Taste extends the design-taste conversation into code: abstraction choice, readability, predictable change, verifiability, and documented tie-breakers. It pairs with Design Tokens and design-engineering-polish because the same principle applies to UI work: taste improves when decisions become named, inspectable, and reusable. Source: X/@shadcn and replies, 2026-06-25

Thomas Dimson personal website concept

Takeaway: Personal Website References now includes People Network Ledger's personal-site concept: a browser/game-like artifact with persistent UI chrome and a spatial scene. Useful when a personal site should feel explorable and software-native, not like a static portfolio template. Source: X/@turtlesoupy, 2026-06-24

Koen Bok - design should talk about building

Takeaway: Koen Bok's thread reinforces Kevin's design-engineering routing: when AI changes the cost of making interfaces, design discussion should move from abstract status/taste language back toward building, audiences, and software businesses. Source: X/@koenbok thread, 2026-06-24

Figma Motion

Takeaway: Figma Motion brings timeline/keyframe animation directly into the Figma canvas, with animation styles, time-based comments, and Dev Mode handoff. Deep review confirmed the launch video shows the actual editor: selected layers, a timeline scrubber, draggable keyframes, and blue handles inside Figma. Agents designing product flows should treat Motion artifacts as design-system behavior, not a video export bolted on at the end. Source: X/@figma, 2026-06-24; Source: Figma blog, 2026-06-24

Slot Text / TextMotion

Takeaway: Slot Text now has a resolved source: TextMotion is a dependency-free animated text-change component for Vanilla/React/Vue/Solid/Svelte, useful for counters, status labels, prices, and any UI text that changes in place. Source: X/@DanielWhit21874, 2026-06-24; Source: textmotion.dev

Subtle noise texture

Takeaway: Subtle Noise Textures is a cheap depth layer when used with restraint: fixed pointer-events-none grain, low opacity, no scrolling texture layer, and never as a substitute for real hierarchy. Source: X/@guerriero_se, 2026-06-24

Liquid glass without WebGL

Takeaway: Liquid Glass for the Web adds a practical SVG-filter route: copy the backdrop, apply feDisplacementMap, and avoid relying on SVG displacement inside backdrop-filter because that path is Chromium-only. Source: X/@jesse_vermeulen, 2026-06-24; Source: Outpace

Taste building

Takeaway: Design and Animation now carries Emil Kowalski / Rasmus Andersson as evidence for "taste is trained": collect references, reverse engineer details, and build vocabulary until intuition has names. Source: X/@emilkowalski, 2024-03-04

Re-sync 2026-06-24 (+today-stamped)

Emil Kowalski — more design-engineering skills

Takeaway: Emil explicitly called out untapped potential in design-engineering skills; /emil-design-eng has crossed 100K installs and animations.dev will get an updated AI section in August. This validates Kevin's routing choice: design-engineering-polish sits above generic design review, with Frontend and Design Skills / Frontend and Design Skills as the implementation layer. Source: X/@emilkowalski, 2026-06-24

Interface sound as motion design

Takeaway: Interface Sound belongs in the polish layer beside micro-motion and haptics. The reviewed demo frames sound as a small event grammar for state on/off, arrival, confirmation, and failure, with a persistent mute rule so sound is a bonus layer rather than the only signal. Source: X/@eledure, 2026-06-24; Source: Velvet UI, 2026-07-03

Agent UI themes from SF design demos

Takeaway: Promoted into Agent GUIs. Ben Issen's design dinner themes - disposable user interfaces, ultra-configurable UIs, and systems to deslopify LLMs - reinforce Kevin's taste-skill stack: designers are increasingly building the UI surfaces they need around agents. The reviewed photo is event evidence, while the durable design signal is the theme list plus the hiring/project formation around the dinner series. Source: X/@ben_issen, self-thread, and local image review, 2026-07-04

Material + brand notes

Takeaway: The liquid-glass web demo remains a credible frontier material signal; Gradient Shimmer is a packaged text-shimmer component; the OG-image brand thread now lives in Public Brand Guideline References as a compressed identity test. Local review preserved Clay's toy-clay landscape, PostHog's desktop/handbook skeuomorphism, fal's purple pixel-diffusion birds, and Cohere's glossy macro abstraction. Source: X/@lukaslevert, 2026-06-21; Source: local image artifacts, reviewed 2026-07-03

Re-sync 2026-06-21 (+new)

Liquid glass on the web (jesse_vermeulen)

finally cracked the code for liquid glass on the web - @jesse_vermeulen | 2026-06-21 | 7,868 likes, 4,802 bookmarks

Takeaway: Promoted into Liquid Glass for the Web and Liquid Glass JS. Local video review confirms the durable signal is live material behavior for floating menus - refractive edges, background lensing, and specular continuity - while the implementation authority stays with the Outpace writeup and library pages. Source: X/@jesse_vermeulen and local video review, 2026-07-04

Slot-text — satisfying text transitions (DanielWhit21874)

Ever seen text change this satisfying? Just use Slot-text - @DanielWhit21874 | 2026-06-13 | 3,794 likes, 3,117 bookmarks

Takeaway: Promoted to Slot Text. Deep review of the video shows a dark demo sequence with rolling words, flight schedule rows, metric counters, and music-card labels. Use it as a small text-change primitive for counters, prices, status labels, and compact dashboard values, then verify tabular number behavior, reduced motion, and layout stability. Source: X/@DanielWhit21874, 2026-06-13; Source: local artifact wiki/assets/x-bookmarks/2065881547996057616/image-01.jpg, reviewed 2026-07-01

2,000+ agent-readable design systems (Voxyz_ai)

found a site with 2,000+ complete design systems, each one a DESIGN.md your agent reads directly. every one comes with: color palette + tokens, type scale … - @Voxyz_ai | 2026-06-20 | 1,410 likes, 2,961 bookmarks

Takeaway: Local visual review confirms this is Refero Styles: a searchable gallery of 2,000+ AI-readable visual systems, each with colors, typography, spacing, component patterns, and a DESIGN.md an agent can load. Route it through Awesome Design MD and DESIGN.md as a reference corpus, not a style to paste wholesale. Source: X/@Voxyz_ai, 2026-06-20; Source: Refero Styles, 2026-07-03

Re-sync 2026-06-13 (+9 new)

Submenu safe triangle / prediction cone

This is why native menus feel so much better. Prediction cone / safe triangle — the invisible area that stops submenus from closing when you move diagonally. props @sorenblank - @AliGrids | 2026-06-12 | 2,456 likes, 2,065 bookmarks

Takeaway: Submenu Safe Triangle — the menu-aim pattern; default to Radix/shadcn menus that encode pointer grace. Deep video review confirmed the visible prediction cone keeps the submenu active during diagonal movement, while the disabled state shows the naive hover failure. Source: X/@AliGrids, 2026-06-12; Source: local video artifact review, 2026-07-01

Making Software — image compression (DanHollick)

Did you know that the .png format was created out of spite? Or that .jpeg just discards like half of the colours... I published a chapter on image compression. - @DanHollick | 2026-06-11 | 3,392 likes, 2,375 bookmarks

Takeaway: Making Software — Dan Hollick's illustrated "how software works" book (touch screens, Gaussian blur, beziers, rasterization, compression); a standing design-inspo + insight source. Deep video review confirmed the artifact is a real chapter scroll with color-space, channel/block, and compression-format diagrams; current scripted live fetch is blocked by Vercel Security Checkpoint / 429. Source: X/@DanHollick, 2026-06-11; Source: local video artifact review, 2026-07-01

Batch 26-150 (2026-06-13)

Pretext / Illustrated Manuscript

This little illuminated dragon is very happy about Pretext... - @Riyvir | 2026-03-29 | 42,465 likes, 13,923 bookmarks

Takeaway: Illustrated Manuscript (Pretext) viral generative art on Vercel; desktop-only at launch. Deep review of the video shows the important part is not static AI art: the dragon moves through and visibly disturbs the manuscript layout, so illustration, typography, and motion read as one living surface. Source: X/@Riyvir, 2026-03-29

Emil Kowalski — animation vocabulary

To get good animations from an AI you need to get good at telling it what you want: stagger, direction-aware, crossfade... - @emilkowalski | 2026-06-01 | 5,300 likes, 7,726 bookmarks

Takeaway: Deep review kept Animation Vocabulary (Animations.dev) as the glossary/source page and design-engineering-polish as the executable owner. The visual artifact confirms the useful categories for agents: state transitions, sequencing/timing, feedback/interaction, crossfade, morph, shared element transition, layout animation, and direction-aware transition. Source: X/@emilkowalski, 2026-06-01; Source: animations.dev/vocabulary

Base44 design-from-URL

Your app can now pick up a design from a URL. Paste it into Base44 and it just… adapts. - @Base44 | 2026-03-26 | 1,761 likes, 3,395 bookmarks

Takeaway: Deep review routes this to Base44: URL reference import, generated app, asset library, and app-wide theme controls are useful for hosted prototype exploration, but not a production code path. Current Base44 source also frames the product around natural-language app generation, built-in backend/hosting, model selection, integrations, and Superagents. Source: X/@Base44, 2026-03-26; Source: Base44, 2026-07-02

Arcotype font browser

arcotype sorts all of the 2000+ fonts on google fonts... visual similarity + vibe tagging - @gabbisoong | 2026-03-24 | 3,064 likes, 3,361 bookmarks

Takeaway: Arcotype Font Browser is now the canonical page for this row. The useful product shape is visual-similarity and vibe search across Google Fonts, currently at www.arcoty.pe with waitlist access. Source: X/@gabbisoong, 2026-03-24; Source: Arcotype, checked 2026-07-01

Kigen palette generator

UI/UX Designers, this might be one of the cleanest color palette generators I've seen lately. Kigen... - @Abmankendrick | 2026-03-07 | 3,779 likes, 5,524 bookmarks

Takeaway: Kigen Palette Generator is a token-generation workbench, not a generic palette site. Deep video and live-page review confirmed RGB sliders, Tailwind CSS algorithm selection, contrast shift, naming pattern 50,100...900, shade-count controls, SVG/Figma and SVG export, plus CSS, Tailwind, Tailwind 4, Tokens, HEX, RGBA, HSL, and OKLCH outputs. Keep it in Color Palette & Gradient Tools and Design Engineering Resources for Tailwind/design-token workflows. Source: X/@Abmankendrick, 2026-03-07; Source: Kigen Color Generator, 2026-07-01

Taste-Skill imagegen workflow

Based on the skill above, generate images for a website... eight sections... - @LexnLin | 2026-05-02 | 2,517 likes, 4,574 bookmarks

Takeaway: Taste Skill Framework (Leonxlnx/taste-skill) imagegen-frontend-web + ChatGPT Images. Source: X/@LexnLin, 2026-05-02

Wes Bos — four horsemen of dark mode

the four horsemen of the apocalypse - @wesbos | 2026-06-03 | 21,424 likes, 4,986 bookmarks

Takeaway: Dark Mode Engineering now owns this as a warm-dark failure mode, not just a meme. Local artifact review found muddy purple/brown surfaces, warm edge glow, a washed letter-spacing crop, and a green "Live" pill against blue-purple chrome. Keep dark surfaces neutral/cool and use warm light as deliberate accent, not ambient sludge. Source: X/@wesbos thread, 2026-06-03; Source: local artifact review, 2026-07-01

Gemini brand-identity prompts (jamescoder12)

GOODBYE LOGO DESIGNERS IN 2026. Here are 7 expert Gemini prompts that generate brand identity... - @jamescoder12 | 2026-03-10 | 7,300 bookmarks

Takeaway: Promoted to Taste Skill Framework (Leonxlnx/taste-skill) as taste-brandkit prompt-structure evidence. The self-thread covers brand foundation, logo concepts, color psychology, typography, visual direction, voice/messaging, and a complete brand identity package. Keep it as a layered prompt checklist, not as proof that design judgment is optional. Source: X/@jamescoder12, 2026-03-12

AI brand identity demo (DrapzDZN)

''Designers are cooked'' I have never seen an AI create brand identities like these. - @DrapzDZN | 2026-03-13 | 2,406 likes, 2,971 bookmarks

Takeaway: Promoted as Taste Skill Framework (Leonxlnx/taste-skill) / taste-brandkit evidence, not as proof that brand designers are obsolete. The reviewed Radiant board includes a logo mark, spacing, typography (Host Grotesk), color system, logo usage, poster/social applications, and a dark luminous wave motif with peach accent applications. Durable standard: AI brand generation matters when it produces system artifacts, not a single logo render. Source: X/@DrapzDZN, 2026-03-13; Source: local image artifact, 2026-07-02

Font discovery (heyshihab)

im in love with these fonts - @heyshihab | 2026-03-23 | 4,045 likes, 3,204 bookmarks

Takeaway: Visual typography moodboard, not a free-font source list. The reviewed images pair Neue Montreal, Saans, Signifier, and Geist with high-contrast halftone/portrait treatments; use the row for type direction and source hunting through Type Foundries Reference and Frontend and Design Skills, not as proof that each face belongs in Fonts — Picks & Free. Source: X/@heyshihab and local image artifacts, 2026-07-03

Premium UI workflow (starkience)

Make your App look PREMIUM: get a UI you like → Claude + skills → happy users - @starkience | 2026-02-28 | 1,587 likes, 3,180 bookmarks

Takeaway: Spotted in Prod + Skills.sh - Agent Skills Registry is the reference-first design loop: choose a shipped UI clip, name the qualities to borrow, then route through a narrow design/implementation skill instead of bulk-loading a catalog. Source: X/@starkience, 2026-02-28

Typography

Font Recommendations for Designers

5+ years as designer. The only fonts I'll ever need again - @yahyavision | 2026-04-18 | 2,547 likes

Takeaway: Curated essential font list from a seasoned designer - high-signal type selection reference. Source: X/@yahyavision, 2026-04-18

"i'm in love with these fonts"

im in love with these fonts - @heyshihab | 2026-03-24 | 4,045 likes

Takeaway: Font discovery thread with high community engagement - typeface inspiration mining. Source: X/@heyshihab, 2026-03-24

Arcotype - Google Fonts Sorted by Aesthetics

i built arcotype to solve this issue!! arcotype sorts all of the 2000+ fonts on google fonts for the first time by visual similarity - @gabbisoong | 2026-03-19 | 3,064 likes

Takeaway: Browse Google Fonts by visual similarity instead of alphabetical - eliminates font-scrolling hell. See Arcotype Font Browser. Source: X/@gabbisoong, 2026-03-19

21 UI Design Fonts

21 Fonts for your UI Design Projects by UI Abraham - @AliGrids | 2026-03-16 | 243 likes

Takeaway: Curated UI typography reference sheet; see the later reviewed AliGrids duplicate below and Fonts — Picks & Free. Source: X/@AliGrids, 2026-03-16

Fliege Mono

Most monospaced fonts feel like spreadsheets. Fliege Mono doesn't. Ink traps, lowercase ascenders slightly taller than the cap height, 6 styles + a variable. Free. - @tranmautritam | 2026-05-15 | 180 likes

Takeaway: Deep review keeps this in Fliege Mono and Fonts — Picks & Free: free Pavel Laptev monospace with ink traps, Latin/Cyrillic coverage, 6 styles plus variable weight, and a specimen UI with live size/weight/tracking controls. Use for code, labels, terminal surfaces, and technical UI where the mono can have personality. Source: X/@tranmautritam, 2026-05-15; Source: Fliege Mono official specimen, 2026-07-03

tabular-nums Default Rule

tabular-nums should be the default for any number that updates (timers, counters, prices, percentages, scores, live data…) - @sorenblank | 2026-03-02 | 8,238 likes

Takeaway: Fixed-width numerals prevent layout jitter in dynamic UIs - should be in every design system's reset. Source: X/@sorenblank, 2026-03-02

Playwrite Tanzania - Apple "hello" lookalike

Okay this one is actually scary close to Apple's "hello" font and it's free - @vyshnav_xyz | 2026-05-29 | 5,118 likes

Takeaway: Deep review keeps this in Fonts — Picks & Free: Playwrite TZ is a free Google Fonts connected script that can mimic the Apple "hello" feel for hero wordmarks/signature accents. Do not use it for body UI. Current Google Fonts CSS serves playwritetz/v11 weights 100-400. Source: X/@vyshnav_xyz, 2026-05-29; Source: Google Fonts, 2026-07-02

Free Inter-Alternative Grotesque

Wake up. New Inter killer just dropped. 10 weights. 20 styles. Completely free. - @bram_naus | 2026-05-18 | 894 likes

Takeaway: Promoted into Fonts — Picks & Free as Avio Sans by Lerbb Group, not an unnamed Inter alternative. Local review shows "Avio Sans Project · v0.8," 10 weights, full italic variants / 20 styles, and "free to use in anything, forever." The original domain is currently NXDOMAIN, so keep as a preserved reference until a live distribution/license file is recovered. Source: X/@bram_naus, 2026-05-18; Source: Typotato, 2026-05-18

Color / Palette

Kigen Color Palette Generator

UI/UX Designers, this might be one of the cleanest color palette generators I've seen lately. Kigen… - @Abmankendrick | 2026-03-07 | 3,779 likes

Takeaway: Clean palette generation tool - high design bar for color system bootstrapping. See Kigen Palette Generator. Source: X/@Abmankendrick, 2026-03-07

Happy Hues - Palettes on Real Websites

Happy Hues gives you curated color palette ideas displayed on real website examples, so you can instantly see how colors work together before designing. - @Abmankendrick | 2026-05-30 | 318 likes

Takeaway: Previews each palette in situ on a live demo layout, not just swatches; sibling tool to Kigen from the same curator. Deep artifact review confirmed role-labeled colors for background, headline, paragraph, button, button text, and illustration roles, which is why the tool belongs in Color Palette & Gradient Tools. Source: X/@Abmankendrick, 2026-05-30

Color/Gradient Picker Sites

Some sites I use for picking colors or gradients for a new design: 1. realtime colors 2. coolors 3. color hunt… - @AlbiaHossain | 2026-03-26 | 1,671 likes

Takeaway: Practitioner-vetted color tool list. Source: X/@AlbiaHossain, 2026-03-26

Gradient Usage Guide

The right way to use Gradient - @yahyavision | 2026-03-19 | 1,938 likes

Takeaway: Practical gradient application rules - direction, stops, opacity. Source: X/@yahyavision, 2026-03-19

App Background Design

How I design app backgrounds in 3 steps - @yahyavision | 2026-03-28 | 1,256 likes

Takeaway: Background layering technique - gradients, blur, noise for depth. Source: X/@yahyavision, 2026-03-28

Animation / Motion

Emil Kowalski's Animation Decisions

Few quick animation decisions: - @emilkowalski | 2026-04-17 | 1,640 likes

Takeaway: Micro-decision framework for animation timing, easing, and purpose. See design-engineering-polish. Source: X/@emilkowalski, 2026-04-17

Anime.js scrambleText()

With the new scrambleText() feature, you can control reveal direction, create cursor effects, apply perturbation and easing - @JulianGarnier | 2026-04-29 | 1,465 likes

Takeaway: Text scramble/reveal animations in Anime.js - directional, cursor-aware, easeable. Deep review routes implementation to Text Animations Collection (animate-text) and the animejs skill, using the official scrambleText() docs rather than a hand-rolled text timer. Source: X/@JulianGarnier, 2026-04-29; Source: Anime.js docs, 2026-07-02

Dither Motion + Japanese Typography

Dither motion and Japanese typography experiments for a more distinct website section. - @Oriku175 | 2026-05-13 | 3,378 likes

Takeaway: Promoted to Design Effects and Motion Sources as visual vocabulary, not a new tool: blue monochrome dithered fish/jellyfish imagery, vertical Japanese calligraphy, bilingual microcopy, and restrained aquatic motion produce a distinctive section language without relying on generic gradient/card tropes. Source: X/@Oriku175, 2026-05-13

Dither + ASCII + Motion

Dither + ASCII + Motion = - @praveenisomer | 2026-04-02 | 2,252 likes

Takeaway: Promoted to Design Effects and Motion Sources and ASCII Magic as a visual-language reference: pale dithered floral imagery, sparse editorial composition, ASCII texture, and motion can make a section feel authored without adding another product framework. Source: X/@praveenisomer, 2026-04-02; Source: local media artifact review, 2026-07-03

Fluid UI Transitions

fluid UI transitions never get old. - @AliGrids | 2026-03-15 | 2,911 likes

Takeaway: Smooth transition showcase - timing and easing as premium signal. Source: X/@AliGrids, 2026-03-15

2D Animations for Product Launches

2D animations are booming right now - the most efficient way to launch your product or showcase a new feature - @MarkKnd | 2026-05-02 | 2,161 likes

Takeaway: 2D animation > video for product demos - faster production, higher engagement. Source: X/@MarkKnd, 2026-05-02

Parallax in Framer (3 clicks)

12 years of design experience, 3 clicks in @framer. Parallax done. - @stfnco | 2026-03-05 | 1,198 likes

Takeaway: Framer collapsing parallax implementation from days to seconds. Source: X/@stfnco, 2026-03-05

Static → Animated Illustrations

Static illustrations don't tell the story. After finishing each animation, I think most graphics staying static don't make sense anymore. - @mehmetozsoyart | 2026-03-23 | 1,253 likes

Takeaway: The case for animating every illustration - static is increasingly the wrong default. Source: X/@mehmetozsoyart, 2026-03-23

Mistral Loaders (open source)

Most loaders are forgettable. I built this as a design exploration at Mistral to see what happens when they're not. Today, I'm open sourcing it. - @dnaijatechguy | 2026-05-29 | 1,657 likes

Takeaway: loaders.wtf is more than a gallery. The local video shows a real loader builder with editable grid/cell shape, animation pattern, speed, style, background, effects, color, text shimmer, image mask, AI generation, SVG import, share, and export controls. It complements Kevin's typographic Frontend and Design Skills system by covering the expressive/product-launch lane where a loader is part of the visual identity. Source: X/@dnaijatechguy, 2026-05-29; Source: loaders.wtf, 2026-06-30

Layout / Grids

Reverse-Engineered Design Systems

Someone reverse-engineered the design systems of Apple, Spotify, Airbnb, and 30+ billion-dollar companies. - @heynavtoor | 2026-04-04 | 8,011 likes

Takeaway: Design system teardowns of top products - spacing, type scales, color tokens extracted. See Awesome Design MD. Source: X/@heynavtoor, 2026-04-04

• Also noted: Voronoi bento grid in Framer by @alexprokhorov (535 likes), footer design exploration by @Brennan_designs (512 likes)

Component Registries

React Bits - Animated shadcn registry

Top 10 UI libraries via shadcn registry: React Bits with 40K+ GitHub stars, 130+ animated components, Pro blocks at pro.reactbits.dev. - @orcdev | 2026-05-07 | 217 bookmarks

Takeaway: Fastest-growing animated registry; four stack variants per component. React Bits. Source: X/@orcdev, 2026-05-07

OrcDev top-five shadcn registries

shadcnblocks, shadcnstudio, shadcnspace, reactbits pro, tailark - top 5 imo. - @orcdev | 2026-04-16 | 76 bookmarks

Takeaway: Registry directory expanded with scale notes (1630 blocks, 750+ blocks, 326+ blocks). Shadcn Registry Directory (Top Blocks). Source: X/@orcdev, 2026-04-16

Dashboard Blocks - shadcn analytics blocks

Introducing Dashboard Blocks! The most demanded shadcn blocks, engineered to help you ship beautiful analytics interfaces in seconds. Registry ready, light & dark mode, Base UI + Radix compatible, icon-library agnostic. - @shabanhr | 2026-05-22 | 1,462 likes

Takeaway: Promoted in Shadcn Registry Directory (Top Blocks) and Component Library Sources as Dashboard Blocks / Efferd; deep review inspected all four screenshots and the live registry page. Source: X/@shabanhr, 2026-05-22

Cheng Lou Pretext - Text layout engine

14-tweet thread: @chenglou/pretext removes DOM text measurement bottleneck; 65K likes, 62K bookmarks. - @_chenglou | 2026-03-28

Takeaway: Foundational for chat UIs, virtualization, responsive columns, and canvas/editorial composition. The reviewed artifact shows live text flowing around draggable objects with no DOM-read loop; Canvas Text Layout (Pretext) now owns the source snapshot and agent-design implications. Cheng Lou (Chenglou), Canvas Text Layout (Pretext). Source: X/@_chenglou, 2026-03-28

Design Tools

Google Stitch relaunch

Meet the new Stitch, your vibe design partner: AI-Native Canvas, Smarter Design Agent, Voice, Instant Prototypes, Design Systems and DESIGN.md. - @stitchbygoogle | 2026-03-18 | 40,823 likes | 40,999 bookmarks

Takeaway: Product-side validation of DESIGN.md agent design systems. See Google Stitch and Frontend and Design Skills. Demo video in thread. Source: X/@stitchbygoogle thread, 2026-03-18

Deep review: The current canonical product URL is stitch.withgoogle.com; the old labs.google.com/stitch path now returns 404. The relaunch thread plus Google Keyword source make Stitch a concrete agent-design surface: AI-native canvas, whole-project design agent, voice critique/updates, instant prototypes, DESIGN.md import/export, MCP, SDK, and Stitch skills. The owning synthesis is Google Stitch.

DESIGN.md as Category

DESIGN.md is quietly becoming a category - 9 tools doing it so far. What am I missing? - @tranmautritam | 2026-05-12 | 1,198 likes

Takeaway: Agent-readable design systems via markdown - Kevin's taste-stitch skill is in this space. Source: X/@tranmautritam, 2026-05-12

designtools.fyi

Design tool library - Find the right tool for your role, ranked by what actually matters. - @AdhamDannaway | 2026-05-10 | 957 likes

Takeaway: Designtools.fyi is the role-ranked design-tool directory already referenced in Kevin's tool hierarchy. Deep review of the launch image confirmed the actual product surface: archetype/facet/tag filters, score sorting, and comparable cards for tools like Figma, Subframe, Paper, Uizard, Recraft, Tempo Labs, Gemini, and OpenPencil. Source: X/@AdhamDannaway, 2026-05-10

Design Book - Design Token Library

Finally made a small lib that helps me implement how I think about design tokens. - @meodai | 2026-05-15 | 324 likes

Takeaway: Opinionated procedural-token implementation library. The reviewed artifact shows a live token graph generating palette and component previews from relationships, so the durable lesson is to preserve design decisions as rules before exporting CSS/JSON/Tailwind. See Design Tokens and Design Book. Source: X/@meodai, 2026-05-15

Charcutrie - Unicode Explorer by Visual Similarity

I wanted a way to explore Unicode by visual similarity, not just by name or codepoint, so I built Charcutrie. - @meodai | 2026-04-07 | 1,877 likes

Takeaway: Search Unicode characters by visual similarity, not only by name/codepoint. Deep review promoted this to Charcuterie and corrected current source authority to the live SigLIP 2 site. Source: X/@meodai, 2026-04-07; Source: Charcuterie site, 2026-07-02

Web to Design by Skirano

Introducing Web to Design. Turn any website into an editable UI. Just paste a URL. - @skirano | 2026-03-12 | 1,859 likes

Takeaway: URL → editable design file pipeline - reverse Figma-to-code. Source: X/@skirano, 2026-03-12

Dither Tool (Open Source)

just released dither, a vector dithering tool! It's open source and has an illustrator plugin! - @Shpigford | 2026-03-15 | 2,624 likes

Takeaway: Open-source vector dithering for illustrations, with local media showing halftone portrait, square-dot abstraction, and sepia grid examples. See Dither. Source: X/@Shpigford, 2026-03-15

Inspiration

"This UI feels expensive" (7.6K likes)

This UI feels expensive. - @AliGrids | 2026-03-06 | 7,557 likes

Takeaway: Premium UI benchmark - the standard Kevin's taste-soft skill aims for. Source: X/@AliGrids, 2026-03-06

Textures for Illustrations (19.6K bookmarks)

Here are some cool textures I use on my illustrations and graphic design work - @mithsd_ | 2026-03-14 | 24,470 likes | 19,589 bookmarks

Takeaway: Promoted through Texture & Grain Resources. Local media review preserved four concrete samples: halftone dot gradient, scratched grit overlay, dark halftone screen, and off-white paper/plaster crack texture. Treat the post as an illustration-texture reference set, not a generic "add grain" note. Source: X/@mithsd_, 2026-03-14; Source: local image artifacts, 2026-07-02

Design Cheatsheets

Design cheatsheet: Icons (huge_icons), Typography (Geist/Inter), Colors (oklch), Spacing (4/8/12/16), Radius (8px)… - @_heyrico | 2026-03-08 | 792 likes

Design cheatsheet: Typography 2 sizes only: 16px & 14px, regular + medium. Spacing: 4px rule… - @tranmautritam | 2026-03-18 | 791 likes

Takeaway: Two independent cheatsheets converging on the same constraints - Inter/Geist, 4px grid, 8px radius, oklch. Validates Kevin's Design System.

• Also noted: UI-Skills collection by @Ibelick (1,017 likes), design inspiration sites by @AlbiaHossain (1,787 likes), weekly designs by @pankajstwt (578 likes), motion sites by @Abmankendrick (405 likes), design engineer tools by @remvze (371 likes), Linear parallax bar by @sorenblank (354 likes)

Free Halftone Textures

Halftone textures for free! - @AlbiaHossain | 2026-03-27 | 860 likes, 422 bookmarks

Takeaway: Promoted through Texture & Grain Resources. The reviewed local images show two black-and-white dot-screen samples: a dense face/hand crop and an abstract high-contrast halftone field. Use for editorial grit, poster energy, and section accents; avoid on dense app text. Source: X/@AlbiaHossain and local image artifacts, 2026-07-03

Niche UI Galleries (navbars, footers, 404s)

There's a gallery for navbars. For footers. Even 404s. Niche UI inspiration sites have quietly taken over my bookmarks. - @tranmautritam | 2026-05-18 | 954 likes

Takeaway: Thread curating single-component galleries (Navbar, SupaHero, 404s, Footer, CTA, Unsection, 60fps, DesignSpells, BentoGrids, more). Catalogued in Niche UI Inspiration Galleries. The reviewed image is a 3x3 card board, which is the right shelf shape for future design references: one UI element per card, short domain label, and no whole-site moodboard sprawl. Source: X/@tranmautritam thread and local image artifact, 2026-07-03

Mobile Navbar Gallery

Mobile navbars are hard to get right. That's why I created this FREE collection of 75+ top mobile navigations from real world websites. - @Suupercharged | 2026-03-13 | 707 likes, 802 bookmarks

Takeaway: Promoted to Niche UI Inspiration Galleries. The resolved artifact is Navbar Gallery mobile navigation, with real-site mobile menus and filters for static, dropdown, mega menu, sidebar, search, announcement, full-screen, and breadcrumbs. Source: X/@Suupercharged, 2026-03-13; Source: local video artifact review, 2026-07-02

Cash App Design Page

this design team absolutely cooked .. the cash app design page is packed with fire ideas everywhere - @Aurelien_Gz | 2026-05-13 | 526 likes

Takeaway: Deep-reviewed in Public Brand Guideline References. Public Cash App brand guidelines (design.cash.app) cover logo, color, typography, motion, iconography, cards, graphic UI, and tokens; the local video adds the missing behavior layer, with floating green/white product objects and section navigation showing how a guideline site can demonstrate brand motion. Study it alongside Design System. Source: X/@Aurelien_Gz, 2026-05-13; Source: local video artifact review, 2026-07-02

Isometric Website Specialist

Now you know whom to hire for isometric websites. - @Praha37v | 2026-05-30 | 326 likes

Takeaway: Demo reel of isometric web work from a designer taking projects; a niche-specialist reference for Design Agencies Reference. Source: X/@Praha37v, 2026-05-30

Deep review: The local 11.5s reel shows dark isometric SaaS panels, 3D cards, chart blocks, AI workflow diagrams, and bento-like motion. Artifact replies identify Figma and Rive as the demo stack. The live Lander site adds Framer/Webflow/Next.js, Rive/After Effects, and Spline/Blender as service capabilities, so the durable routing is "isometric SaaS product-story specialist," not a generic dashboard baseline.

Batch 151–512 Absorption (30 entries)

fluid UI transitions never get old

fluid UI transitions never get old. https://t.co/0K2t0Lw5xH - @AliGrids | Sun 15, Mar | 2,911 likes, 2,609 bookmarks

Takeaway: Deep review resolves this as a Framer page-transition taste reference, not a new tool route. The local video shows a creamy Framer marketing site transitioning between a hero ("From AI confusion to clarity") and a mission/story page through blur, fade, and scale choreography. Use the pattern for high-polish marketing/site navigation where the transition preserves spatial continuity; for implementation in React apps, route through Frontend and Design Skills, Frontend and Design Skills, or CSS view-transition patterns rather than assuming Framer is the production stack. Source: X/@AliGrids, Sun 15, Mar; Source: local video artifact review, 2026-07-01

2D animations are booming right now

2D animations are booming right now It's the most efficient way to launch your product or showcase a new feature A few works we did recently: https://t.co/J3Ea6Nm57R - @MarkKnd | Sat 02, May | 2,161 likes, 1,935 bookmarks

Takeaway: Promoted to Design and Animation and Design Effects and Motion Sources. The self-thread resolves to Skale, and the reviewed video shows a product-launch explainer montage with product screenshots, animated type, abstract data islands, and app/phone frames. Use it as a launch-motion reference, not a generic "2D is good" slogan. Source: X/@MarkKnd, 2026-05-02; Source: Skale, checked 2026-07-02

5+ years as designer

5+ years as designer. The only fonts I'll ever need again https://t.co/bat3mST1hy - @yahyavision | Sat 18, Apr | 2,547 likes, 1,927 bookmarks

Takeaway: Promoted to Fonts — Picks & Free and Type Foundries Reference as a type-direction moodboard. The reviewed image lists Awesome Serif, Coolvetica, Instrument Serif, Helvetica Neue, DM Serif Display, Caros, Bunch, Bricolage Grotesque, DM Mono, Inter, Darker Grotesque, and Tusker Grotesk; use it to choose roles and source candidates, then verify foundry/license/distribution before adopting any face. Source: X/@yahyavision and local image review, 2026-07-03

Go to these sites for design inspiration:

Go to these sites for design inspiration: - Awwwards - Behance - Dribbble - SiteInspire - UX Archive - Mobbin - Collect UI - Land-book - UI Jar - Design Vault - Refero - Pageflows - Scrnshts - Waveguide - GoodUX - Dark Mode Design - Minimal Gallery - Saaspo https://t.co/lKK6AleWV... - @AlbiaHossain | Tue 17, Mar | 1,787 likes, 1,889 bookmarks

Takeaway: Promoted into Design Inspiration Galleries. The tweet text is the durable list: Awwwards, Behance, Dribbble, SiteInspire, UX Archive, Mobbin, Collect UI, Land-book, UI Jar, Design Vault, Refero, Pageflows, Scrnshts, Waveguide, GoodUX, Dark Mode Design, Minimal Gallery, and Saaspo. Local image review found a monochrome stippled angel graphic with "Create with no limitations"; use it as mood/reference material, not as the list source. Source: X/@AlbiaHossain, 2026-03-17; Source: local image artifact, reviewed 2026-07-03

Some sites I use for picking colors or gradients for a new design

Some sites I use for picking colors or gradients for a new design. 1. https://t.co/XleWUwAUSB 2. https://t.co/7mylKXaD9k 3. https://t.co/E66YRCybTy 4. https://t.co/8Gyvb8RtN7 5. https://t.co/ThQfO3gISh 6. https://t.co/HYOxYJLt4g 7. https://t.co/GTndAj8Gjk https://t.co/DxBGZkVTqI - @AlbiaHossain | Thu 26, Mar | 1,671 likes, 1,647 bookmarks

Takeaway: Promoted into Color Palette & Gradient Tools. The resolved source list covers Coolors, Grabient, ColorHub, Color Hunt, Gradients (Colorion), and ColorKit, while the raw link extractor also hints at Kigen Palette Generator. The local image is a generic grainy gradient card, useful as mood/reference material but not as the source of the tool list. Source: X/@AlbiaHossain and local image review, 2026-03-26

The fastest moving companies all vibecode their launch videos now

The fastest moving companies all vibecode their launch videos now There’s no time to wait for an agency to make a video Instead, everyone is using Remotion or Replit Animation - @samuel_spitz | Sat 11, Apr | 921 likes, 1,441 bookmarks

Takeaway: Promoted to Remotion + Claude Code Marketing Demos and Remotion. The durable signal is launch-video compression: when the product story is simple enough, agent-authored Remotion/Replit Animation clips can replace a slow external agency loop. Keep exact product UI and deterministic timing in Remotion; use generative media only when the artifact does not need source-level review. Source: X/@samuel_spitz, 2026-04-11

Few quick animation decisions:

Few quick animation decisions: https://t.co/zM7hdSlfuk - @emilkowalski | Fri 17, Apr | 1,640 likes, 1,430 bookmarks

Takeaway: Promoted into Design and Animation. The reviewed card compresses Emil's motion rules into a fast decision table: entering/exiting uses ease-out, on-screen movement uses ease-in-out, hover/color uses ease, high-frequency actions should not animate, drag/interruptible gestures use springs, large surfaces get longer durations, and exits finish faster than entrances. Source: X/@emilkowalski, 2026-04-17; Source: local image artifact review, 2026-07-03

Static illustrations don't tell the story

Static illustrations don't tell the story. After finishing each animation, I think most graphics staying static don't engage users. https://t.co/ctUmCHRSDK - @mehmetozsoyart | Mon 23, Mar | 1,253 likes, 1,222 bookmarks

Takeaway: Promoted through Design Effects and Motion Sources. The reviewed video is a monochrome fintech landing page where the technical illustration and bank/customer ticker move while the headline, nav, and CTAs stay readable. The durable design rule: animate static illustrations when motion explains workflow, sequence, state, or proof; do not animate the page just because an asset can move. Source: X/@mehmetozsoyart and local video review, 2026-07-03

12 years of design experience

12 years of design experience 3 clicks in @framer Parallax done ↓ https://t.co/xqAnQGfzyR - @stfnco | Thu 05, Mar | 1,198 likes, 1,003 bookmarks

Takeaway: Promoted to Design and Animation as a scroll-depth reference, not a mandate to build in Framer. Local video review shows a dark AI-agent landing page where foreground landscape, hero copy, and product panel move at different scroll rates before landing on supporting copy and partner marks. The durable rule is restrained parallax: create depth between layers while preserving the reading path and reduced-motion fallback. Source: X/@stfnco and local video review, 2026-07-03

This prompt can replicate almost any design straight into your app

This prompt can replicate almost any design straight into your app. https://t.co/xnzqwjUKFC - @Amank1412 | Mon 16, Mar | 857 likes, 918 bookmarks

Takeaway: Promoted to AI-Native Design Patterns as reference-screen parity for design agents: extract colors, typography, spacing, radius, shadows, component dimensions, interaction states, responsiveness, and rendered-output match from the screenshot instead of treating the image as a generic prompt to copy. Source: X/@Amank1412, 2026-03-16; Source: local image artifact review, 2026-07-03

How I design app backgrounds in 3 steps

How I design app backgrounds in 3 steps https://t.co/ZGCf7jKxsG - @yahyavision | Sat 28, Mar | 1,256 likes, 795 bookmarks

Takeaway: How I design app backgrounds in 3 steps Source: X/@yahyavision, Sat 28, Mar

your UI is only as polished as its worst spam test

your UI is only as polished as its worst spam test. this copy button works... until you spam it. old timeouts fire mid-animation and yank the checkmark away. spam every button, interrupt every animation, clear your timeouts. https://t.co/fhYbNsNfIy - @dimicx | Tue 10, Mar | 1,011 likes, 783 bookmarks

Takeaway: Promoted to Interface Micro-Polish as a concrete state-timer rule. The reviewed comparison shows a package-manager selector/copy button where repeated clicks make stale timers yank the checkmark away, while the fixed version clears the previous timeout and keeps the state coherent under rapid input. Spam every stateful control before calling the animation polished. Source: X/@dimicx and local video review, 2026-07-03

Design cheatsheet (Save for later)

Design cheatsheet (Save for later) • Typography: 2 sizes only: 16px & 14px, regular + medium • Spacing: 4px rule, no exceptions • Buttons: 40px min-height • Radius: 8→40px range • Icons: 24px, stroke 1.5→2px Shipped multiple products with this. Never looked back. https://t.co/bxaBjEbkLk - @tranmautritam | Wed 18, Mar | 791 likes, 732 bookmarks

Takeaway: Promoted to UI Design Defaults (Cheatsheets). The reviewed local image is a measurement overlay for a dark mobile agent UI, reinforcing the defaults as construction numbers: 16px outer padding, 8px inner spacing, 40px controls, 8/16 alignment guides, and restrained type/icon sizing. Source: X/@tranmautritam, 2026-03-18; Source: local image artifact review, 2026-07-02

Many don't get why this is cool

Many don't get why this is cool. I spent a lot of time optimizing web performance. It was one of the main things I did at both lovable and spawn. Here's somewhat simple and thorough explanation: The browser rendering pipeline goes: Style → Layout → Paint → Composite. - @TAbrodi | Sat 28, Mar | 911 likes, 707 bookmarks

Takeaway: Thread: I noticed I forgot to explain layout thrashing. It is when you read from the DOM, then write, then read again, then write again.

Deep review: Promoted to Browser Rendering Pipeline. The self-thread supplies the missing layout-thrashing definition: interleaved DOM reads and writes force repeated synchronous layout recalculation. The recovered blog source repeats the fix: batch reads before writes, use off-DOM fragments for bulk changes, and keep reflow-triggering work out of hot interaction loops. Source: X/@TAbrodi thread, 2026-03-28; Source: Tiger Abrodi blog, 2024-02-27

UI/UX Designers, here are websites where you can find interactive design insp...

UI/UX Designers, here are websites where you can find interactive design inspiration and learn key principles of motion design for your next design project. Bookmark it for later 💜 https://t.co/jlzDDzBWJ1 - @Abmankendrick | Sun 15, Mar | 405 likes, 634 bookmarks

Takeaway: Promoted to Design Inspiration Galleries as 60fps, the motion-detail gallery for shipped-app UI/UX animations and micro-interactions. The local thumbnail shows category chips, storyboards, search, and cards for apps such as Grok, Swiggy, Apple, and Zomato. Source: X/@Abmankendrick and local video thumbnail review, 2026-07-03; Source: 60fps site, 2026-07-03

🔎 «Design Engineer Tools»

🔎 «Design Engineer Tools» A list of useful tools for web-focused design engineers. → https://t.co/yJ4gbAVbzS by @jmswrnr More on → https://t.co/7fk3BqVVP6 🏴 https://t.co/kLMNUFrl7T - @remvze | Sat 14, Mar | 371 likes, 592 bookmarks

Takeaway: A list of useful tools for web-focused design engineers. Source: X/@remvze, Sat 14, Mar

Deep review: Design Engineer Tools is a cross-functional source shelf, not just another inspiration gallery. Current categories include inspiration, AI code agents, components, web utilities, capture, whiteboards, fonts, visual/interface/motion tools, audio, volumetric, 3D, glTF, research, browsers, and emoji. Route through Design Engineering Resources and Component Library Sources before inventing a design-engineering tool list from memory.

good dashboards are just clarity, simple rules, great UI

good dashboards are just clarity, simple rules, great UI. design cheatsheet: - 14px bse font size - 16px base icon size - 1 / 1.2 / 1.5 icon stroke widths - regular/medium / semibold font (very rare) credit to @_heyrico https://t.co/i6u29yGjkF - @AliGrids | Sun 12, Apr | 573 likes, 554 bookmarks

Takeaway: Deep-reviewed and promoted to Dashboard Design System. The corrected durable rule is: 14px base font size, 16px base icons, 1/1.2/1.5px stroke widths, and regular/medium/rare semibold type weights. The local image shows those defaults on a dark finance dashboard with a quiet sidebar, search, stat cards, notification badges, and chart hierarchy. Source: X/@AliGrids and local image review, 2026-07-03

How I approach every new SaaS screen:

How I approach every new SaaS screen: 1. Ask "what decision does the user need to make here?" 2. Remove everything that doesn't help that decision 3. Make the primary action impossible to miss 4. Design the empty state before the full state 5. Check if a new user would - @Tanjim38 | Sun 15, Mar | 329 likes, 449 bookmarks

Takeaway: Reviewed and promoted to UI Design Defaults (Cheatsheets). Treat every SaaS screen as a decision surface before a visual surface: name the user decision, delete unrelated elements, make the primary action unmistakable, design the empty state first, and check whether a new user can read the screen without support. Source: X/@Tanjim38, reviewed 2026-07-04

Radial Brand Identity Design

Radial Brand Identity Design Radial is an AI startup building an orchestration platform for health and life sciences Role: Brand Identity, Logo, Graphic System, Colour, UI/UX, Motion https://t.co/hnXP8E51FO - @secondeight_ | Thu 09, Apr | 765 likes, 372 bookmarks

Takeaway: Promoted to Taste Skill Framework (Leonxlnx/taste-skill) as taste-brandkit evidence. The local image is a full health-AI identity board: logo construction, biological/scientific textures, coordinate/data overlays, type specimens, workflow cards, UI shells, color chips, and product copy around orchestration for health and life sciences. Use it as a domain-specific brand-system reference, not as a standalone Radial company page. Source: X/@secondeight_, 2026-04-09; Source: local image artifact, 2026-07-03

21 Fonts for your UI Design Projects by UI Abraham

21 Fonts for your UI Design Projects by UI Abraham https://t.co/bUQOZy6TiY - @AliGrids | Mon 16, Mar | 243 likes, 326 bookmarks

Takeaway: Fonts — Picks & Free preserves this as a typography moodboard artifact, not a canonical 21-font list. Local media contains only the cover card, and self-thread shortlinks resolve to X photo pages rather than recoverable font names; do not promote specific fonts from this row without the actual images. Source: X/@AliGrids, Mon 16, Mar; Source: local artifact review, 2026-07-01

SaaS dashboard cheatsheet (bookmark this) :

SaaS dashboard cheatsheet (bookmark this) : - Typography: Inter. 14px body, -0.2px letter spacing - Sidebar width: 240px. Always. - Table row height: 48px minimum for scanability - Primary action: top right, never buried - Empty states: illustration + CTA, not just No data - https://t.co/EcJExy4G7I - @Tanjim38 | Sun 12, Apr | 247 likes, 305 bookmarks

Takeaway: Promoted to Dashboard Design System. The checklist rules are supported by the local CloseCRM image: fixed sidebar rhythm, compact stats, top-right primary action, 48px-class rows, and empty/action placement belong together as a dashboard scanability system. Source: X/@Tanjim38 and local image review, 2026-07-04

designs i made this week

designs i made this week which one do you like most? https://t.co/wOL6vk92FY - @pankajstwt | Sun 01, Feb | 578 likes, 290 bookmarks

Takeaway: Hub-only visual reference. The four reviewed images are polished hero-composition studies: astronaut/focus deep-space art direction, a Neurix AI-chat hero with pink/blue vertical bars, a finance cloud/sea hero, and a Lensmart eye/contact-lens closeup. Useful for full-bleed cinematic hero direction and logo-strip trust framing; the self-thread is only a booking CTA. Source: X/@pankajstwt, Sun 01, Feb; Source: local image artifact review, 2026-07-02

Footer design exploration

Footer design exploration https://t.co/U1wfR04H8E - @Brennan_designs | Sat 14, Mar | 512 likes, 236 bookmarks

Takeaway: Promoted to the 2026-07-04 deep-review section as a hub-only editorial-footer reference. Source: X/@Brennan_designs and local image review, 2026-07-04

If you design or write B2B ads, this website is gold

If you design or write B2B ads, this website is gold. A curated library of high-performing Meta & LinkedIn ads with breakdowns. Check out: https://t.co/SmIwba0ru8 https://t.co/qJloLQNIXz - @kail_designs | Sat 14, Mar | 129 likes, 202 bookmarks

Takeaway: Adfolio is a B2B ad reference library rather than a package or tool to install. The reviewed video shows a practical inspiration UI: Ads/Landing Pages/About navigation, filters for all ads, industry, platform, offer, and angle, a sponsor CTA, newsletter capture, and per-card "Landing page" / "Breakdown" routes for examples such as Pumble, TestGorilla, Gusto, Weglot, and Sentry. The live source returned a Vercel Security Checkpoint/429 during review, so the durable evidence is the X text plus local visual artifact, not an independently crawled site snapshot. Source: X/@kail_designs, Sat 14, Mar; Source: local contact sheet /tmp/xreview-frames/2032675970889691655.jpg, reviewed 2026-07-01

Love this playful CSS UI motion ページネーション👌

Love this playful CSS UI motion ページネーション👌 https://t.co/FijEp1BIfx - @AliGrids | Sun 12, Apr | 266 likes, 150 bookmarks

Takeaway: Demo video attached. Source: X/@AliGrids, Sun 12, Apr

Every design studio wants to design your homepage

Every design studio wants to design your homepage. Nobody wants to design your settings page. We do. Settings. Configurations. Permissions. Admin panels. The screens that quietly determine whether your users stay or churn. Not glamorous. Not portfolio-worthy. But the reason https://t.co/cfYZSE70... - @Tanjim38 | Mon 13, Apr | 130 likes, 98 bookmarks

Takeaway: Promoted to Settings and Admin Surfaces. The reviewed CloseCRM image shows why settings work is product work: a settings/admin surface has to organize navigation, data-management tabs, storage usage, module-level tables, growth signals, row actions, retention policies, and upgrade pressure without turning into a junk drawer. The self-thread CTA resolves to a Cal.com booking page, so it is contact context rather than a source artifact. Source: X/@Tanjim38, Mon 13, Apr; Source: local image review, 2026-07-03

day 3/31 of building Princeton Tower Defense:

day 3/31 of building Princeton Tower Defense: content spike! 10 new enemies, swamp region, troop updates, better ranged indicators, and another UI pass with a new swamp region and levels shipped. content velocity is only good if the information architecture scales with it. https://t.co/2lZYUzafZd - @kevskgs | Sun 15, Mar | 8 likes, 4 bookmarks

Takeaway: Promoted to Princeton Tower Defense. Day 3 is the content/IA pressure point: the screenshot shows a swamp map, selected Mathey Knight, wave/currency/lives, speed/camera controls, tower tray, and spell tray, while the post adds 10 new enemies, swamp region work, troop updates, and ranged indicators. The design lesson is that content velocity only works when the shell can still explain the system. Source: X/@kevskgs and local image review, 2026-07-04

day 5/31 of building Princeton Tower Defense:

day 5/31 of building Princeton Tower Defense: the project stopped feeling like a dev build. first major HUD/menu overhaul, better imagery, cleaner starting resources, fewer rough edges, and a much clearer shell across both desktop and mobile. the player’s first trust decision https://t.co/yPZOFd... - @kevskgs | Tue 17, Mar | 10 likes, 3 bookmarks

Takeaway: Promoted to Princeton Tower Defense. Day 5 is the shell-trust pass: the artifact shows cleaner top/bottom HUD chrome, desktop/mobile controls, selected Tenor state, spell/tower trays, and a battlefield that reads more like a shipped game than a canvas dev build. The reusable UI rule is that the shell is the player's first trust decision. Source: X/@kevskgs and local image review, 2026-07-04

day 5

day 5. shell design matters because the UI is the first interface contract the player signs. demo: https://t.co/Gy4Rc0oOlV - @kevskgs | Tue 17, Mar | 6 likes, 3 bookmarks

Takeaway: Reviewed as a source-link duplicate of the already-promoted Princeton TD day 5 shell-design artifact. The resolved Vercel demo shell repeated the campaign-select text and did not add design evidence beyond the richer day 5 post/image already preserved on Princeton Tower Defense. Source: X/@kevskgs, reviewed 2026-07-04

@binsquares Broski, I am replacing free vercel plan + $20 supabase plan with ...

@binsquares Broski, I am replacing free vercel plan + $20 supabase plan with a $250/m dedicated server + k3s + Flux CD + Envoy Gateway + Supabase self-hosted + Cloud Native Postgres Operator + Redis + Qdrant. PaaS is fckin ded. 🥹 - @BadAINoData | Fri 24, Apr | 2 likes, 1 bookmarks

Takeaway: Promoted to Coolify as a concrete anti-PaaS stack signal: a dedicated server plus k3s, Flux CD, Envoy Gateway, self-hosted Supabase, CloudNativePG, Redis, and Qdrant replacing small managed Vercel/Supabase plans. Source: X/@BadAINoData, reviewed 2026-07-04

Batch 151–512 — Dedicated-Page Cross-Ref (3 entries)

/zero-tech-debt

/zero-tech-debt https://t.co/EN7iHEulA7 - @iamsahaj_xyz | Thu 14, May | 970 likes, 1,447 bookmarks

Takeaway: Deep review found the full SKILL.md in the self-thread/artifact reply and installed it as zero-tech-debt. The pattern is a post-change cleanup pass: state the intended end state, search real callers, delete dead compatibility, reshape around the final product surface, centralize shared rules, and verify the deleted assumptions. See Zero Tech Debt. Source: X/@iamsahaj_xyz and local visual review, 2026-07-01

I know this is an unpopular view but I prefer to do a lot of work in planning...

I know this is an unpopular view but I prefer to do a lot of work in planning and get it reviewed by my virtual CEO, DevEx manager, designer and Eng manager in GStack before clicking approve on a plan But the upside is usually I can one shot land it to main with minimal rework - @garrytan | Mon 20, Apr | 498 likes, 422 bookmarks

Takeaway: Reviewed and promoted to Quality Review Stack and Garry Tan. The durable pattern is plan review as preflight: run a proposed implementation through specialized reviewer agents before approving the build loop, then use the reviewed plan to reduce post-generation rework. Source: X/@garrytan, reviewed 2026-07-04

Design a bento grid in @framer but make it Voronoi diagram

Design a bento grid in @framer but make it Voronoi diagram https://t.co/qks47Ly3HP - @alexprokhorov | Tue 21, Apr | 535 likes, 367 bookmarks

Takeaway: Promoted to Voronoi Bento Layouts. The reviewed light demo shows standard product modules - logo wall, analytics chart, table, prompt card, shortcut controls, and dotted globe - clipped into organic Voronoi cells. Use it when a landing-page feature grid needs a crafted editorial skeleton without losing module scannability. Source: X/@alexprokhorov, 2026-04-21; Source: local artifact, reviewed 2026-07-03

Newest 55 — Jun 2026 sync (Fable 5 design wave)

Animation vocabulary for AI prompts

To get good animations from an AI you need to get good at telling it what you want — stagger, ease-in-out, etc. Full glossary at animations.dev - @emilkowalski | 2026-06-08 | 5,300 likes

Takeaway: Named motion patterns for prompting agents. Pairs with design-engineering-polish and Text-to-Lottie. Source: X/@emilkowalski, 2026-06-08

Claude Fable 5 — one-shot landing page

Claude Fable 5 just one-shotted this landing page — prompts by @bogdan_qclay - @alexprokhorov | 2026-06-10 | 3,054 likes

Takeaway: Claude Fable 5 design/motion capability demo, not a durable standalone tool. Local media review found a polished Lumio finance landing page with finance-specific narrative sections (raw data → anomaly detection → cash-runway forecast), glassy integration cards, and coherent CTA/navigation. Route this as evidence for taste-gated agent design work: the model can execute a strong direction, but the moat is still knowing what good looks like. Source: X/@alexprokhorov, 2026-06-10

Fable 5 + Aura Neon Oiran landing page

Before Fable 5 was pulled, we used it to prompt this landing page. It was ahead of its time. - @MengTo | 2026-06-13 | 1,003 bookmarks

Takeaway: Claude Fable 5 and Aura produced a cinematic game/RPG landing-page template, not a generic SaaS hero. Deep video review shows a portal hero, character/class panels, media-card carousels, dark CTA blocks, and consistent high-contrast serif/display typography; Aura's live template page positions Neon Oiran as a gaming/immersive-entertainment template with GSAP/WebGL/interactivity. Route as art-directed landing-page evidence, with the Fable availability caveat still active. Source: X/@MengTo, 2026-06-13; Source: Aura Neon Oiran template, 2026-07-01

Suminagashi ink fluid motion (Fable 5)

Claude Fable 5でどこまで表現できるのか — インクが流体みたいに溶け合う演出 - @hayashimon1 | 2026-06-10 | 14,929 likes

Takeaway: Deep review confirms this is more than a generic "AI made motion" clip. The local video shows a polished suminagashi interface with Japanese title typography, paper texture, ink plumes, Three.js stable-fluid motion, color swatches, a color picker, auto演出 toggle, and a wash/reset control. Route to Claude Fable 5, Motion Primitives, and Design and Animation as a motion/taste reference; do not create a standalone tool page unless the underlying implementation is published. Source: X/@hayashimon1 thread and visual artifact, 2026-06-10

Got Fable 5? Upgrade main projects first

Got your hands on Claude Fable 5? The first thing you should do is upgrade your main projects with it - @meta_alchemist | 2026-06-09 | 3,703 likes

Takeaway: Use Claude Fable 5 window on existing codebases before experiments. Source: X/@meta_alchemist, 2026-06-09

Taste is an eval you haven't written

the cost of shipping code went to zero. taste didn't — taste is just an eval you haven't written down yet - @sdianahu | 2026-06-04 | 624 likes, 566 bookmarks

Takeaway: The Eval Loop (Slop Is an Output Problem) already owns the synthesis. For design, the thread is useful because it translates "taste" into a failure taxonomy: read many real traces, label what failed, group failures into product-specific criteria, then evaluate whether the system did the job. This belongs with design-taste and product-eval thinking, not a separate aesthetic philosophy page. Source: X/@sdianahu thread, 2026-06-04

Cool internet things pt. 9

cool internet things pt. 9: digital MoMA gallery, personal "digital home", interface experiments, a self organizing inbox, and the scale of all living things - @jonaasw1 | 2026-06-22

Takeaway: Promoted to Creative Web Interaction References as a second creative-web source shelf. The local screenshots show Portal's collaborative gallery, aileenland's personal map/site, and Neal.fun's biological scale interface; keep Ryan Stephen and Feather as linked sources for interface experiments and self-organizing inbox ideas. Source: X/@jonaasw1, 2026-06-22; Source: local image artifact review, 2026-07-02

ReUI shadcn/ui Figma Design System

Introducing the free @shadcn Figma Design System, created by the ReUI team: all components, variables/design tokens, variants/states, and examples from shadcn/ui docs. - @reui_io | 2026-06-18

Takeaway: Promoted to Shadcn UI Ecosystem, Shadcn Registry Directory (Top Blocks), and Component Library Sources as a Figma/token/state companion for shadcn work. It is a design-source artifact, not a code package or CLI registry; implementation authority remains the local shadcn/source components. Source: X/@reui_io, 2026-06-18; Source: Figma Community file, 2026-07-02

shadcn component-catalog workbench

Pro-tip when extending or working with shadcn or any other design system: build a component catalog in docs, then use CardAction and DropdownMenu to open each source file. - @uixmat | 2026-06-21

Takeaway: Promoted to Shadcn UI Ecosystem and Component Library Sources as the local design-system workbench rule: component docs should preview variants/states and route each card back to editable source. The reviewed video shows a code editor beside a dark component catalog with selection controls, motion panels, toggles, layout pickers, primitives, chart selectors, custom controls, color pickers, and feedback components. Source: X/@uixmat and local video contact sheet review, 2026-07-04

2026-06-28 Coverage Catch-Up (23 parked records)