What is a DESIGN.md?
A Markdown file that describes a visual style: colors, type, layout and components. Put one in your project and your coding agent has a specific direction to follow instead of guessing. TheDESIGN.md guide covers the format in detail, and there's ablank template for writing your own.
How to use one
- Find a style you like in the library. There are 1,186 so far.
- Copy it or download it, and save it as
DESIGN.mdat the root of your project. - Ask your agent to follow
DESIGN.mdwhen it builds your UI.
Each design page also has a one-line curl command. For tools, the full list is at /api/designs.json.
Where the guides come from
The guides are used under the MIT License and edited for this library, with metadata added for sorting and filtering. The copyright notice and license text are on the licenses page, and each downloaded file links to it.
A guide describes how a public website looks. It is not an official design system, and it can be out of date or wrong in places. Colors and fonts come from the guides and are not independently verified.
Screenshots and trademarks
Screenshots show how each site looked when captured. Site names, logos and trademarks belong to their owners, and OpenDesignMD is not affiliated with or endorsed by any of them. Fonts in a guide may need their own license, and a guide does not give you the right to copy another company's brand.
Likes
Liking a design adds one to its public count and keeps it in your Liked list. There are no accounts: your list stays in this browser and doesn't sync between devices. Each like is stored with a random ID kept in your browser, so you can take it back. We don't store your IP address with it. The privacy policy has the details.
Contact
Questions, corrections or a site you'd like added: [email protected]. If you own a site shown here and want something changed or removed, see takedown requests.