Loading video...

Video Failed to Load

Go Home

Design inside your codebase. Introducing Impeccable 3.0: ▸ 1 skill, self-contained, 23 commands ▸ /impeccable live: pick in-browser, get prod-grade variants, accept writes to *source* ▸ reads+writes DESIGN.md + PRODUCT.md ▸ brand & product design

pbakaus's profile picture

Paul Bakaus

17,103 subscribers

58,894 views • 1 month ago •via X (Twitter)

ArtsEducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Introducing Design OS—the missing design process between your idea and codebase. Step 1: Set your product vision Step 2: Design your screens Step 3: Export production-ready components Not mockups. Real components. Ready to build. Free & open source:
0:31

Introducing Design OS—the missing design process between your idea and codebase. Step 1: Set your product vision Step 2: Design your screens Step 3: Export production-ready components Not mockups. Real components. Ready to build. Free & open source:

Brian Casel

50,089 views • 5 months ago

You can now design directly in your codebase. Select elements, modify them visually, and Cursor writes the code.
2:05

You can now design directly in your codebase. Select elements, modify them visually, and Cursor writes the code.

Cursor

6,074,901 views • 5 months ago

Introducing CSS Studio. A design tool that lives in your site. Runs in your browser. Writes code with your existing AI agent. All completely local - so no subscription. One price, lifetime updates.
0:44

Introducing CSS Studio. A design tool that lives in your site. Runs in your browser. Writes code with your existing AI agent. All completely local - so no subscription. One price, lifetime updates.

Motion

298,285 views • 2 months ago

Introducing Impeccable 3.5, the best way to design in production: iterate on real UI with your AI agent, in the codebase you actually ship. Turns out many popular design skills, including Impeccable and Anthropic's frontend-design, weren't actually very good at...design (the workflow was valuable, but the output didn't magically make LLMs like GPT great designers). We measured it across thousands of generations: 74% of pages used the cream AI-default background, 76% reached for extreme letter-spacing, 90%+ failed the contrast floor. So we started fixing slop systematically, specific to each model. The skill now compiles rules for the exact defects each model makes, instead of shipping one generic file to everyone. The biggest jump is in GPT-5.5 and Codex. Also new: ◆ It now knows the difference between a new project and an existing one. Existing codebase, it reads your design system and preserves your identity. Greenfield, it seeds a fresh palette from 129 hand-curated anchors so every cold start doesn't drift to the same safe colors. ◆ Live Mode is now in beta, and works at two scales. Type a direction into the new Steer bar, or speak it, and the agent reads the whole page and edits it in place. Or pick a single element, steer it with a sub-command, live-edit any copy, and accept the variant straight back to source. Insert mode scaffolds brand-new elements between the ones already there. Recovery survives HMR, hidden heroes, and dev-tool overlays. ◆ A rebuilt anti-pattern detector. Torn off jsdom and onto a real CSS cascade resolver: roughly 20x faster, dependency-free, and now small enough to run inline inside the skill, not just the CLI and extension. 14 new rules, 41 total. ◆ The skill keeps itself current, checking once a day and offering to update. Plus /impeccable init and a bare /impeccable that reads your repo and tells you the next move. Free, open source. Claude Code, Codex, Cursor, and more.
0:49

Introducing Impeccable 3.5, the best way to design in production: iterate on real UI with your AI agent, in the codebase you actually ship. Turns out many popular design skills, including Impeccable and Anthropic's frontend-design, weren't actually very good at...design (the workflow was valuable, but the output didn't magically make LLMs like GPT great designers). We measured it across thousands of generations: 74% of pages used the cream AI-default background, 76% reached for extreme letter-spacing, 90%+ failed the contrast floor. So we started fixing slop systematically, specific to each model. The skill now compiles rules for the exact defects each model makes, instead of shipping one generic file to everyone. The biggest jump is in GPT-5.5 and Codex. Also new: ◆ It now knows the difference between a new project and an existing one. Existing codebase, it reads your design system and preserves your identity. Greenfield, it seeds a fresh palette from 129 hand-curated anchors so every cold start doesn't drift to the same safe colors. ◆ Live Mode is now in beta, and works at two scales. Type a direction into the new Steer bar, or speak it, and the agent reads the whole page and edits it in place. Or pick a single element, steer it with a sub-command, live-edit any copy, and accept the variant straight back to source. Insert mode scaffolds brand-new elements between the ones already there. Recovery survives HMR, hidden heroes, and dev-tool overlays. ◆ A rebuilt anti-pattern detector. Torn off jsdom and onto a real CSS cascade resolver: roughly 20x faster, dependency-free, and now small enough to run inline inside the skill, not just the CLI and extension. 14 new rules, 41 total. ◆ The skill keeps itself current, checking once a day and offering to update. Plus /impeccable init and a bare /impeccable that reads your repo and tells you the next move. Free, open source. Claude Code, Codex, Cursor, and more.

Paul Bakaus

92,054 views • 11 days ago

Introducing Gestalt 3D Modeling in the Browser Open Source, powered by ThreeJS Keyboard Shortcuts stolen from Blender Design in your browser, export anywhere ✌️
0:48

Introducing Gestalt 3D Modeling in the Browser Open Source, powered by ThreeJS Keyboard Shortcuts stolen from Blender Design in your browser, export anywhere ✌️

robot

41,447 views • 9 months ago

Loved the skills system of the @Diabrowser and dropped a Skill Gallery for Dia Browser—one-click commands for content, research, and design, all in your browser. Link below.
0:38

Loved the skills system of the @Diabrowser and dropped a Skill Gallery for Dia Browser—one-click commands for content, research, and design, all in your browser. Link below.

Caner Aras

85,041 views • 11 months ago

Design.md isn't your design system. With design systems in Magic Patterns, AI uses your: - Components (syncs to codebase via MCP) - Typography (can use custom fonts) - Color tokens (import from Figma / tokens.json) - Icons (any library) - Spacing tokens - Rules
0:21

Design.md isn't your design system. With design systems in Magic Patterns, AI uses your: - Components (syncs to codebase via MCP) - Typography (can use custom fonts) - Color tokens (import from Figma / tokens.json) - Icons (any library) - Spacing tokens - Rules

Alex Danilowicz

54,206 views • 2 months ago

Your brand deserves a pro touch—with X-Design, the #1 Product of the Day on Product Hunt. X-Design has evolved into an AI brand design agent. Create logos, colors, posters, menus, and more—all consistent, all in minutes
1:22

Your brand deserves a pro touch—with X-Design, the #1 Product of the Day on Product Hunt. X-Design has evolved into an AI brand design agent. Create logos, colors, posters, menus, and more—all consistent, all in minutes

Tulsi Soni

455,075 views • 6 months ago

Your company's context, now in Bolt. Introducing Connectors (MCP). Get started with Notion, Linear, GitHub, Miro, Sentry, and Jira. Connect once. Bolt reads, writes, and builds with your actual data. 🧵
0:29

Your company's context, now in Bolt. Introducing Connectors (MCP). Get started with Notion, Linear, GitHub, Miro, Sentry, and Jira. Connect once. Bolt reads, writes, and builds with your actual data. 🧵

bolt.new

942,438 views • 3 months ago

New Pi extension: pi-design-deck, a tool for visual design decision making. Opens a multi-slide deck in your browser with live previews of each option. Compare, pick, or generate more options. pi install npm:pi-design-deck
1:10

New Pi extension: pi-design-deck, a tool for visual design decision making. Opens a multi-slide deck in your browser with live previews of each option. Compare, pick, or generate more options. pi install npm:pi-design-deck

Nico Bailon

86,740 views • 3 months ago

The DESIGN.md upgrade is officially live in Stitch! 🚀 Yesterday we open-sourced the spec, and today we are giving you more tools to use it: 📄 Start with DESIGN.md: Attach a DESIGN.md right at the start of a project. Don't have one? Our new wizard will help you extract one from your code base or the web. 🔄 DESIGN.md to Design System: Upload a DESIGN.md file to generate a Design System on the canvas. 🧩 Token Support: Design Systems now support design tokens from DESIGN.md! Add them to your file and Stitch will seamlessly incorporate them. 🗑️ Clean Up: (You asked, we listened) You can now easily delete a design system. We’re excited to build the open design standard together. 👇
0:33

The DESIGN.md upgrade is officially live in Stitch! 🚀 Yesterday we open-sourced the spec, and today we are giving you more tools to use it: 📄 Start with DESIGN.md: Attach a DESIGN.md right at the start of a project. Don't have one? Our new wizard will help you extract one from your code base or the web. 🔄 DESIGN.md to Design System: Upload a DESIGN.md file to generate a Design System on the canvas. 🧩 Token Support: Design Systems now support design tokens from DESIGN.md! Add them to your file and Stitch will seamlessly incorporate them. 🗑️ Clean Up: (You asked, we listened) You can now easily delete a design system. We’re excited to build the open design standard together. 👇

Stitch by Google

193,603 views • 1 month ago

Introducing Fusion 1.0, the first AI agent for the full product development workflow • Speaks product, design, & code • Lives in your stack • Learns how your team builds & self improves 10M designs & PRDs turned into real products & features for the worlds largest companies
1:36

Introducing Fusion 1.0, the first AI agent for the full product development workflow • Speaks product, design, & code • Lives in your stack • Learns how your team builds & self improves 10M designs & PRDs turned into real products & features for the worlds largest companies

Steve (Builder.io)

390,942 views • 7 months ago

Holy cow. It’s finally working.. 🤯 1) 🤖 Import design from Figma (with the help of Loader) 2) Chat with the design in Streamlit 💬 3) 🎨 Design and code is returned Will open-source the codebase tomorrow (optimizing the code today.) (Live Demo ↓)
0:23

Holy cow. It’s finally working.. 🤯 1) 🤖 Import design from Figma (with the help of Loader) 2) Chat with the design in Streamlit 💬 3) 🎨 Design and code is returned Will open-source the codebase tomorrow (optimizing the code today.) (Live Demo ↓)

peter! 🥷

233,046 views • 3 years ago

Have you tried the Replit Design Canvas yet? 👀 1. Generate multiple design variants 2. Convert your design into app 3. Fine tune designs with design controls 4. Sketch your idea & make it real 5. Collaborate with your team on designs
0:54

Have you tried the Replit Design Canvas yet? 👀 1. Generate multiple design variants 2. Convert your design into app 3. Fine tune designs with design controls 4. Sketch your idea & make it real 5. Collaborate with your team on designs

Replit ⠕

54,600 views • 2 months ago

how to use Google's NEW open source Design.md + AI Skills to make your startup look like a $100 million company in 1 hour: 1. Design.md is an open source file from Google that captures the soul of a design. Typography, colors, spacing, all in one markdown file. You attach it to your prompt and your agent builds beautiful things every time. 2. Think of it this way. The HTML is the finished dish. The design.md is the recipe. The skills are the ingredients. Put them together and everything you build looks consistent and professional. 3. Don't create a design system from scratch. Find a brand you love. Linear, Stripe, Vercel, whatever resonates. Study it. Use ChatGPT or Claude to help you extract the design language into your own design.md file. 4. Build skills on top of your design.md. A landing page skill. A mobile app skill. A motion design skill. A slide deck skill. Each one references the same design.md so everything looks like it came from the same designer. 5. The biggest mistake people make: they nail one screen and then everything else looks generic. Design.md solves this. One file keeps every page, every format, every medium consistent. 6. Use it across everything. Your landing page. Your app. Your pitch deck. Your promo videos. Same DNA. Same taste. Same system. That's what separates a startup that looks real from one that looks vibe-coded. 7. Build a second brain for design inspiration. When you see something beautiful in the real world or online, capture it. Save it. When you're building something new, reference it. Taste is developed, not downloaded. 8. It's obvious but the difference between a product people trust and a product people bounce from is how it looks and feels. Design.md gives you that edge. you can watch below shoutout to Meng To for coming on The Startup Ideas Podcast (SIP) 🧃 and walking through his full workflow. if you want to use AI to actually build gorgeous designs, you'll want to use see this. watch
51:01

how to use Google's NEW open source Design.md + AI Skills to make your startup look like a $100 million company in 1 hour: 1. Design.md is an open source file from Google that captures the soul of a design. Typography, colors, spacing, all in one markdown file. You attach it to your prompt and your agent builds beautiful things every time. 2. Think of it this way. The HTML is the finished dish. The design.md is the recipe. The skills are the ingredients. Put them together and everything you build looks consistent and professional. 3. Don't create a design system from scratch. Find a brand you love. Linear, Stripe, Vercel, whatever resonates. Study it. Use ChatGPT or Claude to help you extract the design language into your own design.md file. 4. Build skills on top of your design.md. A landing page skill. A mobile app skill. A motion design skill. A slide deck skill. Each one references the same design.md so everything looks like it came from the same designer. 5. The biggest mistake people make: they nail one screen and then everything else looks generic. Design.md solves this. One file keeps every page, every format, every medium consistent. 6. Use it across everything. Your landing page. Your app. Your pitch deck. Your promo videos. Same DNA. Same taste. Same system. That's what separates a startup that looks real from one that looks vibe-coded. 7. Build a second brain for design inspiration. When you see something beautiful in the real world or online, capture it. Save it. When you're building something new, reference it. Taste is developed, not downloaded. 8. It's obvious but the difference between a product people trust and a product people bounce from is how it looks and feels. Design.md gives you that edge. you can watch below shoutout to Meng To for coming on The Startup Ideas Podcast (SIP) 🧃 and walking through his full workflow. if you want to use AI to actually build gorgeous designs, you'll want to use see this. watch

GREG ISENBERG

491,083 views • 1 month ago

Introducing the new X-Design X-Design: Meitu’s new AI brand design agent. ✅ For: Business owners, designers, brand builders. ✅ Create in minutes: Logos, colors, fonts, posters, menus, packaging, mockups, and more… ✅ Stay consistent & professional, zero design skills needed. Elevate your brand effortlessly.
1:22

Introducing the new X-Design X-Design: Meitu’s new AI brand design agent. ✅ For: Business owners, designers, brand builders. ✅ Create in minutes: Logos, colors, fonts, posters, menus, packaging, mockups, and more… ✅ Stay consistent & professional, zero design skills needed. Elevate your brand effortlessly.

SARAH

108,941 views • 6 months ago

🚨 Introducing the new X-Design, now evolved into a full AI brand design agent. Whether you’re a new business owner, designer or just want to refresh your brand.. X-Design gives you everything you need in minutes. Logos, color palettes, fonts, posters, menus, packaging, mockups.. all generated professionally. No design skills needed. Your brand identity, rebuilt effortlessly.
1:22

🚨 Introducing the new X-Design, now evolved into a full AI brand design agent. Whether you’re a new business owner, designer or just want to refresh your brand.. X-Design gives you everything you need in minutes. Logos, color palettes, fonts, posters, menus, packaging, mockups.. all generated professionally. No design skills needed. Your brand identity, rebuilt effortlessly.

Scott Brooks

12,217 views • 6 months ago

The Design OS for your coding agents $ npx skills add superdesigndev/superdesign-skill - Design w/ full codebase context - Infinite canvas exploration - Built in prompt library Here is how it works 🧵👇
0:55

The Design OS for your coding agents $ npx skills add superdesigndev/superdesign-skill - Design w/ full codebase context - Infinite canvas exploration - Built in prompt library Here is how it works 🧵👇

Jason Zhou

67,537 views • 4 months ago

Introducing Instant Agents. Your AI team for Shopify that actually does the work: “Build me a PDP for this product.” “Turn this Figma design into a live page.” “Test 3 variants and pick a winner.” “Create better product images.” Done. Instant Agents are there for you 24/7. We’ve trained AI to understand our product. This way you get the true power of AI in combination with the visual control of our no-code builder. Real layouts, real components. Published to Shopify in 1 click.
1:07

Introducing Instant Agents. Your AI team for Shopify that actually does the work: “Build me a PDP for this product.” “Turn this Figma design into a live page.” “Test 3 variants and pick a winner.” “Create better product images.” Done. Instant Agents are there for you 24/7. We’ve trained AI to understand our product. This way you get the true power of AI in combination with the visual control of our no-code builder. Real layouts, real components. Published to Shopify in 1 click.

Instant

11,271 views • 1 month ago

using tools, Cursor Agent have the capability to reason about when it should - read & write code - search your codebase - call MCP servers - run terminal commands an example where it connects to a postgres database, runs a query and writes to file
0:25

using tools, Cursor Agent have the capability to reason about when it should - read & write code - search your codebase - call MCP servers - run terminal commands an example where it connects to a postgres database, runs a query and writes to file

eric zakariasson

34,917 views • 1 year ago