Загрузка видео...

Не удалось загрузить видео

На главную

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

61,325 просмотров • 6 месяцев назад •via X (Twitter)

Комментарии: 84

Фото профиля Rob Balfré
Rob Balfré6 месяцев назад

I've been building for a month and after watch this is Impeccable is going to be a 1st class citizen in it! Amazing work!!! Thanks for sharing

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

You’re welcome!

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

worth noting: Live Mode is alpha - there are a lot of things that could break when you try it (most recoverable by your agent though). It's my take on a future of designing live in your actual code base, but there's a lot more work to do. there's a lot more battle tested new features in 3.0! this is the only one that's alpha. Go try if you're adventurous :)

Фото профиля Mariusz
Mariusz6 месяцев назад

@impeccable_ai Dang feels like 2.0 was yesterday how fast are we moving now

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

@impeccable_ai can’t stop shipping 😬

Фото профиля Jongmin Park
Jongmin Park6 месяцев назад

Writing back to source from the browser is the killer detail here.

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

yep it was really painful to build 😅 but I think paid off.

Фото профиля Rafael Zago
Rafael Zago6 месяцев назад

this is such a great skill, been using it across a bunch of projects lately 🔥

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

🙌 thank you!

Фото профиля Vincent Dal Maso
Vincent Dal Maso6 месяцев назад

Wow the road from v0 to v3 is incredible ! What new unlock made you change the shape of the skills to a self contained ?

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

thx! It was a real trade off. It’s easier to find the right commands when the skills are individual, but many individual skills waste a lot of your tokens on every message turn (apparently Claude objects the skills palette on every message turn now). I’ll probably write an article about how I made “live” happen self contained in a skill. It was really hard but fun.

Фото профиля Gary Gil
Gary Gil6 месяцев назад

The previous version has been amazing. Can’t wait to try 3.0.

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

thank you! hope you’ll like it :)

Фото профиля Ryan Snyder
Ryan Snyder6 месяцев назад

This looks amazing, can't wait to try it!

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

ty, hope it works well for you!

Фото профиля Vlad
Vlad6 месяцев назад

banger skill!

Фото профиля Fred Moon 🚀
Fred Moon 🚀6 месяцев назад

haven't even had time to test the v2 thoroughly yet 😊looks truly great, congrats on the launch!

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

haha thank you!

Фото профиля Jesse
Jesse6 месяцев назад

Can’t wait to try it. Impeccable has quickly become a favorite skill of mine and is on my short list for anyone in design or design adjacent.

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

let me know how it goes! This is the most ambitious launch so far.

Фото профиля Jesse
Jesse6 месяцев назад

Any suggestions on how to best leverage the new updated version on existing sites and custom elements that we built? One of my favorite things to do is take our designs and pass them through impeccable in Claude code and then we usually end up with a much more polished final product even if we only adopt 70 to 80% of the changes. I think it’s quickly turned into my favorite design related skill, but it looks like this takes impeccable in a different direction. I wonder if our use case is more of an edge case or the norm?

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

this is very much part of my flow as well, and hopefully became even better, not worse in this version! The live mode imo also helps here, but is only an optional new layer. You can still use Impeccable just like you did before (with added bonus that it has much better product design understanding now)

Фото профиля Jesse
Jesse6 месяцев назад

Thanks for taking the time to respond! Will share some of our work once we get into it.

Фото профиля Anubhav
Anubhav6 месяцев назад

Big fan of impeccable, since I started using it stopped seeing AI purple puke UIs

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

the purple must stop!

Фото профиля brant
brant6 месяцев назад

Big fan

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

🙏

Фото профиля Adam Argyle
Adam Argyle6 месяцев назад

love it! excellent additions and changes here in 3.0 🤘🏻💀

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

thanks Adam! this has been a crazy one to build haha

Фото профиля Adam Argyle
Adam Argyle6 месяцев назад

I’m excited to dig in. Was that Intent you were using in your video?

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

what do you mean by Intent?

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

ah! nope, that was plain ol' cursor (well, new cursor :)). Composer 2 is a very fast model, so good for a live, uncut demo like this. Opus would produce much better results though, it's a speed/quality compromise.

Фото профиля Adam Argyle
Adam Argyle6 месяцев назад

awwww fun! i do admire 🙂

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

ha :) curious if you got any good results! high bar to impress the one and only Adam Argyle with a design tool..

Фото профиля Simon Pantic
Simon Pantic6 месяцев назад

This is awesome, but why free ? It's a full product here with your own vision I don't see any interest of open sourcing.

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

I’ve now hit the edges of what’s possible and sensible with a free skill! Thinking about what pro could look like.

Фото профиля Jose Rosado @ WebScale
Jose Rosado @ WebScale6 месяцев назад

damn!

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

💪

Фото профиля Dave Geddes
Dave Geddes6 месяцев назад

very excited to take this for a spin! I'm making a side project with a similar UX - select something in browser -> tell agent what to do right from there. Feels like the direct manipulation experience that's been missing. Your design stuff is next level tho

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

thanks Dave! Agree, I think this is a really neat way of iterating. It was a pain to build though, very fragile. Hope to work with the frontier labs to make it easier.

Фото профиля Dave Geddes
Dave Geddes6 месяцев назад

yeah I bet! I'm sure you'll iron it out, amazing idea.

Фото профиля Erik Mejia
Erik Mejia6 месяцев назад

Love this direction! This new UX is inspired by UIsh, but using your already awesome foundation. I have been sharing this with friends and teams I work with.

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

thx! was noodling on this before uish shipped, but agree, that was another push for me to release it. Impeccable Live works in the reverse direction though: You can stay entirely in the browser, and variants get sent back to the browser.

Фото профиля Vic Vinegar
Vic Vinegar6 месяцев назад

@erikmejias thank you! what ide was that?

Фото профиля Bryce Driesenga
Bryce Driesenga6 месяцев назад

@pbakaus @erikmejias Looked like Cursor to me

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

@VinegarWrites @erikmejias yes, Cursor. Works in CC and Codex as well, of course. Composer 2 is just good for a quick demo because it is very fast. Design in Composer 2 is a lot more lackluster though.

Фото профиля AI Mastery Guide
AI Mastery Guide6 месяцев назад

The reads+writes to DESIGN.md approach is actually genius. Less context switching.

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

yep, that’s the goal!

Фото профиля AI Mastery Guide
AI Mastery Guide6 месяцев назад

Nice!

Фото профиля Matt Sims
Matt Sims6 месяцев назад

Wow, this looks very awesome

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

ty!

Фото профиля Snip
Snip6 месяцев назад

This looks great. Will def try tomorrow 🫡

Фото профиля Franklin Castillo
Franklin Castillo6 месяцев назад

Very coooool!!! Big fan here 🚀

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

🙌

Фото профиля Drew Town
Drew Town6 месяцев назад

This is very cool, well done!

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

thank you!

Фото профиля David A. Lindahl 🏔️
David A. Lindahl 🏔️6 месяцев назад

Oooo very nice! I just used impeccable to improve a dev studio I run and showed it to some folks and they loved it!

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

that’s great to hear!

Фото профиля Mike Sewell 🔳
Mike Sewell 🔳6 месяцев назад

Incredible stuff!

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

thanks Mike!

Фото профиля Mike Sewell 🔳
Mike Sewell 🔳6 месяцев назад

Thank you! This is one of my favourite tools atm.

Фото профиля 𝐙𝐨𝐡𝐚𝐢𝐛 𝐀.
𝐙𝐨𝐡𝐚𝐢𝐛 𝐀.6 месяцев назад

how is this free?? 🔥🔥

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

😅 at some point I’ll have to focus on Impeccable Pro I guess??

Фото профиля 𝐙𝐨𝐡𝐚𝐢𝐛 𝐀.
𝐙𝐨𝐡𝐚𝐢𝐛 𝐀.6 месяцев назад

it already is very pro. not the usual make-it-pretty styleguides, but the details that matter to pros.

Фото профиля Jacek
Jacek6 месяцев назад

Looks fantastic! Is it actually directly writing into the codebase or rather we see a preview and then, when accepted, the variant is turned into a prompt which is sent to the agent modifying the codebase?

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

it’s a combination. 80-90% is a direct write into your code base (even initially), and then there’s a small “carbonize” step to move the inline CSS into the right structure/files. But the HTML is already in your source, won’t get prompted and regenerated after the fact.

Фото профиля Jacek
Jacek6 месяцев назад

Nothing short of impressive 🤯

Фото профиля abgregs
abgregs6 месяцев назад

Will give it a try!

Фото профиля Fabian Hannemann
Fabian Hannemann6 месяцев назад

Exciting, so many great ideas wrapped into this! Can't wait to fully test it out.

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

🙌

Фото профиля Meetless AI
Meetless AI6 месяцев назад

this is the core problem. spec drift isnt a discipline issue, its a tooling gap. the spec was correct when written. nobody knows when it stopped being correct

Фото профиля TheInsider
TheInsider6 месяцев назад

Does this work well to when building mobile apps ??

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

some use it for that, but I would say not yet. Right now focused on web design. Planned for the future.

Фото профиля Shay
Shay6 месяцев назад

Any reason why the live feature is a skill instead of it being a programmatic command?

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

yes - if it was part of e.g. Impeccable's cli (npx impeccable), it wouldn't have access to your live agent harness to generate variants (would have to go through API). It would be way more robust though. Likely the path for an eventual pro version.

Фото профиля Pochi
Pochi6 месяцев назад

spec-as-md is a great pattern but once DESIGN.md and the actual rendered UI disagree, the agent regenerates against stale spec and tgap compounds Round trip parsing the source back into md is usually what keeps this honest at scale

Фото профиля DanielAIwork
DanielAIwork6 месяцев назад

nice design but can it actually save me from paying a ui designer? if not i'll just keep using my $0.50 prompt trick

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

that’s something for you to decide! personally, I think no tool on the market, including Impeccable, can currently replace a world class designer. But it can help devs and designers be better at what they do.

Фото профиля John Titor III
John Titor III6 месяцев назад

Vou testar aqui

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

thx! looks like a pretty interactive app - on generated code, live mode could be a bit finicky. If you find issues, report back

Фото профиля John Titor III
John Titor III6 месяцев назад

You're welcome! I'm trying to redo my map features because I think it's causing some kind of cognitive overload. haha. But I haven't publicly released it yet to get user feedback

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

cool! If live mode doesn't work, you can of course also use Impeccable normally directly in the terminal. It's an ideal use-case to try out the new enhanced product design understanding (vs brand).

Фото профиля John Titor III
John Titor III6 месяцев назад

I'm trying live mode right now. Oh my god, this is the most awesome thing in AI that I stumbled recently ahaha

Фото профиля Paul Bakaus
Paul Bakaus6 месяцев назад

🙌

Похожие видео

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

105,050 просмотров • 5 месяцев назад