Design Systems Are Changing.

Most traditional design systems were built for a world where designers created screens, then developers had to interpret and rebuild them.

But now that AI is doing most of the manual work, this workflow is changing.

Instead of only creating visual components in Figma, we now need something AI can actually understand:

A clear set of text-based rules, constraints, patterns, examples, and design decisions.

That’s what I call an AI-friendly design system.

It’s basically a folder of markdown files that tells any AI tool how your product should look, feel, behave, and respond.

You can use it with any AI tool that can read text files.

Here’s the workflow.

You need a source of truth.

This can be:

If you’re starting from scratch, use AI to generate and refine a UI until you have something you want to move forward with.

Once you have a page you’re happy with, use that as the foundation for your design system.

Attach the HTML, code, screenshots, or product references to an AI chat.

Then use the following prompt to extract the design decisions from the UI and turn them into markdown files.

This tells AI to extract all the necessary properties and rules and design decisions from your website to build a markdown based design system.

These markdown files become your AI-friendly design system.

Once the AI generates the markdown files, save them together in one folder (You don’t need to read them).

This folder is now your design system, a text-based system that any AI can follow.

This is the most important part!

Attach the design system files to different AI platforms and ask each one to generate the same screen.

If you only use one platform, test it in multiple private chats.

The goal is to find inconsistencies.

If one AI creates a top navigation and another creates a sidebar, that means your design system did not define the navigation rules clearly enough.

That inconsistency is not a failure.

It’s a gap.

And every gap tells you exactly what to improve.

Go back to the AI chat where you created the design system and ask it to update the markdown files.

For example:

“Update the design system so this product always uses a left sidebar navigation on desktop. Never use a top navigation unless specifically requested.”

Keep doing this for every inconsistency you find.

This is how the design system becomes stronger over time.

Sometimes, you’ll want to reuse or fix one specific section of a UI.

For example, maybe one AI generated a section that you like, and you want to add it to your design system.

Screenshots might work, but they’re not always accurate.

Code might work, but it can be too dependent on the full page.

The more reliable method is to create a mini markdown guide for that section only.

Ask AI:

“Create a markdown design guide for this section so another AI can replicate it accurately.”

Then attach that mini guide when asking the “Design System” AI to implement an update.

This turns even small UI sections into reusable design instructions.

Markdown can describe the design rules, but some assets should not be recreated by AI.

If your product uses specific logos, icons, illustrations, images, or fonts, create an assets folder inside your design system.

Then document how those assets should be used inside an asset-manifest.md file.

For example:

This keeps your brand consistent and prevents AI from inventing or distorting important visual elements.

You don’t need a complex system for every project.

If you’re working on a small product, landing page, or MVP, you can start with one file:

design.md

That file can include:

That’s the most basic version of an AI-friendly design system.

And for many projects, that’s enough.

AI can generate UI very quickly.

But without clear rules, every output starts drifting.

An AI-friendly design system solves that by giving AI a source of truth.

A set of rules it can actually read, follow, and reuse.

This is how design systems evolve for the AI era.

Instead of designing components, we now design the instructions that generate the components.

I made a quick video showing the complete workflow, including how to extract the files, test them across AI tools, find inconsistencies, and update the system.

Watch it here: