So Long, Figma. Thanks for Everything
jondaiello.medium.com
jondaiello.medium.com
This is key and the title/introduction makes it seem like AI is capable of crafting UIs. It is not. AI is capable of laying out your components on top of each other. I used to "craft" most of my app UI[1] and am using Carbon Design System[2]. There are a bunch of open design systems available.
If you haven't used a full Design System before, then you should try that now: https://storybook.js.org/showcase/projects
For any given system, there will be a bit of a learning curve and setup cost; but the payoff is incredible comparing to most of tailwind offerings out there. Bonus: Most of design systems are free! Tailwind frameworks made by amateurs, small companies, etc... can serve a small niche but if you need a bit more of components and people who care about accessibility and usability, then you are much better using a design system supported by a major corporation with infinite resources.
So, the secret sauce is the design system, not the AI. The design system saves you immeasurable time and also standardize the process opening the gate for GenAI to create interfaces. I've tried multiple times with Sonnet 3.7 to craft custom components (for Carbon) and it failed miserably even when I hand-held it constantly.
==
> This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing this package as a dependency you are agreeing to telemetry collection.Example from the comments...
> Great question. I haven’t found a perfect tool. A combination of Figma and Storybook and Zeroheight do a good job pulling it all together. But the real magic is the designer-developer relationship that stay in lock step. Those relationships are what it takes to be in tight sync.
_But the real magic is the designer-developer relationship that stay in lock step. Those relationships are what it takes to be in tight sync._
Who writes like this?
The core idea (designers solving problems instead of pushing pixels) is sound. But these kinds of posts are always packaged with this kind of missionary zeal, as if discovering the usefulness of sketching or systems thinking is some kind of personal enlightenment.
Who writes like this?
https://books.google.com/ngrams/graph?content=you+got+this&y...
No doubt there are older people who use the phrase today, but that's still more annoying; they are the older people who are very proud of inserting 'cray cray' and 'yeet' into conversations.
Those people are just delulu.
“Mark had enough of his job, so he stood and yeeted his laptop out of the window.”
If it's not a quirk, then it is probably due to one usage of the words (eg: "So you got this angry customer, see?") peaking in the 1940s, and a different usage (eg: "You can do it... you got this!") rising in the 2000s.
A similar phrase is 'I need you to', which appeared around the same time. Eg: 'Okay, I need you to calm down' or 'I really need you to be supportive right now', etc. To my ears it sounds gratingly self-entitled.
At least yeet can be funny if you're referencing a meme/being intentionally ironic. I'm not sure there's another great word to replace it anyhow, chuck or hurl are probably the closest but don't imply the level of reckless abandon, and aren't quite as "multi-purpose" in terms of understood contexts.
They dont have time to write a short one. So they wrote a long one instead.
I mean there is a good reason to think it might be AI, but just as much reason to think the person who wrote isn't that good a writer but needs to write some stuff because engagement or whatever and then this is what comes out.
That said I wrote something I was pretty proud of where the narrator was depressed and burnt out, in a very small bit of a much longer and complicated narrative, and somebody assumed it was written by AI because the writing seemed emotionally detached - so I personally dislike casting accusations of AI at writing just because it doesn't match my taste.
> This morning, I designed an entire enterprise dashboard without opening Figma. I sketched the core flow on paper, annotated it with handwritten notes, dropped them into my generative AI tool. Within a few seconds, my hand-drawn flows and page layouts were turned into, production-ready code using our design system.
> The future didn’t start with “AI”. It started with getting organized with our materials. Most notably, a mature design system. Our design system stopped being a rigid set of components and instead became system infrastructure. Tokens, foundational elements, assembly components, patterns, and templates became the full suite of options to build with.
> When tools like UIzard and UX Pilot hit the market, most people didn’t find them very impressive. But when they finally hit their stride, it felt like cheating. We’d sketch a few screens on paper, a tablet, or whiteboard, add a few annotations, and the generative AI would churn out a few working UI options. Soon, these systems merged with products like Builder.io and Cursor. And then mind-blowing magic started to happen.
This sounds great, but I don't understand what their 'design system' actually is - is it a set of files (e.g. like .cursorrules but stating colour, spacing, and design preferences etc), or a collection of files, or something more nebulous like the existing patterns in an app, or something else entirely?
Now connecting them becomes a mechanical task, which an AI does well. Detecting them in the sketch also becomes a mechanical task, you don't need pixel perfection, because the components will be pixel-perfect once in place, and you can think and operate in terms of logical structure and the general, well, topology of the layout. The machine can pick it up and map to your design system.
If you're a mechanical engineer, imagine being used to need to produce bespoke connectors for everything you build, and then switching to a set of few standard bolts and nuts, or, again, Lego blocks. Suddenly you can assemble significant things in days, not weeks. (Then you add a robot that can read sketches, and days become hours.)
I agree. There's a link to another article[1] where they describe their design system, but it doesn't provide much extra insight for me. They have a good diagram, but they don't define the pieces of it well enough for me to understand the whole system (that said I've never built one).
From the page I mention:
> Effective design systems rely on strong foundations through at least three core pieces: principles, styling infrastructure (design tokens), and basic elements.
Cool but what does that look like? I think it's key because they do say that a well-built design system is what makes it possible for AIs to build out interfaces for you, and given what I know of LLMs that does make the most sense. The more certainty you provide the system the better it does at accomplishing your goals.
[1] https://medium.com/paychex-ux/your-design-system-isnt-a-comp...
A design system generally consists of two primary components:
- Code Resources: These include elements such as CSS/HTML, React components, and design tokens. Typically, these resources are part of a decoupled frontend setup that can be seamlessly integrated into various applications.
- Implementation Guidelines: These guidelines address both the technical implementation and, crucially, the UX/UI considerations, including the maintenance of a corporate identity.
Typically, a dedicated team develops and maintains the design system or UI library, while other teams utilize these resources in their respective applications.
I’m not a skeptic, I know that AI is super powerful, because I use it every day.
But I also have been trying to get it to produce quality UI for a long time, and have never succeeded.
So, I’m gonna need to see some proof.
Such wonderful product reviews, then I try said AIs, and man it is so clumsy even when given a precise set of instructions. There is no way the product is the same. Tried Cursor, Windsurf and IntelliJ Junie and they’re all incapable of, for example, reducing the XML of a file until a JUnit stops failing.
Do you have to ask for them to be included? Is the AI going to refuse their inclusion? Or will a future version of that AI service include them every time without asking, and you have to either scrape the code out by hand or move to the extra premium tier?
The two major areas are writing and design, where way too much blog style tech writing injects so many side comments that it conceals any substance, and design has become about the expression of the designer as opposed to connecting users to what they are trying to achieve. The emergence of these chat interfaces side steps both, although unfortunately the writing style of LLMs tends to ape many of the worst aspects of human writing it can at least be told to filter it out.
I once worked with a product team that wrote a user story "The system should establish the user intention and then do it" and they're dangerously close to getting something resembling what they asked for, but it will get rid of our current work divisions of product/dev/design in the process, along with the associated tooling.
It's definitely a great tool to quickly bootstrap something, but I find myself thinking "I should have better done that myself" more and more.
This isn’t really ambitious. Tools like Chef[0] can already one shot full stack apps with db and API integrations.
So the question is what the “limit” will be.
The problem, however, is these tools can maybe help build the initial prototype but that’s a far-cry from building and maintaining a product over the years.
I would like to see these companies demonstrate how their little-magic-tools can perform long-term, because people can already start with a Laravel template and have a full backend with Auth to boot.