Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Building a mobile app ui SHOULD be this easy. 1. Design in Figma 2. Open ExpressionUI plugin 3. Export the render data (not code) Display your UI in Flutter, React-Native, SwiftUI, or Kotlin. No generated code for you to maintain or edit. Expression UI plugin in progress Built with... show more

Dane Mackier

2,231 subscribers

14,317 views • 2 years ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Just so you know. This approach also works in React Native This UI was not built with react code 👀

Just so you know. This approach also works in React Native This UI was not built with react code 👀

Dane Mackier

41,874 views • 2 years ago

Code Connect is now out of beta and with new improvements (!!) → Code Connect snippets in the component playground → A new and faster setup process → Support for React, React Native, SwiftUI, Compose, and more coming soon → Now available for supported UI Kits #Config2024

Code Connect is now out of beta and with new improvements (!!) → Code Connect snippets in the component playground → A new and faster setup process → Support for React, React Native, SwiftUI, Compose, and more coming soon → Now available for supported UI Kits #Config2024

Figma

66,471 views • 2 years ago

bye bye UI designers... I made this design in 2 days, 12 hours a day without drawing a single thing in figma or writing any code vibing Gemini Flash 3, all in 2 days.

bye bye UI designers... I made this design in 2 days, 12 hours a day without drawing a single thing in figma or writing any code vibing Gemini Flash 3, all in 2 days.

Jogi

37,396 views • 7 months ago

I stopped collecting random inspo. These are the only UI + vibecoding resources I keep opening. 1. EvilCharts — animated React charts for dashboards 2. Rewamp UI — free open-source components, blocks, and landing pages 3. Refero — real product UI patterns and screens for reference 4. Bencho — AI product UI components for faster builds 5. Inspora — design inspiration for modern product UI 6. Neuform — design-to-code resources for AI UI work 7. Open Design — DESIGN.md resources so AI builds with clearer UI rules Save this before your next build 👀

I stopped collecting random inspo. These are the only UI + vibecoding resources I keep opening. 1. EvilCharts — animated React charts for dashboards 2. Rewamp UI — free open-source components, blocks, and landing pages 3. Refero — real product UI patterns and screens for reference 4. Bencho — AI product UI components for faster builds 5. Inspora — design inspiration for modern product UI 6. Neuform — design-to-code resources for AI UI work 7. Open Design — DESIGN.md resources so AI builds with clearer UI rules Save this before your next build 👀

Hey Detya

47,687 views • 8 days ago

Still can’t believe this… I built a full stock app from scratch in 3 minutes. with nothing but text prompts. no code. no design. Base44 auto-generated UI, backend, database, and deployed it. 1-person startup era is officially here:👇

Still can’t believe this… I built a full stock app from scratch in 3 minutes. with nothing but text prompts. no code. no design. Base44 auto-generated UI, backend, database, and deployed it. 1-person startup era is officially here:👇

Shruti

55,800 views • 1 year ago

New Llama.cpp UI is a blessing for the local AI world 🌎 - Blazing fast, beautiful, and private (ofc) - Use 150,000+ GGUF models in a super slick UI - Drop in PDFs, images, or text documents - Branch and edit conversations anytime - Parallel chats and image processing - Math and code rendering - Constrained generation with JSON schema supported Easy setup + open-source + community-built 🔥

New Llama.cpp UI is a blessing for the local AI world 🌎 - Blazing fast, beautiful, and private (ofc) - Use 150,000+ GGUF models in a super slick UI - Drop in PDFs, images, or text documents - Branch and edit conversations anytime - Parallel chats and image processing - Math and code rendering - Constrained generation with JSON schema supported Easy setup + open-source + community-built 🔥

Victor M

161,381 views • 11 months ago

The 𝚎𝚡𝚙𝚘-𝚠𝚒𝚍𝚐𝚎𝚝𝚜 alpha is here! Now you can build iOS home screen widgets and Live Activities as React components. No separate Xcode target. No manual App Groups. No SwiftUI layout code. Write your widget in @expo/ui, and Continuous Native Generation handles the rest. ◆ Interactive buttons and toggles on the home screen ◆ Live Activities for the Lock Screen and Dynamic Island ◆ One React component, native rendering under the hood Details and code to get started in the blog below ↓

The 𝚎𝚡𝚙𝚘-𝚠𝚒𝚍𝚐𝚎𝚝𝚜 alpha is here! Now you can build iOS home screen widgets and Live Activities as React components. No separate Xcode target. No manual App Groups. No SwiftUI layout code. Write your widget in @expo/ui, and Continuous Native Generation handles the rest. ◆ Interactive buttons and toggles on the home screen ◆ Live Activities for the Lock Screen and Dynamic Island ◆ One React component, native rendering under the hood Details and code to get started in the blog below ↓

Expo

110,593 views • 7 months ago

Hot Take 👀 The new Glass slider in iOS 27 should be the benchmark for every mobile OS. I mean, this takes customization to a completely different level. Users can actually control how much Liquid Glass they want instead of being forced into a single design choice. Meanwhile, One UI can barely offer this level of UI customization 😌 When it comes to UI/UX, Apple is the king. Samsung, prove me wrong by copying this for One UI 👀🔥

Hot Take 👀 The new Glass slider in iOS 27 should be the benchmark for every mobile OS. I mean, this takes customization to a completely different level. Users can actually control how much Liquid Glass they want instead of being forced into a single design choice. Meanwhile, One UI can barely offer this level of UI customization 😌 When it comes to UI/UX, Apple is the king. Samsung, prove me wrong by copying this for One UI 👀🔥

Tarun Vats

23,148 views • 3 months ago

I’ve completed 1/3 of the UI/UX design for the Chog Portal, and it has been a pleasure working with . His productivity is truly remarkable. This design phase was done in Figma, and several upcoming features will be implemented using the Rive. I’ll share more once they are released.

I’ve completed 1/3 of the UI/UX design for the Chog Portal, and it has been a pleasure working with . His productivity is truly remarkable. This design phase was done in Figma, and several upcoming features will be implemented using the Rive. I’ll share more once they are released.

ZhangLiu

18,011 views • 10 months ago

You can now use Figma for FREE with this tool. It's called Penpot. An open-source design tool that mirrors Figma's layout and workflow, free, self-hostable → MCP server lets AI agents edit your designs directly → Free Dev Mode with instant CSS, SVG, and HTML → Native design tokens keep design & code in sync → Real-time collaboration built in 100% Free. Open source.

You can now use Figma for FREE with this tool. It's called Penpot. An open-source design tool that mirrors Figma's layout and workflow, free, self-hostable → MCP server lets AI agents edit your designs directly → Free Dev Mode with instant CSS, SVG, and HTML → Native design tokens keep design & code in sync → Real-time collaboration built in 100% Free. Open source.

Simplifying AI

57,267 views • 2 months ago

You should put a pixel-perfect version of your app on your homepage Why? 1. Signing up for new things is annoying if the UI sucks 2. People exaggerate agent-friendliness 3. They just want to do a thing Show a common use case being done with an agent. If your app is not bad, this will increase your conversion rate. This used to be hard to build and maintain, now it is easy. You should probably do it.

You should put a pixel-perfect version of your app on your homepage Why? 1. Signing up for new things is annoying if the UI sucks 2. People exaggerate agent-friendliness 3. They just want to do a thing Show a common use case being done with an agent. If your app is not bad, this will increase your conversion rate. This used to be hard to build and maintain, now it is easy. You should probably do it.

Chris Frantz

76,721 views • 11 days ago

Fable 5 just dropped and someone already built a $10k-looking website with it. Here's the full workflow The smooth scrolling, the animations, the transitions, all built with Fable 5. Here's how to get the same result instead of a generic template. 1. Steal a direction first. Go to Mobbin or Godly and find a site whose feel you love. Screenshot it. Fable copies a vibe far better than it invents one. 2. Grab real components. Pull animation-ready blocks from Aceternity UI or Magic UI. These are built for exactly this look (scroll reveals, parallax, gradients). 3. Prompt Fable with all of it. Switch to Fable 5 in Claude Code, drop in your screenshots and the component references, and describe the sections and scroll behavior you want. Let it plan before it builds. 4. Animate with the right tools. Tell it to use GSAP with ScrollTrigger for scroll effects, or Framer Motion for React. This is what separates "nice" from "$10k." 5. Iterate on feel, not code. Preview it, then give Fable specific notes ("slower fade, more spacing on mobile") until it lands. Bookmark this

Fable 5 just dropped and someone already built a $10k-looking website with it. Here's the full workflow The smooth scrolling, the animations, the transitions, all built with Fable 5. Here's how to get the same result instead of a generic template. 1. Steal a direction first. Go to Mobbin or Godly and find a site whose feel you love. Screenshot it. Fable copies a vibe far better than it invents one. 2. Grab real components. Pull animation-ready blocks from Aceternity UI or Magic UI. These are built for exactly this look (scroll reveals, parallax, gradients). 3. Prompt Fable with all of it. Switch to Fable 5 in Claude Code, drop in your screenshots and the component references, and describe the sections and scroll behavior you want. Let it plan before it builds. 4. Animate with the right tools. Tell it to use GSAP with ScrollTrigger for scroll effects, or Framer Motion for React. This is what separates "nice" from "$10k." 5. Iterate on feel, not code. Preview it, then give Fable specific notes ("slower fade, more spacing on mobile") until it lands. Bookmark this

Fokki

72,175 views • 3 months ago

React Native now has its own shadcn/ui equivalent — introducing 𝗡𝗮𝘁𝗶𝘃𝗲𝗨𝗜. If you love the flexibility of copying customisable components directly into your project (avoiding heavy, dependency-laden packages), NativeUI is designed for you. 𝗡𝗮𝘁𝗶𝘃𝗲𝗨𝗜 offers beautifully crafted, accessible components tailored for React Native, following the same copy-paste philosophy as shadcn/ui. Built with 𝗡𝗮𝘁𝗶𝘃𝗲𝗪𝗶𝗻𝗱 for fast, declarative, and flexible styling optimised for React Native. ➡️ 𝗖𝗼𝗽𝘆 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗰𝗼𝗱𝗲 𝗱𝗶𝗿𝗲𝗰𝘁𝗹𝘆 𝗶𝗻𝘁𝗼 𝘆𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 — no black-box dependencies required. ➡️ 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗮𝗿𝗲 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗹𝗲 𝗯𝘆 𝗱𝗲𝗳𝗮𝘂𝗹𝘁, supporting screen readers and keyboard navigation, and designed to align with native iOS and Android UX patterns. ➡️ 𝗙𝘂𝗹𝗹 𝗰𝗼𝗻𝘁𝗿𝗼𝗹 𝗼𝘃𝗲𝗿 𝘆𝗼𝘂𝗿 𝗨𝗜 without rebuilding common elements like buttons, inputs, or sliders from scratch. ➡️ 𝗖𝗼𝗺𝗽𝗮𝘁𝗶𝗯𝗹𝗲 𝘄𝗶𝘁𝗵 𝗘𝘅𝗽𝗼 𝗮𝗻𝗱 𝘃𝗮𝗻𝗶𝗹𝗹𝗮 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝗽𝗿𝗼𝗷𝗲𝗰𝘁𝘀, but not yet integrated with Tamagui’s styling system (future support may be planned). ➡️ 𝗦𝘂𝗽𝗽𝗼𝗿𝘁𝘀 𝘁𝗵𝗲𝗺𝗶𝗻𝗴 𝘃𝗶𝗮 𝗡𝗮𝘁𝗶𝘃𝗲𝗪𝗶𝗻𝗱 — though you’ll need to wire it up manually using Tailwind variables, context providers, and config files. Note: The term “install” in the documentation refers to using the shadcn CLI (e.g., npx shadcn@latest add component) to fetch and copy component code into your project, not adding a package to your dependencies. NativeUI isn’t a plug-and-play library; it’s a lightweight toolbox that empowers you to shape your UI with precision and control. 𝗪𝗵𝗮𝘁’𝘀 𝘆𝗼𝘂𝗿 𝗽𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲: npm install a pre-built UI kit for speed, or copy/paste NativeUI components for ultimate customisation? #ReactNative #KeyboardUX #MobileDev #OpenSource #JSDev #Performance #iOSDev #KeyboardExtensions #ReactNativeKeyboard #UIUX #shadcn #nativeui

React Native now has its own shadcn/ui equivalent — introducing 𝗡𝗮𝘁𝗶𝘃𝗲𝗨𝗜. If you love the flexibility of copying customisable components directly into your project (avoiding heavy, dependency-laden packages), NativeUI is designed for you. 𝗡𝗮𝘁𝗶𝘃𝗲𝗨𝗜 offers beautifully crafted, accessible components tailored for React Native, following the same copy-paste philosophy as shadcn/ui. Built with 𝗡𝗮𝘁𝗶𝘃𝗲𝗪𝗶𝗻𝗱 for fast, declarative, and flexible styling optimised for React Native. ➡️ 𝗖𝗼𝗽𝘆 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗰𝗼𝗱𝗲 𝗱𝗶𝗿𝗲𝗰𝘁𝗹𝘆 𝗶𝗻𝘁𝗼 𝘆𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 — no black-box dependencies required. ➡️ 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗮𝗿𝗲 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗹𝗲 𝗯𝘆 𝗱𝗲𝗳𝗮𝘂𝗹𝘁, supporting screen readers and keyboard navigation, and designed to align with native iOS and Android UX patterns. ➡️ 𝗙𝘂𝗹𝗹 𝗰𝗼𝗻𝘁𝗿𝗼𝗹 𝗼𝘃𝗲𝗿 𝘆𝗼𝘂𝗿 𝗨𝗜 without rebuilding common elements like buttons, inputs, or sliders from scratch. ➡️ 𝗖𝗼𝗺𝗽𝗮𝘁𝗶𝗯𝗹𝗲 𝘄𝗶𝘁𝗵 𝗘𝘅𝗽𝗼 𝗮𝗻𝗱 𝘃𝗮𝗻𝗶𝗹𝗹𝗮 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝗽𝗿𝗼𝗷𝗲𝗰𝘁𝘀, but not yet integrated with Tamagui’s styling system (future support may be planned). ➡️ 𝗦𝘂𝗽𝗽𝗼𝗿𝘁𝘀 𝘁𝗵𝗲𝗺𝗶𝗻𝗴 𝘃𝗶𝗮 𝗡𝗮𝘁𝗶𝘃𝗲𝗪𝗶𝗻𝗱 — though you’ll need to wire it up manually using Tailwind variables, context providers, and config files. Note: The term “install” in the documentation refers to using the shadcn CLI (e.g., npx shadcn@latest add component) to fetch and copy component code into your project, not adding a package to your dependencies. NativeUI isn’t a plug-and-play library; it’s a lightweight toolbox that empowers you to shape your UI with precision and control. 𝗪𝗵𝗮𝘁’𝘀 𝘆𝗼𝘂𝗿 𝗽𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲: npm install a pre-built UI kit for speed, or copy/paste NativeUI components for ultimate customisation? #ReactNative #KeyboardUX #MobileDev #OpenSource #JSDev #Performance #iOSDev #KeyboardExtensions #ReactNativeKeyboard #UIUX #shadcn #nativeui

The React Native Rewind

118,542 views • 1 year ago

You can now run Grok inside Claude Code and Codex, using your existing subscription. it's called grok-plugin. Grok’s genuinely good right now, but if your setup lives in Claude Code and Codex, switching to use it is a pain. this solves that exact issue: > Grok in Claude Code and Codex > directly auths through X Premium or Supergrok, no api key > your workflow and subagents stay untouched free and open source. the low-friction way to test Grok in the tools you already use.

You can now run Grok inside Claude Code and Codex, using your existing subscription. it's called grok-plugin. Grok’s genuinely good right now, but if your setup lives in Claude Code and Codex, switching to use it is a pain. this solves that exact issue: > Grok in Claude Code and Codex > directly auths through X Premium or Supergrok, no api key > your workflow and subagents stay untouched free and open source. the low-friction way to test Grok in the tools you already use.

Alvaro Cintas

25,994 views • 1 month ago

Check this!! A 100% open-source toolkit to work with LLMs. Transformer Lab is an app to experiment with LLMs: - Train, fine-tune, or chat. - One-click LLM download (DeepSeek, Gemma, etc.) - Drag-n-drop UI for RAG. - Built-in logging, and more. 100% local!

Check this!! A 100% open-source toolkit to work with LLMs. Transformer Lab is an app to experiment with LLMs: - Train, fine-tune, or chat. - One-click LLM download (DeepSeek, Gemma, etc.) - Drag-n-drop UI for RAG. - Built-in logging, and more. 100% local!

Avi Chawla

74,961 views • 1 year ago

Paste images and files directly into Claude Code and other AI coding agents in the latest version of Termius for iPhone and iPad. Add images and files using: → Copy & paste → Drag & drop → Share from Photos or any other app Perfect for screenshots, UI mockups, diagrams, error messages, or anything else your agent needs to see.

Paste images and files directly into Claude Code and other AI coding agents in the latest version of Termius for iPhone and iPad. Add images and files using: → Copy & paste → Drag & drop → Share from Photos or any other app Perfect for screenshots, UI mockups, diagrams, error messages, or anything else your agent needs to see.

Termius

27,127 views • 2 months ago

80% of building mobile apps is making sure your trays are smooth. i've been working on an app that lets you display events in countdown widgets on iOS. many others like this, but i did not like the UX or their widget design so i made something that blends in well with your home screen. 📲 public testflight dropping soon. hit me up for early access. and yes, this is react native ⚛︎

80% of building mobile apps is making sure your trays are smooth. i've been working on an app that lets you display events in countdown widgets on iOS. many others like this, but i did not like the UX or their widget design so i made something that blends in well with your home screen. 📲 public testflight dropping soon. hit me up for early access. and yes, this is react native ⚛︎

pugson

39,185 views • 5 months ago

Introducing the official Unity plugin for Grok Build - bringing our engineering guidance directly to your terminal in our continued effort to meet you where you work. Unlock 30+ Unity skills covering UI Toolkit, Shader Graph, multiplayer, physics, and more with nothing to configure by hand. One install, no manual setup, built by Unity. 🔗 Get started:

Introducing the official Unity plugin for Grok Build - bringing our engineering guidance directly to your terminal in our continued effort to meet you where you work. Unlock 30+ Unity skills covering UI Toolkit, Shader Graph, multiplayer, physics, and more with nothing to configure by hand. One install, no manual setup, built by Unity. 🔗 Get started:

Unity for Games

64,210 views • 5 days ago

If typing fast in your app feels like wading through mud, you need useNativeState. Every TextField in RN has felt slightly off for years; Expo UI just shipped the fix with the new useNativeState hook. Instead of trying to keep the native input and react state in sync on each keystroke, useNativeState handles the state completely on the native side. React (JS thread) only reads the value when it needs it e.g. onSubmit, using a lightweight reference. Make your app faster, read the full blog ↓

If typing fast in your app feels like wading through mud, you need useNativeState. Every TextField in RN has felt slightly off for years; Expo UI just shipped the fix with the new useNativeState hook. Instead of trying to keep the native input and react state in sync on each keystroke, useNativeState handles the state completely on the native side. React (JS thread) only reads the value when it needs it e.g. onSubmit, using a lightweight reference. Make your app faster, read the full blog ↓

Beto

33,855 views • 4 months ago