使用极样平台样式进行前端开发

Figma如何在友码中配置和使用，请参考

前端页面代码生成

配置极样样式文件

极样平台提供了一套完整的样式规范，包括颜色、字体、间距、圆角等设计变量。这些样式文件可以直接在项目中引入和使用。

1. 样式文件引入

在前端项目中，可以通过以下方式引入极样平台的样式文件：

// main.js (Vue项目示例)
import './styles/base-variables.css'
import './styles/theme-variables.scss'

/* styles.css (React项目示例）*/
@import './base-variables.css';
@import './theme-variables.scss';

3. 如果不清楚如何引入样式文件也可以使用友码插件：

如何在友码中引用文件

对话框中输入

/* 对话内容示例 */
@/src/style/base-variables.css
@/src/style/theme-variables.scss
帮我把这个两个样式文件，引入到当前项目中

2. 样式变量使用

极样平台的样式文件定义了一系列CSS变量，可以在组件中直接使用：

// 组件样式
.my-component {
  color: var(--text-primary);
  background-color: var(--background-base);
  border-radius: var(--radius-base);
  padding: var(--space-md);
  font-size: var(--font-size-base);
}

友码插件结合规则文件使用

友码AI可以配置规则文件，然后根据Figma设计自动生成符合设计规范的前端代码

规则使用指南

规则文件的配置和内容说明

为了确保生成的代码符合设计规范，友码AI使用了一系列规则文件来指导代码生成。

1. 样式规范规则文件

样式规范规则文件定义了以下内容：

指导原则
使用 SCSS/Less 编写组件样式
深度选择器使用框架对应的语法（如 ::v-deep、>>> 等）
组件样式与业务逻辑解耦
定义基础变量文件和自定义变量文件路径

禁止硬编码值

禁止在样式中使用硬编码的尺寸值（如 px、em、rem 等）
所有尺寸值应使用项目定义的间距变量
颜色值必须使用项目定义的颜色变量，禁止直接使用十六进制颜色值

尺寸变量映射

width、height 应使用 --full 或其他对应的尺寸变量
gap、padding、margin 应使用 --space-* 系列变量
border-radius 应使用 --radius-* 系列变量
font-size 应使用 --font-size-* 系列变量

颜色使用规范

文本颜色应使用 --light-text-* 或 --dark-text-* 系列变量
背景颜色应使用 --light-background-* 或 --dark-background-* 系列变量
边框颜色应使用 --light-border-* 或 --dark-border-* 系列变量
主要颜色应使用 --light-primary 等主色变量

UI框架样式覆盖指导

覆盖 UI框架组件样式时，应使用项目定义的变量
使用深度选择器时，应保持样式的一致性
不要直接修改 UI框架的核心样式文件

Figma 页面生成指导

生成页面时应严格按照 Figma 设计稿还原页面结构和样式
对于复杂的组件，应拆分为多个子组件以提高可维护性
布局对齐要求：
- 表单元素应保持垂直对齐，标签与输入控件基线对齐
- 按钮组应按照设计稿中的位置摆放，避免简单的居中或对称布局
响应式设计要求：
- 表格列应使用弹性布局、百分比宽度或自适应宽度以适应不同分辨率
- 避免使用固定像素宽度，优先使用相对单位
组件状态和颜色映射：
- 状态标签应根据设计稿中的颜色规范实现，确保每种状态有对应的颜色
- 避免使用与设计稿不一致的颜色映射

2. 规则文件配置

规则文件通过以下方式配置：

# 项目样式规范

## 指导原则
- 使用 SCSS 编写组件样式
- 深度选择器使用 `::v-deep` 语法 -组件样式与业务逻辑解耦
- 基础变量文件：`src/styles/base-variables.css`
- 自定义变量文件：`src/styles/vue2-theme-element-variables.scss`
- 生成样式时，应优先读取变量文件，使用变量文件中的变量而不是硬编码
- 不要使用不存在的变量。
- 不用引入变量文件（已全局引入）。

## 禁止硬编码值
- 禁止在样式中使用硬编码的尺寸值（如 px、em、rem 等）
- 所有尺寸值应使用项目定义的间距变量
- 颜色值必须使用项目定义的颜色变量，禁止直接使用十六进制颜色值

## 尺寸变量映射
- width、height 应使用 `--full` 或其他对应的尺寸变量
- gap、padding、margin 应使用 `--space-*` 系列变量
- border-radius 应使用 `--radius-*` 系列变量
- font-size 应使用 `--font-size-*` 系列变量

## 颜色使用规范
- 文本颜色应使用 `--light-text-*` 或 `--dark-text-*` 系列变量
- 背景颜色应使用 `--light-background-*` 或 `--dark-background-*` 系列变量
- 边框颜色应使用 `--light-border-*` 或 `--dark-border-*` 系列变量
- 主要颜色应使用 `--light-primary` 等主色变量

## Element UI 样式覆盖指导
- 覆盖 Element UI 组件样式时，应使用项目定义的变量
- 使用 ::v-deep 深度选择器时，应保持样式的一致性
- 不要直接修改 Element UI 的核心样式文件
- 优先使用 Element UI 提供的 API 来实现样式，如 header-cell-style、cell-style 等属性
- 通过 CSS 类名来设置样式，而不是直接在 JavaScript 中定义样式对象

## Figma 页面生成指导
- 生成页面时应严格按照 Figma 设计稿还原页面结构和样式
- 对于复杂的组件，应拆分为多个子组件以提高可维护性
- 布局对齐要求：
  - 表单元素应保持垂直对齐，标签与输入控件基线对齐
  - 按钮组应按照设计稿中的位置摆放，避免简单的居中或对称布局
- 响应式设计要求：
  - 表格列应使用弹性布局、百分比宽度或自适应宽度以适应不同分辨率
  - 避免使用固定像素宽度，优先使用相对单位
- 组件状态和颜色映射：
  - 状态标签应根据设计稿中的颜色规范实现，确保每种状态有对应的颜色
  - 避免使用与设计稿不一致的颜色映射

3. AI代码生成规则

友码AI在生成代码时会遵循以下通用规则：

变量优先原则：优先使用项目定义的CSS变量，而不是硬编码值
组件化原则：将页面拆分为多个可复用的组件
样式规范原则：遵循项目样式规范，使用预处理器和深度选择器
UI框架集成原则：合理使用UI框架组件，并根据需要进行样式覆盖
Figma还原原则：严格按照Figma设计稿还原页面结构和样式
响应式设计原则：使用弹性布局和相对单位确保页面在不同分辨率下正常显示

通过以上规则文件的配置和使用，友码AI可以生成符合设计规范的高质量前端代码。

示例规则文件：

(需结合不同项目修改，不能直接使用)

# 项目样式规范

## 指导原则
- 使用 SCSS 编写组件样式
- 深度选择器使用 `::v-deep` 语法 -组件样式与业务逻辑解耦
- 基础变量文件：`src/styles/base-variables.css`
- 自定义变量文件：`src/styles/vue2-theme-element-variables.scss`
- 生成样式时，应优先读取变量文件，使用变量文件中的变量而不是硬编码
- 不要使用不存在的变量。
- 不用引入变量文件（已全局引入）。

## 禁止硬编码值
- 禁止在样式中使用硬编码的尺寸值（如 px、em、rem 等）
- 所有尺寸值应使用项目定义的间距变量
- 颜色值必须使用项目定义的颜色变量，禁止直接使用十六进制颜色值

## 尺寸变量映射
- width、height 应使用 `--full` 或其他对应的尺寸变量
- gap、padding、margin 应使用 `--space-*` 系列变量
- border-radius 应使用 `--radius-*` 系列变量
- font-size 应使用 `--font-size-*` 系列变量

## 颜色使用规范
- 文本颜色应使用 `--light-text-*` 或 `--dark-text-*` 系列变量
- 背景颜色应使用 `--light-background-*` 或 `--dark-background-*` 系列变量
- 边框颜色应使用 `--light-border-*` 或 `--dark-border-*` 系列变量
- 主要颜色应使用 `--light-primary` 等主色变量

## Element UI 样式覆盖指导
- 覆盖 Element UI 组件样式时，应使用项目定义的变量
- 使用 ::v-deep 深度选择器时，应保持样式的一致性
- 不要直接修改 Element UI 的核心样式文件
- 优先使用 Element UI 提供的 API 来实现样式，如 header-cell-style、cell-style 等属性
- 通过 CSS 类名来设置样式，而不是直接在 JavaScript 中定义样式对象

## Figma 页面生成指导
- 生成页面时应严格按照 Figma 设计稿还原页面结构和样式
- 对于复杂的组件，应拆分为多个子组件以提高可维护性和可复用性
- 重点关注以下元素的还原：
  - 字体大小、颜色和行高
  - 间距和边距
  - 圆角和阴影效果
  - 背景色和边框色
  - 图标和图片的尺寸及位置
- 布局对齐要求：
  - 表单元素应保持垂直对齐，标签与输入控件基线对齐
  - 按钮组应按照设计稿中的位置摆放，避免简单的居中或对称布局
- 响应式设计要求：
  - 表格列应使用弹性布局、百分比宽度或自适应宽度以适应不同分辨率
  - 避免使用固定像素宽度，优先使用相对单位
  - 遵循移动端优先的设计原则，确保在不同设备上都有良好的显示效果
- 组件状态和颜色映射：
  - 状态标签应根据设计稿中的颜色规范实现，确保每种状态有对应的颜色
  - 避免使用与设计稿不一致的颜色映射
- 组件拆分指导：
  - 当组件功能复杂或代码超过150行时，应考虑拆分为多个子组件
  - 组件拆分应遵循单一职责原则，每个组件只负责一个功能点
  - 组件接口应尽量简洁，避免传递过多的属性

## 多次检查机制
- 生成页面后应进行多次检查以确保质量：
  1. 第一次检查：核对页面结构是否与设计稿一致
  2. 第二次检查：验证样式是否符合项目样式规范

## 代码审查检查点
- 检查是否使用了硬编码的尺寸值
- 检查是否使用了十六进制颜色值
- 检查是否正确引用了项目变量
- 检查 Element UI 组件样式是否符合规范
- 检查页面结构是否与 Figma 设计稿一致
- 检查组件拆分是否合理
- 检查是否使用了硬编码的尺寸值
- 检查是否使用了十六进制颜色值
- 检查是否正确引用了项目变量
- 检查 Element UI 组件样式是否符合规范
- 检查页面结构是否与 Figma 设计稿一致
- 检查组件拆分是否合理

## 变量使用示例
   // scss 变量使用示例
   // 正确示例
   .component {
   width: var(--full);
   padding: var(--space-md);
   margin: var(--space-sm) 0;
   border-radius: var(--radius-base);
   color: var(--light-text-primary);
   background-color: var(--light-background-base);
   font-size: var(--font-size-base);
   }

   // Element UI 覆盖示例
   .custom-button {
   ::v-deep .el-button {
      background: linear-gradient(180deg, var(--light-primary) 0%, var(--light-primary-2) 100%);
      border-radius: var(--radius-base);
      color: var(--light-text-white);
   }
   }

   // 响应式设计示例
   .responsive-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: var(--space-md);
   }

   // 表格样式覆盖示例
   .custom-table {
   ::v-deep .el-table {
      th {
      background: var(--light-background-secondary);
      color: var(--light-text-primary);
      font-weight: var(--font-weight-600);
      }
      
      td {
      color: var(--light-text-regular);
      }
      
      .el-table__row:nth-child(even) {
      background: var(--light-background-secondary);
      }
   }
   }

FAQ

生成代码后运行错误，如何修改

如果生成的代码在运行时出现错误，请按以下步骤进行排查和修改或将错误内容输入友码插件中

检查样式变量是否存在
- 确认使用的CSS变量在src/styles/base-variables.css和src/styles/vue2-theme-element-variables.scss中已定义
- 如果变量不存在，可以添加新的变量定义或使用已有的相似变量替代
检查样式文件是否正确引入
- 确保在项目的入口文件（如main.js或App.vue）中正确引入了样式文件
- 检查文件路径是否正确
检查深度选择器语法
- 确保使用了正确的深度选择器语法（如::v-deep）
- 不同的框架可能需要不同的深度选择器语法
检查样式优先级
- 如果样式没有生效，可能是因为优先级不够高
- 可以使用!important来提高样式优先级，但应谨慎使用
检查浏览器兼容性
- 某些CSS属性可能在旧版本浏览器中不支持
- 可以使用autoprefixer等工具添加浏览器前缀

如何确保生成的页面与Figma设计稿一致

为了确保生成的页面与Figma设计稿保持一致，请注意以下几点：

严格按照设计稿还原
- 生成页面时应严格按照Figma设计稿还原页面结构和样式
- 注意字体大小、颜色、行高、间距等细节的还原
响应式设计
- 表格列应使用弹性布局、百分比宽度或自适应宽度以适应不同分辨率
- 避免使用固定像素宽度，优先使用相对单位
组件状态和颜色映射
- 状态标签应根据设计稿中的颜色规范实现，确保每种状态有对应的颜色
- 避免使用与设计稿不一致的颜色映射
布局对齐
- 表单元素应保持垂直对齐，标签与输入控件基线对齐
- 按钮组应按照设计稿中的位置摆放，避免简单的居中或对称布局

如何自定义规则文件以适应特定项目需求

规则文件可以通过以下方式进行自定义以适应特定项目需求：

修改变量文件路径
- 根据项目实际情况修改基础变量文件和自定义变量文件的路径
调整样式规范
- 根据项目设计规范调整颜色、字体、间距等样式规范
添加项目特定规则
- 可以添加项目特定的代码审查检查点和样式使用示例
更新UI框架指导
- 根据项目使用的UI框架更新相应的样式覆盖指导

通过合理配置和自定义规则文件，可以确保生成的代码完全符合项目需求和设计规范。

Figma如何在友码中配置和使用，请参考​

配置极样样式文件​

1. 样式文件引入​

3. 如果不清楚如何引入样式文件也可以使用友码插件：​

2. 样式变量使用​

友码插件结合规则文件使用​

规则文件的配置和内容说明​

1. 样式规范规则文件​

禁止硬编码值​

尺寸变量映射​

颜色使用规范​

UI框架样式覆盖指导​

Figma 页面生成指导​

2. 规则文件配置​

3. AI代码生成规则​

示例规则文件：​

(需结合不同项目修改，不能直接使用)​

FAQ​

生成代码后运行错误，如何修改​

如何确保生成的页面与Figma设计稿一致​

如何自定义规则文件以适应特定项目需求​