Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

We designed a UI kit for founders vibe-coding AI products. It sits on shadcn/ui, a solid foundation most of these tools already reach for. We've added our own visual direction and the UX patterns AI products need. Copy one prompt into Claude Code or Cursor and your prototype picks... show more

Chris Halaska

15,234 subscribers

19,105 Aufrufe • vor 7 Tagen •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

18 Kommentare

Profilbild von Chris Halaska

Chris Halaskavor 7 Tagen

It's in beta. We'll keep adding patterns as studio work surfaces them. If you try it, we'd like to see the result. Send us what it did to your screens, good or bad.

Profilbild von soliman

solimanvor 6 Tagen

the demo UI is bad even in the after view.

Profilbild von Ayush Deshmukh

Ayush Deshmukhvor 6 Tagen

Its great A small thing I noticed is that AI chat section where the container width is more than the AI input box which feels a bit off. Why because in most AI apps the messaging container is of the same width as input box. I might be wrong but I think you should look into it.

Profilbild von Phil

Philvor 7 Tagen

Love this!

Profilbild von Chris Halaska

Chris Halaskavor 7 Tagen

Thanks Phil! still a wip

Profilbild von Phil

Philvor 7 Tagen

I'm giving it a try right now on one of my projects...

Profilbild von Preyforge

Preyforgevor 6 Tagen

i’ve found the handoff is the real test: a prompt that generates a nice screen still needs someone to walk the live path and catch where the next click becomes guesswork.

Profilbild von Benji T

Benji Tvor 6 Tagen

UI kits for AI products are becoming the default. shadcn base plus patterns agents actually need beats another pretty Figma dump.

Profilbild von Victor Amelinckx

Victor Amelinckxvor 5 Tagen

Great work!

Profilbild von Kimi Nguyen

Kimi Nguyenvor 6 Tagen

the focus on UX patterns for AI products is key, but founders need more than just visuals

Profilbild von Cam

Camvor 7 Tagen

Clean!

Profilbild von Brian Hadu

Brian Haduvor 6 Tagen

using shadcn/ui is a good choice, but it might limit unique branding for founders

Profilbild von catman

catmanvor 6 Tagen

the “one prompt” handoff is useful, but what happens when the prototype needs a pattern your kit doesn’t cover? i’d be curious to see which ai-specific ux decisions mattered most beyond shadcn’s defaults.

Profilbild von Mauricio Gallmur

Mauricio Gallmurvor 6 Tagen

The kit is the moat. Most vibe-coded apps die on the last ten percent that looks off.

Profilbild von AlexNeto

AlexNetovor 6 Tagen

Great job! Love this and will definitely try it out

Profilbild von Brjan | AI Builder

Brjan | AI Buildervor 6 Tagen

using shadcn/ui as a base is smart, it’s great for rapid prototyping

Profilbild von Luke Miler

Luke Milervor 6 Tagen

cool!

Profilbild von vansh patel

vansh patelvor 6 Tagen

ok real question tho - if it sits on shadcn how much of the "visual direction" is actually yours vs just default shadcn styling

Ähnliche Videos

My lil side quest is live! 🫡 Voila, the visual AI devtool for builders Point at any UI, ask for what you want, and instantly turn it into code, prompts, copy, or tasks: →

My lil side quest is live! 🫡 Voila, the visual AI devtool for builders Point at any UI, ask for what you want, and instantly turn it into code, prompts, copy, or tasks: →

Luc Chaissac

12,370 Aufrufe • vor 2 Monaten

Are you just starting to write code for the 1st time with AI tools like Cursor? Use this prompt in your “Rules for AI”. It turns the AI into an *amazing* personal coding tutor that teaches you everything like a pro. Never get stuck in a project again. Full prompt below.

Are you just starting to write code for the 1st time with AI tools like Cursor? Use this prompt in your “Rules for AI”. It turns the AI into an amazing personal coding tutor that teaches you everything like a pro. Never get stuck in a project again. Full prompt below.

Mckay Wrigley

190,210 Aufrufe • vor 2 Jahren

Announcing the Style Guide in primeui. Customize your project theme with a shadcn-compatible token system. Preview it live with as many variants as you need on the canvas. Export clean, production-ready Next.js code in minutes. Prime UI gives you a strong foundation for your website, whether you build it yourself or with AI. It includes 200+ UI components, all crafted by humans with pixel-perfect quality, a solid design system, and clean code. Plan your site with the Sitemap tool. Explore content, layout ideas, and storytelling in Prototype. Shape the look and feel in Style Guide, then export everything to Next.js. You get more than just landing pages. You get a consistent foundation for your entire site, including Blog, Docs, Pricing, and more, without having to worry about architecture, content blocks, SEO, or performance. Available today.

Announcing the Style Guide in primeui. Customize your project theme with a shadcn-compatible token system. Preview it live with as many variants as you need on the canvas. Export clean, production-ready Next.js code in minutes. Prime UI gives you a strong foundation for your website, whether you build it yourself or with AI. It includes 200+ UI components, all crafted by humans with pixel-perfect quality, a solid design system, and clean code. Plan your site with the Sitemap tool. Explore content, layout ideas, and storytelling in Prototype. Shape the look and feel in Style Guide, then export everything to Next.js. You get more than just landing pages. You get a consistent foundation for your entire site, including Blog, Docs, Pricing, and more, without having to worry about architecture, content blocks, SEO, or performance. Available today.

Alex Barashkov

32,330 Aufrufe • vor 6 Monaten

I love the rise of free UI libraries built by designers who really care about the details. Beautiful UI has 17 polished patterns for AI-native products, from thinking and streaming states to tool calls, approval cards, and diffs. Every component includes the source code, so you can give it to your agent and adapt the interaction to your own product.

I love the rise of free UI libraries built by designers who really care about the details. Beautiful UI has 17 polished patterns for AI-native products, from thinking and streaming states to tool calls, approval cards, and diffs. Every component includes the source code, so you can give it to your agent and adapt the interaction to your own product.

Meng To

150,923 Aufrufe • vor 1 Monat

Turn any website into an AI-readable design system. Here's how: Google recently introduced the DESIGN.md specification: a file that helps AI agents understand a product’s design system. So we built a free tool for designers. Paste any website URL and Masumi’s DESIGN.md Generator extracts the brand’s colors, typography, components, spacing, and visual rules into an editable DESIGN.md file. Your designer can review it, tweak it, and hand it to Claude Code, Cursor, Codex, or any AI coding agent so the generated UI stays on-brand. Links below

albina

26,087 Aufrufe • vor 4 Monaten

We spent months building this so you don't have to figure it out alone. A free 7-day course that takes you from zero to building real things with AI, no coding background, no expensive tools, no fluff, just results. From 0 -> to Claude code expert, completely free: > In 7 days, you’ll learn vibe coding, set up Claude Code, build your first AI app, create a prompt-built website, automate a task with n8n, and deploy it live to a real URL. No theory, no filler, just a real project you can show people by the end of the week. For those who want to go further, we spent even longer building another one, designed for people who are genuinely interested in AI deep learning and launching products. From Expert to Your First $10k Product {You can find it on the link above as well} The complete masterclass, full-stack AI apps, Supabase, n8n automations, AI agents, Telegram bots, SaaS products built from scratch, Stripe, subscriptions, client work, freelancing, pricing and scaling. This is the course that turns the skill into actual income. Me and Noisy put everything we know into both of these, you can start free, build something real, then decide how far you want to take it.

We spent months building this so you don't have to figure it out alone. A free 7-day course that takes you from zero to building real things with AI, no coding background, no expensive tools, no fluff, just results. From 0 -> to Claude code expert, completely free: > In 7 days, you’ll learn vibe coding, set up Claude Code, build your first AI app, create a prompt-built website, automate a task with n8n, and deploy it live to a real URL. No theory, no filler, just a real project you can show people by the end of the week. For those who want to go further, we spent even longer building another one, designed for people who are genuinely interested in AI deep learning and launching products. From Expert to Your First $10k Product {You can find it on the link above as well} The complete masterclass, full-stack AI apps, Supabase, n8n automations, AI agents, Telegram bots, SaaS products built from scratch, Stripe, subscriptions, client work, freelancing, pricing and scaling. This is the course that turns the skill into actual income. Me and Noisy put everything we know into both of these, you can start free, build something real, then decide how far you want to take it.

Defileo🔮

695,073 Aufrufe • vor 4 Monaten

As we build AI-first products at Razorpay we wanted the interface to do more than just show answers or automate tasks. It should guide, respond and feel more intuitive and lively without feeling mechanical. That’s what led us to RazorSense, our design language for the AI era. Built around motion, context, emotion and the Razorpay glyph, it gives our products a sharper, more expressive way to communicate with customers. AI-first products need a new visual language. This is our attempt at building one. See it in action:

As we build AI-first products at Razorpay we wanted the interface to do more than just show answers or automate tasks. It should guide, respond and feel more intuitive and lively without feeling mechanical. That’s what led us to RazorSense, our design language for the AI era. Built around motion, context, emotion and the Razorpay glyph, it gives our products a sharper, more expressive way to communicate with customers. AI-first products need a new visual language. This is our attempt at building one. See it in action:

Shashank Kumar

49,362 Aufrufe • vor 2 Monaten

You don’t need a dev team anymore. You need one prompt. Zoer takes your idea and turns it into a fully working app, not just code, but a real product you can use. Here’s what it handles for you: • Database (already structured) • Backend (logic + APIs) • Frontend (clean, production-ready UI) • Auth (Google + email login) • Deployment (live in one click) Most AI tools stop at “here’s your code.” Zoer goes further: It builds the entire system and puts it live. From: “build me a CRM / SaaS / tool” To: A real, working product you can open, test, and share. Try it → No setup. No configs. No extra tools. This is what building should feel like in 2026.

You don’t need a dev team anymore. You need one prompt. Zoer takes your idea and turns it into a fully working app, not just code, but a real product you can use. Here’s what it handles for you: • Database (already structured) • Backend (logic + APIs) • Frontend (clean, production-ready UI) • Auth (Google + email login) • Deployment (live in one click) Most AI tools stop at “here’s your code.” Zoer goes further: It builds the entire system and puts it live. From: “build me a CRM / SaaS / tool” To: A real, working product you can open, test, and share. Try it → No setup. No configs. No extra tools. This is what building should feel like in 2026.

Tanvir

18,160 Aufrufe • vor 4 Monaten

This Claude 3.7 UI workflow is awesome And many vibe coders not aware of it: 1. Have Claude 3.7 to design whole UI screen by screen 2. Ask it to make a plan, break down into components 3. Turn into actual project By having Claude focus on just UI generation, it does a great job You can build beautiful UI without shadcn If you want to learn more about vibe coding beyond basics, join my community here: (also get free access to 10xCoder.Dev)

This Claude 3.7 UI workflow is awesome And many vibe coders not aware of it: 1. Have Claude 3.7 to design whole UI screen by screen 2. Ask it to make a plan, break down into components 3. Turn into actual project By having Claude focus on just UI generation, it does a great job You can build beautiful UI without shadcn If you want to learn more about vibe coding beyond basics, join my community here: (also get free access to 10xCoder.Dev)

Jason Zhou

747,082 Aufrufe • vor 1 Jahr

Do all shadcn/ui apps look the same? No. They don't have to. Think of shadcn/ui as a coloring template - it provides the outlines & structure. Black & white. A starting point. You get to fill it with your own unique colors and styles. And it's really easy. Here's an example:

Do all shadcn/ui apps look the same? No. They don't have to. Think of shadcn/ui as a coloring template - it provides the outlines & structure. Black & white. A starting point. You get to fill it with your own unique colors and styles. And it's really easy. Here's an example:

shadcn

392,598 Aufrufe • vor 1 Jahr

We just launched a new primitive for AI Walrus Memory gives your agents persistent, portable memory that you own, and it drops straight into the platforms you already build on. Anthropic Claude, OpenAI ChatGPT, and Google Gemini, you name it plus native MCP and SDKs, added in a few lines of code LIVE TODAY

We just launched a new primitive for AI Walrus Memory gives your agents persistent, portable memory that you own, and it drops straight into the platforms you already build on. Anthropic Claude, OpenAI ChatGPT, and Google Gemini, you name it plus native MCP and SDKs, added in a few lines of code LIVE TODAY

Adeniyi.sui

46,208 Aufrufe • vor 3 Monaten

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.

Irvin Zhan

301,000 Aufrufe • vor 7 Monaten

Google is making a bet on Vibe Coding tools by making it simpler for non-developers to create apps with AI. Gemini Canvas is soon to get a "Select and Ask" feature for "in-painting" of the selected UI area.

Google is making a bet on Vibe Coding tools by making it simpler for non-developers to create apps with AI. Gemini Canvas is soon to get a "Select and Ask" feature for "in-painting" of the selected UI area.

🚨 AI News | TestingCatalog

54,192 Aufrufe • vor 1 Jahr

Here is EVERY AI tool you need to be using in August 2026 I've personally used each for 100+ If you master them and use them all, you'll be a productivity MACHINE The list of the tools are down below. How to use each is in the video! • Best planning model: Fable 5 medium- smartest model out there. Use it to do all your ideation and planning • Best execution model: ChatGPT 5.6 sol medium- best bang for your buck. TONS of usage and incredibly smart • Best AI tool: ChatGPT Voice: the future of interfacing with technology • Best AI agent harness: ChatGPT Desktop app- can do anything any other AI agent can do, but does it better • Best model for building UI/UX/games: Claude Code w/ Claude Opus 5- this model gets a lot of hate. Some of it warranted, most of it not. NOTHING beats Opus 5 for UI • Local model: Qwen 3.6 27b on DGX Spark- best speed and intelligence ratio in local AI • Other must have tools: Buzz from Jack Dorsey. The future of AI is multiplayer, and this is the first true multiplayer AI platform out there

Here is EVERY AI tool you need to be using in August 2026 I've personally used each for 100+ If you master them and use them all, you'll be a productivity MACHINE The list of the tools are down below. How to use each is in the video! • Best planning model: Fable 5 medium- smartest model out there. Use it to do all your ideation and planning • Best execution model: ChatGPT 5.6 sol medium- best bang for your buck. TONS of usage and incredibly smart • Best AI tool: ChatGPT Voice: the future of interfacing with technology • Best AI agent harness: ChatGPT Desktop app- can do anything any other AI agent can do, but does it better • Best model for building UI/UX/games: Claude Code w/ Claude Opus 5- this model gets a lot of hate. Some of it warranted, most of it not. NOTHING beats Opus 5 for UI • Local model: Qwen 3.6 27b on DGX Spark- best speed and intelligence ratio in local AI • Other must have tools: Buzz from Jack Dorsey. The future of AI is multiplayer, and this is the first true multiplayer AI platform out there

Alex Finn

41,920 Aufrufe • vor 1 Monat

most people spend hours describing what they want to Claude Code this guy just browsed a catalog of thousands of animated UI components, found one he liked, and hit "copy prompt" that's it. the prompt goes into Claude Code and it builds it. > 21st(.)dev - a library of community-made components built for React, Next.js, Tailwind > every component has a ready-made prompt attached > you pick the effect, copy, paste, done no describing animations from scratch. no explaining what "smooth scroll" or "hover glow" means. someone already figured out the exact prompt that produces it. gap between people who know this exists and people who don't is measured in hours per project full walkthrough in the article below

most people spend hours describing what they want to Claude Code this guy just browsed a catalog of thousands of animated UI components, found one he liked, and hit "copy prompt" that's it. the prompt goes into Claude Code and it builds it. > 21st(.)dev - a library of community-made components built for React, Next.js, Tailwind > every component has a ready-made prompt attached > you pick the effect, copy, paste, done no describing animations from scratch. no explaining what "smooth scroll" or "hover glow" means. someone already figured out the exact prompt that produces it. gap between people who know this exists and people who don't is measured in hours per project full walkthrough in the article below

monokern

64,484 Aufrufe • vor 2 Monaten

ONE PROMPT AND ONE BUTTON NOW BUILDS A FULL SYSTEM, DATABASE, BACKEND, AND FRONTEND INCLUDED Most people still picture AI as something you ask questions to, then copy the answer into your own code by hand. A builder wired Claude into Obsidian through MCP instead, so a single written prompt becomes the actual spec for the system. Claude breaks that prompt into database schema, UI components, and API endpoints on its own, then writes, runs, and fixes the code until it actually works. MCP is what makes this possible, it lets the agent see the filesystem, installed packages, and running services before it starts building anything. The output isn't a code snippet sitting in a chat window, it's a live local app running on its own server, ready to open in a browser. What used to need a backend developer, a DevOps engineer, and two weeks now finishes in under fifteen minutes. See the full architecture and prompt structure below👇

ONE PROMPT AND ONE BUTTON NOW BUILDS A FULL SYSTEM, DATABASE, BACKEND, AND FRONTEND INCLUDED Most people still picture AI as something you ask questions to, then copy the answer into your own code by hand. A builder wired Claude into Obsidian through MCP instead, so a single written prompt becomes the actual spec for the system. Claude breaks that prompt into database schema, UI components, and API endpoints on its own, then writes, runs, and fixes the code until it actually works. MCP is what makes this possible, it lets the agent see the filesystem, installed packages, and running services before it starts building anything. The output isn't a code snippet sitting in a chat window, it's a live local app running on its own server, ready to open in a browser. What used to need a backend developer, a DevOps engineer, and two weeks now finishes in under fifteen minutes. See the full architecture and prompt structure below👇

wast3

20,348 Aufrufe • vor 2 Monaten

Why most AI products fail: Lessons from 50+ AI deployments at OpenAI, Google & Amazon Aish and Kiriti Badam have built 50+ enterprise AI products across companies like OpenAI, Google, Amazon, and Databricks. Based on these experiences, they’ve developed a small set of best practices for building and scaling successful AI products. Our goal with this conversation is to save you and your team a lot of pain and suffering while building your AI products. We discuss: 🔸 Two key ways AI products differ from traditional software 🔸 Common patterns and anti-patterns when building successful AI products 🔸 Their framework for iteratively building AI products 🔸 Why evals aren’t a cure-all 🔸 Why obsessing about customer trust and reliability is an underrated driver of successful AI products 🔸 The skills that matter most for builders in the AI era Listen now 👇 • YouTube: • Spotify: • Apple: Thank you to our wonderful sponsors for supporting the podcast: 🏆 Merge — The fastest way to ship 220+ integrations: 🏆 Strella — The AI-powered customer research platform: 🏆 Brex — The banking solution for startups:

Why most AI products fail: Lessons from 50+ AI deployments at OpenAI, Google & Amazon Aish and Kiriti Badam have built 50+ enterprise AI products across companies like OpenAI, Google, Amazon, and Databricks. Based on these experiences, they’ve developed a small set of best practices for building and scaling successful AI products. Our goal with this conversation is to save you and your team a lot of pain and suffering while building your AI products. We discuss: 🔸 Two key ways AI products differ from traditional software 🔸 Common patterns and anti-patterns when building successful AI products 🔸 Their framework for iteratively building AI products 🔸 Why evals aren’t a cure-all 🔸 Why obsessing about customer trust and reliability is an underrated driver of successful AI products 🔸 The skills that matter most for builders in the AI era Listen now 👇 • YouTube: • Spotify: • Apple: Thank you to our wonderful sponsors for supporting the podcast: 🏆 Merge — The fastest way to ship 220+ integrations: 🏆 Strella — The AI-powered customer research platform: 🏆 Brex — The banking solution for startups:

Lenny Rachitsky

176,860 Aufrufe • vor 8 Monaten

BuildKit is the missing link for integrations in vibe coding and gen apps. Say what you need in plain English, get a prompt, paste it, and your tools connect seamlessly. No coding, no stress. Watch the demo! Today it works with and soon Replit ⠕ , v0 and Cursor 🔥 Retweet with #picaVibeCoding, comment "vibe" and DM your email to jump the waitlist! Waitlist page in comment 👇

BuildKit is the missing link for integrations in vibe coding and gen apps. Say what you need in plain English, get a prompt, paste it, and your tools connect seamlessly. No coding, no stress. Watch the demo! Today it works with and soon Replit ⠕ , v0 and Cursor 🔥 Retweet with #picaVibeCoding, comment "vibe" and DM your email to jump the waitlist! Waitlist page in comment 👇

Moe

168,084 Aufrufe • vor 1 Jahr

$IT'S HERE and it's ON!!! 🐜 VPR is now live for Claude Code, Codex, Cursor, and every AI tool you already use. A VPN for AI. Same models. A fraction of the cost. Fully anonymous. Download & try it: Take it for a spin and come tell us what you think 👇$

IT'S HERE and it's ON!!! 🐜 VPR is now live for Claude Code, Codex, Cursor, and every AI tool you already use. A VPN for AI. Same models. A fraction of the cost. Fully anonymous. Download & try it: Take it for a spin and come tell us what you think 👇

AntSeed

103,111 Aufrufe • vor 1 Monat

Google vibe coded so hard we can now code frontend by drawing on it like a whiteboard 😂 While you're in Google AI Studio, just grab the drawing tools, mark up any UI element, and watch Gemini turn your scribbles into actual code. oh yea now we don't write code anymore, we draw it

Google vibe coded so hard we can now code frontend by drawing on it like a whiteboard 😂 While you're in Google AI Studio, just grab the drawing tools, mark up any UI element, and watch Gemini turn your scribbles into actual code. oh yea now we don't write code anymore, we draw it

corbin

187,730 Aufrufe • vor 10 Monaten