尧图网站建设 
从0到1写出DESIGN.md通过lint校验的第一份设计系统文件【免费下载链接】design.mdA format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.项目地址: https://gitcode.com/GitHub_Trending/de/design.mdDESIGN.md 是一个给 AI 编码代理coding agents描述视觉识别的文件格式它让设计系统Design System变成一份机器可读 人类可读的文档。本文将带你从 0 到 1 写出你的第一份 DESIGN.md 设计系统文件并用官方 CLI 的 lint 命令一次性通过校验。全程只需 3 个步骤不需要设计背景。一、DESIGN.md 设计系统文件是什么一句话概括DESIGN.md 设计令牌YAML front matter 设计理由Markdown 正文。层内容作用YAML front matter颜色、字体、圆角、间距、组件令牌给代理精确的数值Markdown 正文##章节 文字说明告诉代理为什么这样取值完整的格式规范见 docs/spec.md理念背景可看 PHILOSOPHY.md。二、准备工作安装校验工具写文件前先装好质检工具这样每写一步都能立刻验证npm install google/design.md Windows 用户若遇到命令无输出请改用designmd别名npx -p google/design.md designmd lint DESIGN.md三、第 1 步写 YAML 设计令牌在文件开头用---分隔符包裹 YAML最低限度只需要name、colors、typography三组--- name: My Brand colors: primary: #1A1C1E secondary: #6C7278 tertiary: #B8422E neutral: #F7F5F2 typography: h1: fontFamily: Public Sans fontSize: 3rem body-md: fontFamily: Public Sans fontSize: 1rem rounded: sm: 4px md: 8px spacing: sm: 8px md: 16px ---⚠️ 两个新手高频坑必须定义primary颜色否则会触发missing-primary警告颜色值写任意合法 CSS 颜色即可hex、rgb()、oklch()都支持四、第 2 步按顺序写 Markdown 正文正文用##标题组织章节可省略但顺序固定Overview别名 Brand StyleColorsTypographyLayoutElevation DepthShapesComponentsDos and Donts每个章节只需 2~4 句话说明这个令牌怎么用。例如 Colors 章节直接解释每个色板的用途这样代理才能把数值用对地方。五、第 3 步用 lint 命令通过校验在文件旁运行npx google/design.md lint DESIGN.md输出是结构化 JSON包含findings问题列表和summary错误/警告/信息统计。退出码为 0 代表无 error即通过校验六、常见 lint 警告速查表linter 共 11 条规则新手最常遇到这几种规则级别触发场景修复方法broken-referror{colors.primary}指向不存在的令牌检查令牌名拼写missing-primarywarning有颜色但没有primary补一个 primary 色板contrast-ratiowarning组件背景/文字对比度低于 WCAG AA4.5:1调整配色或换浅色文字section-orderwarning章节顺序不对按上面 8 节顺序重排orphaned-tokenswarning定义了颜色却没被组件引用在 components 中引用它参考实现packages/cli/src/linter/fixtures/HERITAGE.md 是一份能跑通的完整样例。七、进阶玩法diff 与 export对比版本npx google/design.md diff DESIGN.md DESIGN-v2.md—— 检测令牌级回归适合设计系统迭代时当 CI 卡点导出主题npx google/design.md export --format json-tailwind DESIGN.md—— 直接把令牌转成 Tailwind v3 配置或 DTCG tokens.json详见 README.md 的 CLI Reference 一节八、想抄作业看这三份官方示例仓库的 examples/ 目录收录了三套真实风格的设计系统文件建议对照学习毛玻璃天气应用examples/atmospheric-glass/DESIGN.md宠物出行品牌examples/paws-and-paths/DESIGN.md日全食音乐节examples/totaleity-festival/DESIGN.md也可以克隆仓库本地研究只读使用即可git clone https://gitcode.com/GitHub_Trending/de/design.md小结步骤动作验收1写 YAML 令牌含 primary 颜色 typography2按 8 节顺序写正文每个令牌都有用途说明3lint校验退出码 0errors 为 0按这三步走你的第一份 DESIGN.md 设计系统文件就能通过 lint 校验让 AI 代理从此看得懂你的品牌 【免费下载链接】design.mdA format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.项目地址: https://gitcode.com/GitHub_Trending/de/design.md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 从0到1写出DESIGN.md：通过lint校验的第一份设计系统文件
从0到1写出DESIGN.md通过lint校验的第一份设计系统文件【免费下载链接】design.mdA format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.项目地址: https://gitcode.com/GitHub_Trending/de/design.mdDESIGN.md 是一个给 AI 编码代理coding agents描述视觉识别的文件格式它让设计系统Design System变成一份机器可读 人类可读的文档。本文将带你从 0 到 1 写出你的第一份 DESIGN.md 设计系统文件并用官方 CLI 的 lint 命令一次性通过校验。全程只需 3 个步骤不需要设计背景。一、DESIGN.md 设计系统文件是什么一句话概括DESIGN.md 设计令牌YAML front matter 设计理由Markdown 正文。层内容作用YAML front matter颜色、字体、圆角、间距、组件令牌给代理精确的数值Markdown 正文##章节 文字说明告诉代理为什么这样取值完整的格式规范见 docs/spec.md理念背景可看 PHILOSOPHY.md。二、准备工作安装校验工具写文件前先装好质检工具这样每写一步都能立刻验证npm install google/design.md Windows 用户若遇到命令无输出请改用designmd别名npx -p google/design.md designmd lint DESIGN.md三、第 1 步写 YAML 设计令牌在文件开头用---分隔符包裹 YAML最低限度只需要name、colors、typography三组--- name: My Brand colors: primary: #1A1C1E secondary: #6C7278 tertiary: #B8422E neutral: #F7F5F2 typography: h1: fontFamily: Public Sans fontSize: 3rem body-md: fontFamily: Public Sans fontSize: 1rem rounded: sm: 4px md: 8px spacing: sm: 8px md: 16px ---⚠️ 两个新手高频坑必须定义primary颜色否则会触发missing-primary警告颜色值写任意合法 CSS 颜色即可hex、rgb()、oklch()都支持四、第 2 步按顺序写 Markdown 正文正文用##标题组织章节可省略但顺序固定Overview别名 Brand StyleColorsTypographyLayoutElevation DepthShapesComponentsDos and Donts每个章节只需 2~4 句话说明这个令牌怎么用。例如 Colors 章节直接解释每个色板的用途这样代理才能把数值用对地方。五、第 3 步用 lint 命令通过校验在文件旁运行npx google/design.md lint DESIGN.md输出是结构化 JSON包含findings问题列表和summary错误/警告/信息统计。退出码为 0 代表无 error即通过校验六、常见 lint 警告速查表linter 共 11 条规则新手最常遇到这几种规则级别触发场景修复方法broken-referror{colors.primary}指向不存在的令牌检查令牌名拼写missing-primarywarning有颜色但没有primary补一个 primary 色板contrast-ratiowarning组件背景/文字对比度低于 WCAG AA4.5:1调整配色或换浅色文字section-orderwarning章节顺序不对按上面 8 节顺序重排orphaned-tokenswarning定义了颜色却没被组件引用在 components 中引用它参考实现packages/cli/src/linter/fixtures/HERITAGE.md 是一份能跑通的完整样例。七、进阶玩法diff 与 export对比版本npx google/design.md diff DESIGN.md DESIGN-v2.md—— 检测令牌级回归适合设计系统迭代时当 CI 卡点导出主题npx google/design.md export --format json-tailwind DESIGN.md—— 直接把令牌转成 Tailwind v3 配置或 DTCG tokens.json详见 README.md 的 CLI Reference 一节八、想抄作业看这三份官方示例仓库的 examples/ 目录收录了三套真实风格的设计系统文件建议对照学习毛玻璃天气应用examples/atmospheric-glass/DESIGN.md宠物出行品牌examples/paws-and-paths/DESIGN.md日全食音乐节examples/totaleity-festival/DESIGN.md也可以克隆仓库本地研究只读使用即可git clone https://gitcode.com/GitHub_Trending/de/design.md小结步骤动作验收1写 YAML 令牌含 primary 颜色 typography2按 8 节顺序写正文每个令牌都有用途说明3lint校验退出码 0errors 为 0按这三步走你的第一份 DESIGN.md 设计系统文件就能通过 lint 校验让 AI 代理从此看得懂你的品牌 【免费下载链接】design.mdA format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.项目地址: https://gitcode.com/GitHub_Trending/de/design.md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考