3 ms·

Main points: > This morning, I designed an entire enterprise dashboard without opening Figma. I sketched the core flow on paper, annotated it with handwritten

by nomilk 1y ago

Main points: > 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?

troyvit 1y ago
> This sounds great, but I don't understand what their 'design system' actually is [...] 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-component-library-9466d02dfb83 https://medium.com/paychex-ux/your-design-system-isnt-a-comp...
exiguus 1y ago
Notable examples of design systems are Google's Material Design, Apple's Human Interface Guidelines, and the Atlassian Design System. 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.
- whilenot-dev 1y ago
  GP didn't ask what a design system is, they asked how their design system gets fed into the AI toolchain...
  - exiguus 1y ago
    Didn't got that. Perhaps it's also because, from my perspective, the article concluded that designers are increasingly delegating the task of creating elements in Figma to AI. This shift allows them to concentrate more on combining various components, ensuring they are atomic and consistent, and aligning them with the corporate identity, among other responsibilities like A/B testing and so on.
nine_k 1y ago
A design system is a set of Lego bricks. Instead of clay that can become any shape but requires effort, you have a (carefully limited) set of components, alignments, grids, color palettes, etc, which you can easily combine to produce a visually consistent and usable UI. Instead of sweating over margins, color gradients, perfectly balanced columns, etc you put components together, and they work well together without further bespoke tweaking. They have consistently named properties, CSS classes, etc. 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.)

by nomilk 1y ago

troyvit 1y ago

> This sounds great, but I don't understand what their 'design system' actually is [...] 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-component-library-9466d02dfb83 https://medium.com/paychex-ux/your-design-system-isnt-a-comp...

exiguus 1y ago

Notable examples of design systems are Google's Material Design, Apple's Human Interface Guidelines, and the Atlassian Design System. 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.

whilenot-dev 1y ago
GP didn't ask what a design system is, they asked how their design system gets fed into the AI toolchain...
- exiguus 1y ago
  Didn't got that. Perhaps it's also because, from my perspective, the article concluded that designers are increasingly delegating the task of creating elements in Figma to AI. This shift allows them to concentrate more on combining various components, ensuring they are atomic and consistent, and aligning them with the corporate identity, among other responsibilities like A/B testing and so on.

nine_k 1y ago

A design system is a set of Lego bricks. Instead of clay that can become any shape but requires effort, you have a (carefully limited) set of components, alignments, grids, color palettes, etc, which you can easily combine to produce a visually consistent and usable UI. Instead of sweating over margins, color gradients, perfectly balanced columns, etc you put components together, and they work well together without further bespoke tweaking. They have consistently named properties, CSS classes, etc. 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.)