Meet DESIGN.md: A new open standard for AI-generated UI

Understanding DESIGN.md: A Comprehensive Overview

What is DESIGN.md?

• Definition: DESIGN.md is a text file that outlines a visual identity, providing agents with a structured understanding of a design system.

• Content: It includes essential elements such as colors, typography, and rules governing the design's coherence.

• Functionality: When Stitch generates designs, it references this file to make informed design decisions based on the defined parameters.

The Growing Use Case for DESIGN.md

• Adoption: The use of DESIGN.md files has expanded into IDEs and various agent tools, with numerous GitHub repositories curating these systems.

• Specification Update: An update introduces the first draft of a specification for the format of DESIGN.md to standardize its usage across different platforms.

Structure and Information in DESIGN.md

• Types of Information: Contains two main types—reasoning (why certain choices were made) and actual values (specific hex codes and font sizes).

• Tokens Section: Introduces a Tokens section that consolidates reasoning and values within one file to prevent drift between style guides and config files.

Understanding Design Tokens

• Definition of Token: A token represents a decision rather than just a variable; it defines roles within the design system (e.g., primary color as text color).

• Baseline Decisions: The specification mandates defining primary colors which serve specific emotional roles in user experience.

New Sections in the Specification

• Components Section: A new section under development that allows components to reference defined roles instead of static hex codes.

• Feedback Invitation: Encouragement for community feedback on the evolving Components section to shape its future direction.

Conclusion on Specification Updates

• GitHub Repository Launch: The first draft of the specification is available on GitHub for public access, allowing contributions through issues or pull requests.

Evolution of DESIGN.md and Its Core Principles

Establishing Common Ground in Design Specifications

• The original use of DESIGN.md has evolved significantly, with numerous tools now generating and consuming these specifications in unexpected ways. Establishing core rules is essential for a unified approach.

• By creating a common foundation, variations in the interpretation of DESIGN.md can be minimized, while still allowing for extensions and customizations tailored to specific design systems.

• The goal is to provide a reliable structure that balances flexibility and creativity within design specifications, ensuring all users can work effectively from the same base.

Integration of Tools with DESIGN.md

• A Command Line Interface (CLI) has been introduced to validate DESIGN.md files against the specification. This allows agents to check their own modifications directly within the context of the file.

• An example illustrates how an agent adds an accent button but encounters a contrast ratio issue flagged by the linter, demonstrating how agents can learn from validation processes and adjust their outputs accordingly.

• The update's primary aim was to enhance usability outside of Stitch, fostering a shared understanding among users regarding DESIGN.md specifications.