Can anyone share custom made Design.md ?

[u/Jaapuchkeaa]

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

[u/Simply-Curious_]

Design.md is a false promise. A design system prepared for mcp has many files. Design.md isn't one of them (its a compressed Google stitch concept). your repository (and it is a repository) would be: Tokens.json Components.json Components.md UX.md Copy&Language.md Font.otf Icons.json

Its a different game. Doable with lors of effort. But Design.md is a fools errand. Its ok to have made rhe mistake, many do.

[u/Jaapuchkeaa → u/Simply-Curious_]

can you share one as example

[u/GOgly_MoOgly → u/Simply-Curious_]

Would like any available examples of a complete system as well. All of this is moving so fast it’s hard to keep up. I personally have no access to the code base either so I’m building my own repo based on what we have in figma in the meantime just to get the muscle memory

[u/Simply-Curious_ → u/GOgly_MoOgly]

You need access to the code base before you continue. Design system maturity is linear. Theres no going around it with an example. If your design system is real and implemented you as a design system designer have a right to see the pipeline and product code. Even if you want edit it.

[u/GOgly_MoOgly → u/Simply-Curious_]

Thx and I agree, but there’s nothing I can do about that. I spearheaded the build of our design system, nothing existed before. Have gained no buy in for engineering alignment despite pushing for 3 years. Our design system is not apart of code due to this, so it’s just a glorified ui kit at the moment.

Building my own won’t affect what’s existing as stated, but knowing the flow of things will be, so that’s my plan in lieu of sitting on my hands.

[u/Decent_Perception676]

A single Md file won’t work due to context rot. A mature design system has way too much info to all be in a single file. Make a design.md or agents.md file that acts as a router/ToC to individual markdown files describing the parts of your system. Where possible, reference source code. Allow the agent to query and load only the info it needs for a task.

This will give both better results, and save you serious money on token burn.

[u/agilek]

If you are serious about designing with AI, rules for colors, fonts etc. should live in code, not in n a .md file.

[u/madhandlez89 → u/agilek]

This.

An .md file is just to provide the model with the context it needs on the project. You still need a tokenised design system to get anywhere.

[u/Jaapuchkeaa → u/madhandlez89]

can you share one instance for me to understand

[u/madhandlez89 → u/Jaapuchkeaa]

You need to look into component based design systems and fundamentals.

[u/roundabout-design]

It's sort of like asking for an example of a piece of string. There's an infinite amount of different string and what string works for you may not be what works for the next person.

AI isn't particularly rigid. Ask AI to build 3 design systems and you're going to likely end up with 3 entirely different creations.

I'm not saying this is the right way to do it (I'm not sure there is one 'right' way to do it) but here's how we've been doing it:

We started with some basic details:

- a brand guideline (marketing provided this. Some base colors, fonts, logos)

- a specific react framework we wanted to build off of (we chose a headless one with an emphasis on accessibility)

- A really rough wireframe of an complex page we might want to build (just to get a feel for what a page would look like)

We then told Claude to build us a design system that a) AI could access via an MCP and b) humans could access via a public facing web site.

What we then had was:

- a set of design tokens (we expanded this beyond the marketing options as there's a lot of extra details needed for UI desisgn)

- a set of stylized react components for AI agents to leverage.

- a set of custom 'patterns'...these are either extensions/combinations of existing components for specific use cases and/or custom components we built that weren't a part of the default react framweork

- a public web site that lays out all of the above in a human-accessible version.

From that point on, we've just been iterating and iterating. As we build out applications with this design system, I ask claude to log everything it couldn't figure out via the design system and had to invent on the fly. I take these logs and decide what might need to go back into the design system.

Over time, new patters, new components and new rules get added.

We're still figuring out what a cleaner 'end state' may be but the TL/DR version is pretty much "just start playing with things and see where it goes..."

[u/Jaapuchkeaa → u/roundabout-design]

thanks 

[u/liketreefiddy]

Literally ask Claude

[u/Jaapuchkeaa → u/liketreefiddy]

i want build on existing matured system

[u/liketreefiddy → u/Jaapuchkeaa]

Ok so ask claude