Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

new skill: improve-ui built to audit interfaces against their own design language, inspired by shadcn's improve skill. it reads your repo's design context: DESIGN.md, CSS, shared components, etc. then finds where the UI breaks its own rules and writes a plan to fix it

Ibelick's profile picture

Ibelick

11,460 subscribers

103,374 görüntüleme • 1 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)
0:15

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)

Stitch by Google

219,386 görüntüleme • 5 ay önce

The /design skill brings Claude Design’s artboard workflow into the CLI and Claude Code Desktop, built on artifacts. Run it with a brief and Claude publishes a canvas of editable artboards for your UI. Pick one, tweak it, then have Claude implement it.
0:12

The /design skill brings Claude Design’s artboard workflow into the CLI and Claude Code Desktop, built on artifacts. Run it with a brief and Claude publishes a canvas of editable artboards for your UI. Pick one, tweak it, then have Claude implement it.

Ado

26,791 görüntüleme • 10 gün önce

Introducing prompt-kit A set of high-quality, customizable components for building AI interfaces. Built on top of shadcn/ui, starting with PromptInput, a flexible input field for chatting with AI models. New components coming soon!
0:13

Introducing prompt-kit A set of high-quality, customizable components for building AI interfaces. Built on top of shadcn/ui, starting with PromptInput, a flexible input field for chatting with AI models. New components coming soon!

Ibelick

104,375 görüntüleme • 1 yıl önce

Train your UI animation judgement 💪 A quick and fun bunch of exercises to test out your motion design skills. Spot what’s wrong, name it, and fix it. → By Emil Kowalski
0:13

Train your UI animation judgement 💪 A quick and fun bunch of exercises to test out your motion design skills. Spot what’s wrong, name it, and fix it. → By Emil Kowalski

Adham Dannaway

11,295 görüntüleme • 3 ay önce

just updated ui-skills: It's now a collection of the best skills for design engineering
0:12

just updated ui-skills: It's now a collection of the best skills for design engineering

Ibelick

68,235 görüntüleme • 4 ay önce

I've spent weeks turning ui-craft from a Claude-only skill into a real system — and today v1 ships. 🚀 It now has its own installer. One command and your AI agent — Claude Code, Cursor, Codex, Gemini, OpenCode — designs with actual taste. brew install --cask educlopez/tap/ui-craft 🧵 what's new
0:17

I've spent weeks turning ui-craft from a Claude-only skill into a real system — and today v1 ships. 🚀 It now has its own installer. One command and your AI agent — Claude Code, Cursor, Codex, Gemini, OpenCode — designs with actual taste. brew install --cask educlopez/tap/ui-craft 🧵 what's new

Edu Calvo

28,360 görüntüleme • 2 ay önce

We just added a Sora UI Kit to MagicPath. MagicPath is the only design platform where you can do this today: create high-fidelity, interactive components with AI, in your own style, on an infinite canvas. No other tool even comes close.
0:18

We just added a Sora UI Kit to MagicPath. MagicPath is the only design platform where you can do this today: create high-fidelity, interactive components with AI, in your own style, on an infinite canvas. No other tool even comes close.

Pietro Schirano

21,366 görüntüleme • 11 ay önce

UI/UX Designers, you can now give your AI coding agent a better design taste. I just found Refero Styles that has a library with 2,000+ DESIGN.md files from real product sites covering colors, typography, spacing, and components. Ready to paste into Cursor, Claude Code, v0, and Lovable so your agent can build with better design direction Can’t believe it’s free; bookmark it for later. 💜
0:18

UI/UX Designers, you can now give your AI coding agent a better design taste. I just found Refero Styles that has a library with 2,000+ DESIGN.md files from real product sites covering colors, typography, spacing, and components. Ready to paste into Cursor, Claude Code, v0, and Lovable so your agent can build with better design direction Can’t believe it’s free; bookmark it for later. 💜

Abraham John 🦄🦓

29,401 görüntüleme • 10 gün önce

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!
0:20

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

Rebane

128,756 görüntüleme • 1 yıl önce

We built a better alternative to json-render & A2UI Up to 3x faster rendering & 67% fewer tokens. Far fewer broken outputs. We've been shipping Generative UI interfaces to 10,000+ developers for the past year. We know where JSON-based rendering breaks in production. So we built a new format - one that works with how models actually generate, not against it. And today we're open sourcing it: openui [dot] com
0:18

We built a better alternative to json-render & A2UI Up to 3x faster rendering & 67% fewer tokens. Far fewer broken outputs. We've been shipping Generative UI interfaces to 10,000+ developers for the past year. We know where JSON-based rendering breaks in production. So we built a new format - one that works with how models actually generate, not against it. And today we're open sourcing it: openui [dot] com

Rabi Shanker Guha

136,131 görüntüleme • 6 ay önce

Meet #DBRX: a general-purpose LLM that sets a new standard for efficient open source models. Use the DBRX model in your RAG apps or use the DBRX design to build your own custom LLMs and improve the quality of your GenAI applications.
0:20

Meet #DBRX: a general-purpose LLM that sets a new standard for efficient open source models. Use the DBRX model in your RAG apps or use the DBRX design to build your own custom LLMs and improve the quality of your GenAI applications.

Databricks

327,800 görüntüleme • 2 yıl önce

Claude Code v2.1.198 ships a new built-in skill: /dataviz It loads chart and dashboard design guidance directly into context: chart type selection, layout rules, and visual hierarchy for data-heavy UIs It also includes a runnable color-palette validator, so Claude can check contrast and accessibility programmatically instead of guessing No install needed, it comes with the CLI 👇
0:19

Claude Code v2.1.198 ships a new built-in skill: /dataviz It loads chart and dashboard design guidance directly into context: chart type selection, layout rules, and visual hierarchy for data-heavy UIs It also includes a runnable color-palette validator, so Claude can check contrast and accessibility programmatically instead of guessing No install needed, it comes with the CLI 👇

Daniel San

88,420 görüntüleme • 2 ay önce

Impeccable 3 natively supports crafting new design with diffusion (e.g. GPT Image 2) in harnesses that support it (e.g. Codex, Gemini w/ nano banana plugin). Impeccable now uses the best mode of operation for net-new vs iterative design: 1) completely new design: diffusion-first, then build w/ best practices for brand or product design (new in 3.0) 2) iterative design (additions/changes): design-system first, discovers your components, reads DESIGN/PRODUCT.md, goes to work. new live mode (new in 3.0) makes it extra convenient. Here's a tutorial documenting the whole workflow (incl. how I made the demo site in the video):
0:16

Impeccable 3 natively supports crafting new design with diffusion (e.g. GPT Image 2) in harnesses that support it (e.g. Codex, Gemini w/ nano banana plugin). Impeccable now uses the best mode of operation for net-new vs iterative design: 1) completely new design: diffusion-first, then build w/ best practices for brand or product design (new in 3.0) 2) iterative design (additions/changes): design-system first, discovers your components, reads DESIGN/PRODUCT.md, goes to work. new live mode (new in 3.0) makes it extra convenient. Here's a tutorial documenting the whole workflow (incl. how I made the demo site in the video):

Paul Bakaus

38,319 görüntüleme • 4 ay önce

We call this feature the Graphic Design Generator. To make your own design, just set up a frame, position your text and elements exactly where you want them, type in a prompt, and hit ‘Recraft.’ Voilà — your design is ready! Try it out here: #RecraftAI #red_panda #GraphicDesignGenerator
0:16

We call this feature the Graphic Design Generator. To make your own design, just set up a frame, position your text and elements exactly where you want them, type in a prompt, and hit ‘Recraft.’ Voilà — your design is ready! Try it out here: #RecraftAI #red_panda #GraphicDesignGenerator

Recraft

84,437 görüntüleme • 1 yıl önce

✨Introducing YesCheff is a web app that helps you learn, cook, and enjoy your favorite recipes through step-by-step cooking guides built from real YouTube content. You can even use your own YouTube links. A small but special project where I brought all my capabilities together, from design (brand & product) to animation, and development. This project came from exploring how Al models parse data into frontend components and the development of generative interfaces. I designed and developed the structure through React components (HTML, CSS, JS) for the frontend and Node.js for the backend. This is a testament of how one could develop digital products in a less frustrating and more flexible way with the use of Al, particularly when it comes to getting the styling and functionality right. Now which foods are you eager to learn? Check it out at #YesCheff #WebApp #AI #Design #FrontendDevelopment #ReactJS #NodeJS #ProductDesign
0:18

✨Introducing YesCheff is a web app that helps you learn, cook, and enjoy your favorite recipes through step-by-step cooking guides built from real YouTube content. You can even use your own YouTube links. A small but special project where I brought all my capabilities together, from design (brand & product) to animation, and development. This project came from exploring how Al models parse data into frontend components and the development of generative interfaces. I designed and developed the structure through React components (HTML, CSS, JS) for the frontend and Node.js for the backend. This is a testament of how one could develop digital products in a less frustrating and more flexible way with the use of Al, particularly when it comes to getting the styling and functionality right. Now which foods are you eager to learn? Check it out at #YesCheff #WebApp #AI #Design #FrontendDevelopment #ReactJS #NodeJS #ProductDesign

JEHTOMS 5.0

85,213 görüntüleme • 11 ay önce

introducing mesurer a tiny tool to measure spacing and align your UI on localhost npm i mesurer
0:18

introducing mesurer a tiny tool to measure spacing and align your UI on localhost npm i mesurer

Ibelick

230,034 görüntüleme • 5 ay önce

Impeccable 3.7 brings linting to design. Until now it was a skill you asked for help. Now it's a design-system-aware feedback loop that runs while your agent builds, catching slop and design drift before they land. 🪝 Design hooks for Claude, Codex, and Cursor They run after every UI edit and quietly nudge your agent to fix slop and drift. The output isn't another wall of lint: it separates new findings from already-seen ones, flags clean scans, and asks the agent to use judgment. Fix real issues, leave intentional demos alone, save exceptions to config instead of littering your source. 🎨 Slop detection is now project-aware Reads your actual design system from DESIGN.md, your typography, palette, radius scale, and tokens, and flags drift from your system, not just generic AI slop: • this font isn't in your design system • this color is outside your documented palette • this radius doesn't match your rounded scale The same engine powers both the hooks and the CLI, and it's where we're investing next. 🖥️ Live Mode, ready for real projects Svelte/SvelteKit now preview variants as temporary framework components with live params, then accept cleanly back into your source component. Manual text edits got evidence / apply / discard routes, insertions preserve their anchors, and mapped lists and JSX slots clean up far more reliably. ⚡ Leaner core, sharper detector Rule-level evals across 3 providers and 4 niches cut guidance with no measurable lift and dropped examples that taught models bad patterns. The detector now skips hidden and screen-reader-only elements, understands OKLCH alpha and Sass-like inputs, and tightened checks for repeated kickers, oversized H1s, clipped overflow, and cramped padding. 🛠️ CLI caught up impeccable detect loads DESIGN.md by default, motion findings name the exact token or cubic-bezier instead of just "bounce," and impeccable ignores gives real CRUD for exceptions. Hooks and CLI share the same ignores. No split-brain config. Plus a much-improved interactive installer with hooks setup built in. Upgrade: npx impeccable install npm i -g impeccable
0:12

Impeccable 3.7 brings linting to design. Until now it was a skill you asked for help. Now it's a design-system-aware feedback loop that runs while your agent builds, catching slop and design drift before they land. 🪝 Design hooks for Claude, Codex, and Cursor They run after every UI edit and quietly nudge your agent to fix slop and drift. The output isn't another wall of lint: it separates new findings from already-seen ones, flags clean scans, and asks the agent to use judgment. Fix real issues, leave intentional demos alone, save exceptions to config instead of littering your source. 🎨 Slop detection is now project-aware Reads your actual design system from DESIGN.md, your typography, palette, radius scale, and tokens, and flags drift from your system, not just generic AI slop: • this font isn't in your design system • this color is outside your documented palette • this radius doesn't match your rounded scale The same engine powers both the hooks and the CLI, and it's where we're investing next. 🖥️ Live Mode, ready for real projects Svelte/SvelteKit now preview variants as temporary framework components with live params, then accept cleanly back into your source component. Manual text edits got evidence / apply / discard routes, insertions preserve their anchors, and mapped lists and JSX slots clean up far more reliably. ⚡ Leaner core, sharper detector Rule-level evals across 3 providers and 4 niches cut guidance with no measurable lift and dropped examples that taught models bad patterns. The detector now skips hidden and screen-reader-only elements, understands OKLCH alpha and Sass-like inputs, and tightened checks for repeated kickers, oversized H1s, clipped overflow, and cramped padding. 🛠️ CLI caught up impeccable detect loads DESIGN.md by default, motion findings name the exact token or cubic-bezier instead of just "bounce," and impeccable ignores gives real CRUD for exceptions. Hooks and CLI share the same ignores. No split-brain config. Plus a much-improved interactive installer with hooks setup built in. Upgrade: npx impeccable install npm i -g impeccable

Impeccable

233,051 görüntüleme • 2 ay önce

A basic version of Vercel built in v0 – there's no doubt I'd start this way if I was rebuilding the dashboard from scratch shadcn has made it possible to start quickly and then make the design & identity your own
0:12

A basic version of Vercel built in v0 – there's no doubt I'd start this way if I was rebuilding the dashboard from scratch shadcn has made it possible to start quickly and then make the design & identity your own

Guillermo Rauch

156,953 görüntüleme • 1 yıl önce

We finally have a "Figma for AI agents." It's called Awesome-design-md. A curated collection of UI systems extracted from 50+ top websites, formatted specifically for coding agents. Instead of parsing screenshots or messy design files, you drop a DESIGN.md straight into your project. It upgrades your AI's UI skills instantly. > Unlocks 50+ elite design systems: Cursor, Vercel, Stripe, Spotify, SpaceX, and more > Structured into 9 clear sections: typography, spacing, elevation, rules > Includes light/dark previews for quick visual checks > Uses Google Stitch's native plain-text format for LLMs Every file also comes with an Agent Guide, ready-to-use prompts included. 100% Free. Open Source.
0:11

We finally have a "Figma for AI agents." It's called Awesome-design-md. A curated collection of UI systems extracted from 50+ top websites, formatted specifically for coding agents. Instead of parsing screenshots or messy design files, you drop a DESIGN.md straight into your project. It upgrades your AI's UI skills instantly. > Unlocks 50+ elite design systems: Cursor, Vercel, Stripe, Spotify, SpaceX, and more > Structured into 9 clear sections: typography, spacing, elevation, rules > Includes light/dark previews for quick visual checks > Uses Google Stitch's native plain-text format for LLMs Every file also comes with an Agent Guide, ready-to-use prompts included. 100% Free. Open Source.

Simplifying AI

12,824 görüntüleme • 1 ay önce