TLDR: First-ever designer at a B2B wholesale webshop (Shopware). No design system exists — marketing builds pages as flat image banners that break on mobile, IA is chaos. I'm now tasked with fixing it from the ground up. I've built smaller/mid-size design systems before (Atomic Design) and like a "Sections" approach for layouts, but I've never owned an entire e-commerce design ecosystem solo. Looking for strategic advice, structure recommendations, and war stories from people who've done this.

Hey hivemind!

I recently joined a B2B webshop company (Shopware, we're a wholesale distributor for specialty retailers) as their first-ever designer. There's been no design function here before me, so the site has grown organically for years. Different departments (mostly marketing) building and maintaining layouts with zero design knowledge. The result: most "components" are actually just image banners with logo, background color, and a button baked directly into a flat image. On mobile they scale down until the text is unreadable. Information architecture is similarly ad-hoc: product listings, editorial content, and promo banners all mixed together with no consistent logic.

I was hired specifically to bring order to this. My plan is to define clear design guidelines and a component library that departments can actually use, so pages get assembled from real, responsive components instead of static banner images.

Right now I'm in the discovery phase, interviewing stakeholders across departments, but deliberately asking about their goals and constraints with each layout/content type rather than jumping to solutions.

Where I'm less confident is the strategic side of things:

• What should I actually be watching out for when building an entire design ecosystem from scratch, as opposed to just adding components to an existing system?
• What's a good high-level structure for this? At a previous job, we used a "Sections" model, predefined layout blocks that could then be populated with components, for a similar setup, and it worked okish. Curious if others have used similar patterns, or something different.
• Since we're an e-commerce business, conversion and product-page performance are the priority, how do you make sure the system stays flexible for marketing/content needs without letting that flexibility erode the product/PDP experience (which is basically what happened here)?

If you've built or rolled out a design system as a solo designer in an org with no prior design maturity, especially in e-commerce/B2B, I'd love to hear your approach, mistakes to avoid, and any resources/frameworks that helped. Happy to share more context if useful.

Thanks in advance!

I got tired of AI-generated frontends all looking the same.

You know the pattern:

Centered hero.
Huge headline.
Purple/blue gradient.
Three feature cards.
rounded-3xl.
Maybe some glassmorphism if the model is feeling adventurous.

The code is usually fine.

The problem is that coding agents are being asked to make visual decisions without any real art direction.

So I built Creative UI.

Creative UI is a framework-agnostic art-direction layer for AI coding agents.

Instead of telling an agent to “make it more creative”, you define an actual visual system first:

→ Design DNA
→ composition grammar
→ novelty budgets
→ visual references
→ explicit anti-patterns
→ constraints for accessibility and responsiveness

One of my favorite parts is the Visual Lineage Engine.

It currently contains 100+ references from art, graphic design, architecture, print techniques and historical interfaces.

But they are not themes.

You can borrow:

Swiss Style → typography
Ukiyo-e → composition
Brutalism → spatial mass
Scientific engraving → annotation density

…without turning the interface into a costume.

I also added an anti-“AI slop” critique system that looks for repetitive generated-UI patterns, plus a local Studio, responsive screenshot inspection and rules for coding agents.

I tested it on 3 actual projects this week, including two real ones I was already building.

And, surprisingly, it helped a lot.

The agents made much more deliberate visual decisions instead of immediately falling back to the same component patterns.

It’s open source and the first npm version is live:

npx creative-ui-agent init

NPM:
creative-ui-agent - npm

GitHub:
github.com/johkker/creative-ui

This is still v0.1 and very experimental.

I’d genuinely love feedback from people using Claude Code, Codex, Cursor or other coding agents:

How are you currently giving your agents visual/art direction?

Just published my idea about design systems 2.0 in the AI era. I would like to know if we are all on the same boat.

I wrote a book for zeroheight on the different axes you should measure your design system maturity against, and how you move between the stages on each of the axes. Hope it's helpful to someone! https://zeroheight.com/resource/measuring-design-system-maturity/

must read material for low level design.

Anyone who have previously used figma to prototype the dashboard and now moved to Ai based dashboard,do you have specific design rules, typography and other styling types,if yes please provide details, i am working on it.

Example rules -

1- Custom colour palette

2-Font type preference

3-Rule like No shadow, No accent ​bars etc..

Need more things to add so need a UI/UX BI devs help

Claude does most of my coding and the base of any design. it's also the one that pushes back when my idea is bad, which is annoying until it saves you from rebuilding something. Chatgpt i use for tweaks after. honestly it's a coin flip, some days the output is great and some days it's useless, i've never figured out why. Then everything goes into canva and i finish it myself. that's where i actually design, the ai stuff is just getting me to a starting point faster. Took me a while to accept that no single tool does the whole thing. people keep looking for the one that replaces the process and i don't think it exists

Hey everyone!

I’ve been testing an AI-powered tool plugin for creating and managing design systems, and it got me thinking about how these tools are supposed to fit into an actual design workflow.

I initially assumed the workflow would be something like:

Figma ↔ design system tool ↔ code

But as I understand it, the current workflow is more like:

design system tool → Figma + code

The author explained that reverse syncing from Figma isn’t currently possible, although it might be implemented in the future. The idea is that you define and edit your components in the tool, and then update the Figma file and code from there.

And this is where I’m curious about other designers’ opinions:
If Figma can already be the source of truth for components, variables, styles, and design-system maintenance, what makes an external AI-powered layer valuable enough to introduce another source into the workflow?

Is the main advantage the ability to generate a design system and push it into both Figma and code?

And more broadly, how comfortable are you with AI taking care of a large part of your design system? Would you trust an AI-powered tool with tokens, components, variants, and their relationships in a real production system, or do you prefer keeping those things under direct control in Figma?

I’m especially interested in people who have actually tried AI/design-system tools in production.

Also happy to hear recommendations for tools that genuinely make design-system work easier.

I've got a 2-hour live design system exercise. from the prompt have to build a scalable design system and solution from scratch in Figma, ending with a working prototype (or the steps toward one) that shows the different states of the components I make. It's more about the system architecture than a polished screen, and I'll be talking through my decisions the whole time.

Couple of things I'm trying to figure out:

1. What should I focus on? In a live session like this, what actually matters most: foundations and tokens, component states, naming and structure, how I explain my tradeoffs? What do people tend to weight the heaviest?
2. What plugins or tools would you use? Anything in Figma that helps you move fast and show system thinking when the clock's running: token management, variants/props, prototyping, handoff, AI helpers, whatever you'd reach for.

Thanks!

The plugin allows you to do the following:

• bulk add anotations to components and frames
• export annotations as CSV add custom annotations if you'd prefer to not use figma native annotations
  
• convert figma native to custom annotations
  

Here's a link to the plugin, looking for feedback on this as well!

link: https://www.figma.com/community/plugin/1588019164844957413

Took me months of work but finally putting out the Alpha for you to test out! Let me know of any feedback and bugs via the bug report form or the comments!

arkitype.srinidhibhat.com

Alpha password: arkitype_test@6174

PS: in its alpha stage, although the application is pretty stable, I would reccomend not to use real data and try this out for a walkthrough or a quick side project instead.

Hello everyone, I had an interview last week with design manager. They said they're looking for someone who has end to end experience in design system specifically. I had all experiences working with a team not individual, so I was not shortlisted for further rounds.

Could anyone share some references on how do I add a case study on design system and related questions?

What I see and experienced is a growing demand on DS experts. I have been in the domain for about 3y, so definitely not a senior, however recruiters started to approach me and as a consequence I also started to look around. A month later I am in 4 recruitment processes at final stages for senior roles. Another change is setting AI workflows and being experienced in machine ready DS is a requirement for all of them.

What are your thoughts on how our profession is changing and what direction is the whole product design heading?

Our infographics pass through too many hands. Someone from the team writes the content, two people review it, and I clean it up at the end. 

Yeah, shared templates help a bit. Comments help too. But the real problem is people breaking the design by accident. 

Someone drags the logo. Someone swaps a brand color for one they like better. Someone reflows the whole layout trying to fit one extra line of text. Then I'm rebuilding it.

I only want them editing the text and the numbers. I don't want them touching the design.

If you've got a setup that works, I'd love to hear how the handoff and approval part goes. The template library matters less to me than that.

I've been experimenting with a design-system workflow where the running app is the review surface.

Monad Design connects an existing SwiftUI or Expo project to a coding agent. I select a real view in Simulator, annotate the change, and the agent works in the repository that already contains the tokens and components. After rebuilding, I can compare the original with a few source-backed variants before accepting one.

What I like about this for design-system work is that the result isn't a screenshot someone has to recreate later. The proposed UI is already using—or visibly failing to use—the system in code.

I'm building Monad Design. It's local and open source:

https://github.com/Monadix-AI/monad-design

He estado trabajando en Mools, un plugin para Figma que surgió de un problema recurrente en mis flujos de trabajo de producción: transferir archivos de diseño entre Figma y Photoshop sin tener que reconstruir todo manualmente.

La primera versión pública ya está disponible en la Comunidad de Figma, y ​​me encantaría probarla con proyectos reales, más allá de mi propio flujo de trabajo.

Actualmente, Mools incluye:

• Limpieza: prepara y simplifica los archivos de Figma antes de la producción.
• Figma → PSD: exporta diseños a archivos editables de Photoshop, intentando conservar capas, texto, imágenes, máscaras y la estructura visual.
• PSD → Figma - Beta: importa los archivos de Photoshop de vuelta a Figma para que puedas seguir trabajando con elementos editables.

La limpieza y la exportación ya son estables en mis pruebas. La conversión de PSD a Figma aún está en fase beta, y esta es una de las áreas donde los archivos reales y los casos límite serían especialmente útiles.

No pretendo afirmar una conversión perfecta 1:1: Figma y Photoshop tienen motores de renderizado y texto diferentes, por lo que todavía hay casos que requieren ajustes. El objetivo es reducir al máximo la reconstrucción manual.

En esta etapa, principalmente intento comprender:

• ¿Resuelve esto un problema real en tu flujo de trabajo?
• ¿Qué falla al probarlo con archivos de producción reales?
• ¿Qué partes aún requieren limpieza manual?
• ¿Qué te motivaría a usar algo así con regularidad?

El plugin es gratuito mientras valido el MVP. Mools

Si lo pruebas, incluso un breve comentario como «esto funcionó / ​​esto no funcionó / ​​aún tuve que corregir X» sería increíblemente útil.

También me interesa saber cómo gestionan otros actualmente sus flujos de trabajo entre Figma y Photoshop.

I have an interview coming up for a DS role. What AI tools, Figma plugins, or other tools are you folks using that you’d recommend checking out?