DESIGN.md：又一个你必须知道的Markdown文件

用户11563501

发布于 2026-06-23 14:04:10

2690

Google Stitch最近推出了一个简单的方法：DESIGN.md。一个Markdown文件，放在项目根目录，Claude、Cursor、Copilot这些AI助手都能直接读取。

DESIGN.md是什么？

DESIGN.md是Google Stitch引入的新概念，一个纯文本的设计系统文档。AI助手读取后能生成一致的UI。

这个文件里面有颜色调色板、字体规则、间距尺度、按钮样式、网格系统等基础设计规范。不需要Figma导出，也不需要JSON配置文件。

DESIGN.md文件遵循Stitch格式，包含9个核心部分：

视觉主题和氛围 - 情绪、密度、设计哲学
色彩调色板和角色 - 语义名称+十六进制值+功能角色
排版规则 - 字体族、完整层级表
组件样式 - 按钮、卡片、输入框、导航及其状态
布局原则 - 间距尺度、网格、留白哲学
深度和层次 - 阴影系统、表面层次
该做和不该做 - 设计护栏和反模式
响应式行为 - 断点、触摸目标、折叠策略
AI助手提示指南 - 快速色彩参考、即用提示词

Markdown是大模型最擅长读取的格式，所以AI助手能直接理解你的UI应该长什么样。

---
name: DevFocus Dark
colors:
  primary: "#2665fd"
  secondary: "#475569"
  surface: "#0b1326"
  on-surface: "#dae2fd"
  error: "#ffb4ab"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
rounded:
  md: 8px
---

# Design System

## Overview
A focused, minimal dark interface for a developer productivity tool.
Clean lines, low visual noise, high information density.

## Colors
- **Primary** (#2665fd): CTAs, active states, key interactive elements
- **Secondary** (#475569): Supporting UI, chips, secondary actions
- **Surface** (#0b1326): Page backgrounds
- **On-surface** (#dae2fd): Primary text on dark backgrounds
- **Error** (#ffb4ab): Validation errors, destructive actions

## Typography
- **Headlines**: Inter, semi-bold
- **Body**: Inter, regular, 14–16px
- **Labels**: Inter, medium, 12px, uppercase for section headers

## Components
- **Buttons**: Rounded (8px), primary uses brand blue fill
- **Inputs**: 1px border, subtle surface-variant background
- **Cards**: No elevation, relies on border and background contrast

## Do's and Don'ts
- Do use the primary color sparingly, only for the most important action
- Don't mix rounded and sharp corners in the same view
- Do maintain 4:1 contrast ratio for all text