When AI UI Always Looks the Same: DESIGN.md Resources and How to Use Them
1. Give AI a set of design criteria
If screens made with Claude Code or Cursor always look similar, you can document the criteria for design decisions in a file and share it with the agent.
- DESIGN.md records colors, typography, spacing, components, and design intent in Markdown.
- Manage it alongside the project's code and connect it so the agent can refer to it while working.
- These resources fall into two broad groups.
- Brand-based files: Establish a design direction by referencing the visual structure of existing services.
- Principles files: Document rules needed in actual use, such as forms, keyboard navigation, focus, and accessibility.
2. Choose resources for the result you want
The DESIGN.md ecosystem includes resources with different roles, from style collections to specifications, checklists, and review skills.
- When setting a visual direction
- VoltAgent/awesome-design-md: A reference collection for comparing design files and previews from different brands.
- Anthropic's frontend-design: Helps move beyond generic AI design and bring intention to aesthetic direction, font pairings, and layouts.
- bergside/awesome-design-skills: Combines guidance for styles such as brutalism and editorial design with component states and accessibility criteria.
- When connecting team criteria to documentation and code
- google-labs-code/design.md: A format combining structured design tokens and explanations, with validation and export features.
- kwakseongjae/oh-my-design: A workflow for organizing a project's design criteria while distinguishing verified information and the quality levels of reference materials.
- When checking interface quality
- Vercel Web Interface Guidelines: Covers rules that are easy to miss during implementation, including forms, keyboard behavior, focus, animation, and performance.
- raunofreiberg/interfaces: A checklist for revisiting small interface details such as inputs, buttons, and typography.
- gnurio/refactoring-ui-plugin: An independent plugin based on the methodology of Refactoring UI for reviewing visual hierarchy, spacing, and color after implementation.
- When building mobile screens
- Meliwat/awesome-ios-design-md: A collection of design systems covering mobile component states as well as motion and haptics.
3. Combine style files with principles files
Adding interaction and accessibility criteria to a file that sets visual direction also clarifies how to evaluate the generated result.
- If you want to establish a visual direction quickly
- Combine a VoltAgent reference file with Vercel's interface rules.
- If the output looks too uniform
- Define the aesthetic direction with frontend-design and add the style guidance you need.
- If you want to maintain a team's design system over time
- Explore the token and export features of the Google Labs format and the management workflow in oh-my-design.
4. Leave clear priorities rather than more instructions
Trimming and organizing files for the project matters as much as adding them.
- Start with the color, typography, and component rules you currently use.
- Record priorities and exceptions when visual style and accessibility criteria conflict.
- Distinguish the structure you want to take from brand references from the expression you will adapt for your own product.
- Apply the files to one small screen first, then review both the generated result and its actual behavior.
