Question 1

如何修复 @google/design.md 的 css-tailwind 导出中导致 git diff --check 失败的多余行尾换行符问题？

Accepted Answer

在 `@google/design.md@0.3.0` 中，`serializeTailwindV4()` 已经会追加一个末尾换行符，但 CLI 使用了 `console.log()`，它又会额外添加一个换行符。修复导出器的方法是：针对 `css-tailwind` 导出输出，将 `console.log(output)` 替换为 `process.stdout.write(output)`。在包含该修复的版本发布之前，可在导出后对生成的文件进行规范化处理：

```bash
./node_modules/.bin/designmd export --format css-tailwind DESIGN.md \
  | perl -0pe 's/
+\z/
/' > out.css
```

验证文件末尾恰好只有一个换行符：

```bash
python3 -c "from pathlib import Path; b=Path('out.css').read_bytes(); print(len(b)-len(b.rstrip(b'\n')))"
```

预期结果为 `1`。这样可以防止 `git diff --check` 等严格的空白字符检查在已检入的生成 CSS 文件上报错。

Question 2

如何将设计令牌从 DESIGN.md 导出为原生 CSS 自定义属性？

Accepted Answer

使用 `css-vars` 导出格式：

```bash
npx @google/design.md export --format css-vars DESIGN.md > design.tokens.css
```

这会生成一个包含 CSS 自定义属性的 `:root` 代码块，例如：

```css
:root {
  --color-primary: #1A1C1E;
  --spacing-md: 16px;
}
```

要为每个变量添加命名空间前缀，请使用 `--prefix`：

```bash
npx @google/design.md export --format css-vars --prefix ds DESIGN.md > design.tokens.css
```

深色主题和媒体查询变体未包含在初始实现中；该支持已在 PR #109 中添加。

Question 3

用简单的话来说，什么是量子计算？

Accepted Answer

普通计算机使用比特（bit），其状态要么为 1（开），要么为 0（关）。量子计算机使用量子比特（qubit），在结果被测量之前，它可以处于一种称为叠加态（superposition）的混合状态。这使得量子计算机能够在某些复杂计算中同时探索多种可能性，不过它们并不仅仅是普通计算机的加速版本。

Question 4

如何修复运行 @google/design.md lint 时出现的 "raw.match is not a function" 错误？

Accepted Answer

当 DESIGN.md 中的 `spacing` 值为 YAML 非字符串值（例如 `unit: 8`）时，@google/design.md@0.2.0 会发生此崩溃。请升级到 v0.3.0，该版本包含运行时类型守卫（type-guard）修复。作为变通方案，请为所有尺寸值加上引号：

```yaml
spacing:
  unit: "8"
  "1": "4px"
```

请使用 `unit: "8px"`，而不要使用 `unit: 8` 或不带引号的 `unit: 8px`。

Question 5

如何让 Color 和 Dimension 类型定义基于 spec-config.yaml 实现数据驱动？

Accepted Answer

升级到 v0.4.0，此版本中原始类型从 `spec-config.yaml` 渲染。如果手动应用此更改，请添加一个 `types` 部分，例如：

```yaml
types:
  Color:
    description: "A color value is any valid CSS color string."
    formats:
      - "Hex: #RGB, #RGBA, #RRGGBB, #RRGGBBAA"
      - "Named colors: red, cornflowerblue, transparent"
      - "Functional: rgb(), rgba(), hsl(), hsla(), hwb()"
      - "Wide-gamut: oklch(), oklab(), lch(), lab()"
      - "Mixing: color-mix(in srgb, ...)"
    note: "All color values are internally converted to sRGB for WCAG contrast checking."
  Dimension:
    description: "A dimension value is a string with a unit suffix."
    units: [px, em, rem]
```

然后从 `spec.mdx` 中移除静态的 Color 和 Dimension 描述文本，并更新 spec 生成器，使其遍历 `spec-config.yaml` 中的 `types`，方式与渲染 `typography_properties` 相同。运行 spec-config 和 spec-generator 测试以验证输出。

design.md

项目简介

README 预览

常见问题 (5)

同类型项目

hermes-agent

firecrawl

go

markitdown