# yida-expert-skill

**Repository Path**: M_CK/yida-expert-skill

## Basic Information

- **Project Name**: yida-expert-skill
- **Description**: 宜搭自定义页面开发技能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-04
- **Last Updated**: 2026-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Yida Expert Skill

本项目是一个专为阿里巴巴宜搭（Yida）低代码平台开发者设计的智能辅助技能（Skill）集合。旨在通过自动化的代码生成、规范检查、平台交互脚本以及设计稿还原能力，大幅提升宜搭自定义页面和组件的开发效率。

本项目主要包含两大核心模块：`yida-expert` 和 `yida-jy`。

## 模块介绍

### 1. Yida Expert (宜搭开发技能)

`yida-expert` 模块提供了与宜搭平台深度交互的全生命周期开发辅助能力，适用于日常的 JSX 页面编写、API 对接和本地自动化部署。其中，自定义页面开发所需的模板、示例代码和参考文档现统一维护在 `/yida-expert/yida-custom-page/` 目录下。

**核心功能：**

- **代码生成与规范检查**：严格遵循宜搭的开发规范（如无 React Hooks、无可选链 `?.`、基于全局变量引用等）。
- **元数据驱动开发**：在编写逻辑前自动获取表单/组件的元数据（Schema），辅助精准生成业务代码。
- **页面全生命周期管理**：内置一系列自动化 Node.js 脚本，支持从创建页面、本地开发到编译发布的完整工作流：
  - `login.js`：通过 Playwright 启动浏览器进行扫码登录，自动提取身份凭证。
  - `fetch_metadata.js`：自动拉取目标应用下的全量表单和字段定义。
  - `create_page.js`：在指定应用中快速创建自定义页面。
  - `publish.js`：将本地开发的页面代码进行 Babel 编译、组合压缩并一键发布至线上。
  - `report/init-report.js`：初始化 `reports/<reportKey>/` 报表目录结构。
  - `report/create-report.js`：根据 `report-config.json` 或 `reportKey` 创建原生报表。

### 2. Yida JY (宜搭设计转译技能)

`yida-jy` 模块专注于“设计稿到代码”的自动化还原，结合 Figma MCP（Model Context Protocol），实现从 Figma 设计稿一键生成可运行的宜搭 JSX 自定义页面代码。

**核心功能：**

- **Figma AI 桥接**：通过配置 `figma-developer-mcp` 直接读取 Figma 设计数据。
- **高保真还原**：严格还原设计稿的字号、行高、字重、间距、颜色等，支持响应式布局（PC+移动端）。
- **标准化输出**：基于设计稿一键生成宜搭标准的三文件结构：
  - `page.jsx`：纯渲染视图层。
  - `page.js`：生命周期（didMount）、状态管理、交互逻辑及接口骨架封装。
  - `page.css`：遵循 BEM 命名规范的样式文件。
- **多技能流水线**：通过 `yida-jsx-entry` 入口技能，自动调度 `yida`、`yida-figma` 和 `figma-implement-design` 技能完成端到端的代码生成。

## 环境依赖

- Node.js 环境
- Playwright (用于自动化登录和平台交互)
- Figma MCP Server (仅 `yida-jy` 模块需要，用于解析设计稿)

## 目录结构

```text
yida-expert-skill/
├── skills/
│   ├── yida-expert/        # 宜搭开发专家核心能力与自动化交互脚本
│   │   ├── scripts/        # 包含登录、元数据获取、页面创建及发布脚本
│   │   ├── yida-custom-page/   # JSX 自定义页面规范、模板、示例与参考资料
│   │   │   ├── assets/         # 页面模板示例
│   │   │   ├── examples/       # 功能示例代码
│   │   │   └── references/     # API / 工具类 / 开发参考文档
│   │   ├── frontend-design/    # 前端视觉设计与高完成度 Web UI 设计指导
│   │   ├── yida-login/         # 宜搭登录与凭证提取
│   │   ├── yida-metadata/      # 表单元数据获取
│   │   ├── yida-deployment/    # 页面部署与发布
│   │   ├── yida-report/        # 原生报表创建与发布
│   │   ├── yida-chart/         # ECharts 高级可视化页面
│   │   ├── config.json     # 应用环境配置
│   │   └── ...
│   └── yida-jy/            # 宜搭设计转译相关技能 (Figma to Code)
│       ├── figma-implement-design/
│       ├── yida-jsx-entry/
│       └── ...
└── README.md               # 项目全局说明文档
```

其中，原先位于 `skills/yida-expert` 根下的 `assets`、`examples`、`references` 目录，现已统一迁移至 `skills/yida-expert/yida-custom-page/` 下，便于自定义页面相关资料集中维护。

报表相关文件现统一使用 `reports/<reportKey>/` 目录结构管理，避免与 `pages/`、元数据缓存和根目录配置文件混放。

## 使用指南

各子模块的具体配置与使用方式，请参考对应目录下的说明文档：

- [Yida Expert 使用与脚本配置指南](./skills/yida-expert/README.md)
- [Yida JY (Figma MCP) 安装与提示词指南](./skills/yida-jy/README.md)