There is a site with DESIGN.md files for 500+ brands from Apple to Stripe to Linear. Each file has every color, font, spacing value, and component in one place. Paste the link into any AI coding tool, ask for a section, and it comes back matching the brand on the first try. No style guide hunting. No back-and-forth on hex codes.
Every time you ask an AI coding tool to build a UI section, the same problem surfaces.
You write "make it look modern and clean." The tool builds something that is technically correct and visually generic. You then spend the next hour in back-and-forth: change the primary to #6366F1, use Inter not system font, add more whitespace between sections, reduce the border radius. Each prompt fixes one thing and breaks another.
The problem is not the model. The problem is that you gave it a description instead of a specification. Every website you admire runs on a design system: a complete set of decisions about colors, type scale, spacing, and components that someone made once and applied consistently. Your AI never had access to those decisions until you handed them over explicitly.
DESIGN.md files are the bridge. They are structured files that contain a brand's complete design system in one readable document. Paste the link into your AI coding tool and the model reads the specification before it builds anything. The output matches the brand on the first try because the tool knows the exact values, not vague descriptions.
What Is a DESIGN.md File?
A DESIGN.md file is a structured markdown document containing every decision in a brand's design system:
- Color palette with exact hex values for every role (primary, secondary, background, surface, border, text, error, etc.)
- Typography: font families, weights, size scale, line heights, letter spacing
- Spacing system: the base unit and the full scale
- Border radius values for every component type
- Shadow styles
- Component specifications: button variants, input states, card layouts, navigation patterns
When you paste a DESIGN.md link into an AI coding tool and ask it to build a section, the model reads the file before generating any code. It uses the exact values from the specification instead of approximating from your description. That is why the first output matches the brand.
Where to Find DESIGN.md Files for 500+ Brands
The shadcn Design site has a curated library of DESIGN.md files for major brands. The library includes Apple, Linear, Stripe, Notion, Vercel, Figma, Loom, Intercom, and hundreds more.
Step 1: Find the brand you want to match.
Go to the shadcn Design section (available at ui.shadcn.com/design or the equivalent path in the current shadcn documentation). Browse the brand list. If you are building a pricing page and want it to feel like Linear, find Linear. If you are building a dashboard and want it to feel like Vercel, find Vercel.
Pick one. Not a blend of three. One consistent reference.
What good looks like at this step: You have identified the specific brand and you can see its DESIGN.md file in the library. You can open the file and see the color variables, typography section, and component specs listed out.
The mistake that makes this step fail: Picking a brand that is too similar to your existing UI and then wondering why the output looks the same. If the goal is a visual shift, pick a brand that is noticeably different from where you are now. The more distinct the reference, the more clearly the model can apply the specification.
Step Two: Paste the Link Into Your AI Coding Tool
Copy the URL of the DESIGN.md file from the library. Open your AI coding tool (Claude, Codex, Cursor, or any tool that accepts web URLs or document uploads) and paste the link with your build request.
Copy: Section build prompt
Copy this.
Read the design system at this URL: [PASTE DESIGN.MD URL HERE] Build a [SECTION TYPE] using this design system. Match the typography, spacing, colors, and component styles exactly as specified in the file. Section content: [DESCRIBE WHAT SHOULD BE IN THE SECTION]
Example:
Copy this.
Read the design system at this URL: [Linear DESIGN.md URL]
Build a pricing comparison table using this design system. Match the typography, spacing, colors, and component styles exactly as specified.
Section content: Three tiers (Starter, Pro, Enterprise). Starter at $49/month, Pro at $149/month, Enterprise custom pricing. Features list with checkmarks. Highlighted recommended plan (Pro).
What good looks like at this step: The model returns a component that uses the exact colors from the specification, the correct font families and weights, and spacing that matches the brand's scale. If you are building a Linear-style section, it should feel unmistakably Linear, not "Linear-ish."
What to do if the output is still generic: The model may not have read the file if you did not paste a directly accessible URL. Check whether the URL requires login. If the DESIGN.md file is behind authentication, copy the raw content of the file instead and paste it directly into your prompt inside a code block.
Step Three: Add Limora AI MCP for Visual Components
For UI sections that include visual elements, charts, illustrations, or data graphics, connecting Limora AI's MCP server lets the model generate visual components that match the design specification.
Limora AI reads the same DESIGN.md context and generates visuals that stay within the brand's color palette and style. Without it, the text and layout components match but any visual elements are generated from the model's defaults.
How to connect it:
Follow the setup documentation at limora.ai. The MCP server connects to your AI coding tool the same way any MCP server does: add it to your MCP config file, restart the tool, and it is available as a tool the model can call.
Once connected, add this to your section build prompt:
Copy this.
For any visual components in this section, use the Limora AI MCP tool to generate them. Use the same design tokens from the DESIGN.md file for all generated visuals.
What good looks like at this step: Data visualizations, icons, and illustration-style elements match the brand's palette and aesthetic, not the model's default visual style. The whole section is visually consistent from the typography down to any generated graphics.
Note: Limora AI MCP is an optional step for operators building data-heavy or visually complex UI sections. For most standard UI work (pricing pages, feature grids, hero sections, testimonials), the DESIGN.md plus your AI coding tool covers the full workflow without it.
What This Changes in Your Development Workflow
Client work: When a client wants their product's dashboard to match their marketing site, you have the brand's design tokens in one file. Build to specification instead of approximating it.
Internal tools: Most internal tools are built fast and styled minimally. Picking one of the 500+ DESIGN.md brands gives your internal tool a consistent visual language in under an hour.
Rapid prototyping: Instead of spending the first two hours of a prototype session correcting styles, you spend those two hours building actual features. The visual language is settled before you write the first component.
Consistency across collaborators: If two developers are building sections of the same UI in the same week, they both reference the same DESIGN.md file. The output is consistent without requiring a design review.
What This Does Not Cover
Custom brand work. If your client has a proprietary design system that is not in the shadcn library, you need to create a DESIGN.md file from their existing guidelines. That is an additional step. The guide PDF linked below includes a template for writing your own.
Pixel-perfect component libraries. DESIGN.md files specify design tokens, not complete component implementations. The AI builds components that match the tokens. They will not be identical to the reference brand's actual components.
Animations and interactions. Design systems typically do not specify transition timing and interaction states in the depth needed to generate matching animations. Static layout and color matching is strong. Motion design matching is not.
The library changes over time. Brand design systems update. A company redesigns its product. The DESIGN.md files in the library may not reflect the very latest version of a brand's design. Use the library as a reference for the overall style, not as a guarantee of current pixel accuracy.
What to Build This Week
Pick one page or section in a project you are working on this week that has a generic look you want to improve. Open the shadcn Design library. Find one brand that has the visual style you want for that section. Copy the DESIGN.md link. Paste it into your AI coding tool with the section build prompt from Step Two.
Run it once. Review what comes back. Adjust one or two details to fit your specific content. Post or ship it.
The design token library and the step-by-step guide PDF are below.