PDA Design CLI

PDA Design CLI 是 PDA 设计系统规范库的命令行工具，用于读取和导出组件规范、Design Tokens、设计指南和系统内置 SVG 图标，供 AI 编码和项目开发参考。

当前包名：pda-design-cli

命令名：pda-design

安装与使用

# 直接使用
npx pda-design-cli list
npx pda-design-cli add modal-container

# 或全局安装
npm install -g pda-design-cli
pda-design list
pda-design add modal-container

命令

list - 列出可用规范

pda-design list

# 按组件分类筛选
pda-design list --category navigation

输出内容包括：

• Components：组件规范
• Design Tokens：颜色、字号、间距、动效等 Token
• Guidelines：组件 API、图标使用、布局、可访问性等指南
• Icons：系统内置 SVG 图标分类

add - 读取单个规范

# 输出组件规范到终端
pda-design add buttons
pda-design add modal-container

# 输出 Token / Guideline
pda-design add token:colors
pda-design add guideline:spec-template

# 输出图标 SVG
pda-design add icon:add_outline

# 写入指定目录
pda-design add buttons --output ./pda-design-specs

add 默认输出到终端，方便 AI 直接读取；传入 --output 后会写入目标目录。

init - 批量导出规范

# 导出到默认目录 ./pda-design-specs
pda-design init

# 指定输出目录
pda-design init --output ./docs/pda-design-specs

init 会导出组件规范、Tokens、Guidelines、registry.json 和图标索引。SVG 图标按需通过 add icon:<name> 单独获取。

规范目录

pda-design-cli/
├── bin/
│   └── cli.js
├── lib/
│   ├── commands/
│   │   ├── add.js
│   │   ├── init.js
│   │   └── list.js
│   └── fetch.js
├── spec/
│   ├── registry.json
│   ├── guidelines/
│   │   └── spec-template.md
│   ├── tokens/
│   ├── icons/
│   └── *.md
├── package.json
└── package-lock.json

组件规范编写

新增或修订组件规范时，请参考：

• 模板：spec/guidelines/spec-template.md
• 示例：spec/buttons.md
• 示例：spec/modal-container.md

组件规范应包含：

• Purpose
• Use When / Avoid When
• Interaction Flow
• Design Tokens
• Props Contract
• Code Mapping
• AI Notes
• Variants Overview

设计约束

• 图标只使用 spec/icons/ 中的系统内置 SVG 图标。
• 禁止引入 Lucide、Heroicons、Feather、Material Icons 等外部图标库。
• 字体使用 PingFang SC。
• 主色为 Primary #8061DA。
• 动画默认使用 500ms ease-out，自定义动画需在规范中说明原因。
• 所有色值、字号、圆角和间距应映射到 Design Tokens；业务特殊值需注明原因。

发布流程

# 1. 更新 spec 文件和 registry.json
# 2. 同步 package.json、package-lock.json 和 bin/cli.js 中的版本号
# 3. 提交并推送 GitHub
# 4. 发布 npm
npm publish

注意：package.json 的 bin 字段应保持对象格式：

{
  "bin": {
    "pda-design": "bin/cli.js"
  }
}