el-plus-cli

从墨刀设计稿自动生成 Vue 页面代码的 CLI 工具。

安装

# 全局安装
npm install -g el-plus-cli

# 或使用 npx
npx el-plus-cli --version

命令

install

安装 AI 助手技能。

# 交互式选择安装
ep-cli install --skills

# 全局安装
ep-cli install --skills --global

# 指定工具安装
ep-cli install --skills -a cursor,windsurf

# 安装到所有检测到的工具
ep-cli install --skills -a all

# 列出可用的 AI 工具
ep-cli install --list

支持的 AI 工具

| 工具 | 项目目录 | 全局目录 | |------|----------|----------| | Claude Code | .claude/skills | ~/.claude/skills | | Qoder | .qoder/skills | ~/.qoder/skills | | Cursor | .cursor/skills | ~/.cursor/skills | | Windsurf | .windsurf/skills | ~/.codeium/windsurf/skills | | Trae | .trae/skills | ~/.trae/skills | | Trae CN | .trae/skills | ~/.trae-cn/skills | | Cline | .agents/skills | ~/.agents/skills | | GitHub Copilot | .agents/skills | ~/.copilot/skills | | Gemini CLI | .agents/skills | ~/.gemini/skills | | OpenCode | .agents/skills | ~/.config/opencode/skills | | Goose | .goose/skills | ~/.config/goose/skills |

Universal Agents

以下工具共享 .agents/skills 目录，避免重复安装：

• Cline
• GitHub Copilot
• Gemini CLI
• OpenCode
• Universal

parse

解析设计稿 URL，提取页面信息。支持多种设计平台，目前已实现墨刀。

ep-cli parse <url> [--name <fileName>]

参数：

• url - 设计稿分享链接（必填，目前支持墨刀）
• --name - 生成的文件名（不含扩展名）

示例：

# 墨刀设计稿
ep-cli parse https://modao.cc/proto/xxx/sharing?view_mode=read_only
ep-cli parse https://modao.cc/proto/xxx/sharing --name orderList

输出：

{
  "success": true,
  "data": {
    "title": "页面标题",
    "labels": ["编号", "名称", "状态"],
    "buttons": ["查询", "新增", "导出"],
    "tableHeaders": ["序号", "编号", "名称"],
    "rawText": "页面全部文本内容...",
    "fileName": "文件名"
  }
}

gen-docs

生成组件文档（仅开发环境可用）。

EP_CLI_DEV=true ep-cli gen-docs

AI 助手集成

安装 skills 后，AI 助手可帮助你从墨刀设计稿自动生成 Vue 页面代码。

ep-cli install --skills

详细使用方法请参考 skills 文档。

开发

# 安装依赖
pnpm install

# 开发模式（支持 gen-docs 命令）
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm type-check

相关链接

• skills-main - AI 工具 skills 生态参考
• playwright
• playwright-cli