03_CursorRules_UI还原篇_ui-restoration

小璞
255 阅读4分钟

设计即代码：让 AI 成为你的“UI 还原大师”

前端开发有一项核心工作，既耗时又繁琐，那就是将设计师的 UI 稿“像素级”地还原成代码。我们花费大量时间在调整样式、处理布局、导出切图上，这些重复性劳动，正是 AI 发挥价值的最佳场所。

@ui-restoration.mdc 这个 Rule，配合 MasterGo MCP Server，旨在将这一过程完全自动化，让 AI 成为你的“UI 还原大师”。

手动“切图”的时代已经过去

在传统开发流程中，我们对着设计稿，一行行地写 CSS，一个个地导出图标。这个过程充满了痛点：

  • 效率低下：大量的重复性工作，占用了宝贵的开发时间。
  • 容易出错：手动测量间距、颜色，难免出现视觉偏差。
  • 沟通成本高：设计稿稍有更新，就需要重新调整代码，过程繁琐。

@ui-restoration.mdc 如何实现“魔法”？

这个 Rule 的核心是利用工具链，打通了从“设计”到“代码”的桥梁。它不再是让 AI 去“看图写话”，而是让 AI 直接“读取”设计稿的结构化数据。

工作流程如下：

  1. 提供链接：你只需要向 AI 提供一个 MasterGo 设计稿中具体 UI 模块的链接。
  2. AI 解析 DSL：AI 会通过 MasterGo MCP Server 提供的能力，获取并解析这个 UI 模块的设计 DSL（领域特定语言）。这个 DSL 精准地描述了每一个元素的位置、大小、颜色、字体等所有设计属性。
  3. 精准生成代码：基于解析到的 DSL 数据，AI 能够直接生成对应的 UI 组件代码，无论是 React、Vue 还是其他框架。

它带来的革命性变化是什么？

  • 核心优势：从“手动”到“自动”，实现效率的指数级提升

    • 它将原本可能需要数小时的 UI 还原工作，压缩到几分钟甚至几十秒。开发者可以从繁琐的样式调整中解放出来，专注于更核心的业务逻辑。

  • 使用场景：任何需要从设计稿创建 UI 组件的时刻

    • 无论是开发一个全新的页面，还是在现有页面中添加一个复杂的卡片，只要它在 MasterGo 中有设计稿，就可以使用这个 Rule 快速生成。

  • 读者最关心的：它生成的代码质量如何？

    • 由于是基于精准的 DSL 数据生成，而非视觉猜测，因此代码在视觉还原度上可以做到 100% 精准。同时，结合良好的代码生成模板，其代码结构和质量也远超手动编写。这不仅是效率的提升，更是质量的保证。

一句话总结： @ui-restoration.mdc 是连接设计与开发的“高速公路”，它通过自动化技术，将 UI 还原的效率提升到了新的高度，让“设计即代码”真正成为现实。

@ui-restoration.mdc 具体规则如下

# UI还原规则

## 🎯 核心原则

使用MasterGo MCP还原UI组件时，遵循以下3个核心原则：

1. **优先使用本地组件库** - 优先使用项目已安装的UI库，没有时直接实现
2. **注重代码质量** - 保证可读性、可维护性、简洁性、优雅性
3. **样式与结构分离** - DOM结构和CSS样式分开组织

## 🛠️ 技术栈要求

**必须使用项目中当前已有的技术栈**，包括但不限于：
- 框架版本、构建工具、样式预处理器
- 状态管理、路由、UI库等依赖
- 项目特有的工具和配置

## 📋 组件库使用优先级

1. **项目现有组件** (`src/components/common/`)
2. **已安装的UI库** (Radix UI, Lucide React等)
3. **直接实现** - 如果没有现成的，简洁直接地实现

## 🏗️ 文件组织

```
src/components/ComponentName/
├── index.tsx          # 组件逻辑
└── index.less         # 样式文件
```

## 💻 代码规范

### 基本结构
```tsx
import React from 'react';
import './index.less';

interface ComponentProps {
  className?: string;
  // 其他业务相关属性
}

const ComponentName: React.FC<ComponentProps> = ({ 
  className,
  ...props 
}) => {
  return (
    <div className={`component-name ${className || ''}`}>
      {/* 组件内容 */}
    </div>
  );
};

export default ComponentName;
```

### 样式组织
```less
.component-name {
  // 基础样式
  
  .sub-element {
    // 子元素样式
  }
  
  &.state-modifier {
    // 状态样式
  }
}
```

## 📝 命名规范

- **组件**: 使用业务含义的PascalCase命名
- **CSS类**: 使用kebab-case，体现组件层级关系
- **文件**: 保持简洁，使用`index.tsx`和`index.less`

## ✅ 质量要求

- **简洁性**: 避免过度设计，直接解决问题
- **可读性**: 代码自解释，必要时添加注释
- **可维护性**: 结构清晰，易于修改
- **优雅性**: 使用合适的React模式和最佳实践

---

保持简单，专注核心功能，避免过度工程化。
avatar
文章
阅读
粉丝