# 基于自定义规则的AI绘图逻辑构建实践
#### 应用场景
在AI辅助绘图的实际应用中，由于缺乏统一的规则约束，AI在理解用户提示词、构建画面结构以及处理元素之间逻辑关系方面仍存在较大的不确定性。这种随机性通常会导致生成结果与用户预期存在偏差，影响使用效率和创作精度。因此，通常需要用户不断优化提示词，并通过多轮迭代调整，才能逐步接近目标效果，提升AI绘图在实际场景中的可用性与可靠性。
本实践以华为云码道代码智能体IDE工具为例，介绍如何通过配置规则（Rules），对AI绘制sin(x)函数图像的过程进行规范约束，从而实现图像坐标精准、格式统一、结果可控的标准化生成。
#### 操作流程
表1基于自定义规则的AI绘图逻辑构建实践操作流程 
| 序号 | 步骤                                                                | 说明                                                                                                                                                                                                                                                      |
|:---|:---|:---|
| 1  | [准备工作]             | 1. 创建一个项目，用于存放工程中的各类文件。  2. 开启自动批准功能，减少人工干预。       |
| 2  | [创建无规则约束的sin(x)图像] | 创建一个无规则的sin(x)函数图像。                                                                                                                                                                                                                                     |
| 3  | [创建有规则约束的sin(x)图像]  | 1. 编写绘图规范规则文件。  2. 根据规则文件生成规则限制的sin(x)图像。   |
   
 #### 准备工作
在使用华为云码道代码智能体前，您需要先创建一个项目，用于集中存放工程中的各类文件。
1. 参考[快速启动](https://support.huaweicloud.com/usermanual-codeartsagent/codeartsagent_ug_0002.html)中操作，登录华为云码道代码智能体。
2. 创建一个项目，用于存放工程中的文件。 
   1. 在IDE工具顶部菜单栏中，单击"文件(F)"，选择"新建 \> 新建项目"，进入新建项目页面。
   
   2. 选择项目存放位置，输入项目名称（如sin-test），单击"确定"。 **项目名称必须以字母开头，可包含字母、数字、中划线或下划线，且总长度不能超过64个字符。**
      图1新建项目
      ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002628478648.png "点击放大")
      项目创建完成后，在"资源管理器"中可以查看到已创建的项目。
      图2查看已创建的项目
      ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002658677955.png "点击放大")
      
   
   
   
   
3. （可选）选择智能体运行模式并授权自动化操作。 
   1. 单击华为云码道代码智能体IDE右上角的设置图标 ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002583370762.png)，进入全局设置页面。
   
   2. 在"对话流 \> 智能体 \> 终端命令运行模式"中，选择智能体执行终端命令的运行策略，本实践使用默认运行策略，即沙箱运行。
   
   3. 在"对话流 \> 智能体 \> 自动批准"中，单击 ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002613730529.png)以开启所需的自动批准项目。
      **授权自动化操作后，复杂工程级代码生成流程中的各项任务可自动执行。** **如果您未开启自动化操作授权，在使用华为云码道代码智能体进行编码时，部分操作将需要您手动确认。**
      ![](https://support.huaweicloud.com/bestpractice-codeartsagent/public_sys-resources/caution_3.0-zh-cn.png)
      开启自动批准存在操作风险，请在开启前充分评估风险，并在安全可信环境中使用。
      表2自动批准参数说明 
      | 参数     | 说明                                          | 示例 |
      |:---|:---|:---|
      | 编辑     | 允许智能体调用edit、write、deleteFile等工具来编辑您计算机上的文件。 | 开启 |
      | 使用浏览器  | 允许智能体在浏览器中访问网站。                             | 开启 |
      | 网页抓取工具 | 允许智能体访问并抓取指定网页的内容。                          | 开启 |
         
      
   
   
   
   
 
 #### 创建无规则约束的sin(x)图像
为了更清晰地展示规则绘图的效果，此处将首先展示**未应用规则**时的绘图结果。
1. 在聊天界面的输入框中，输入如下指令，单击发送图标 ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002625165910.png)。
   
   ```
   在网页中画一个sin(x)的函数动态图像
   ```
   执行完成后，会在资源管理器的SIN-TEST目录下生成一个名为"\*\*\*.html"的文件（如index.html）。
   
   
2. 在"index.html"文件上，单击右键选择"在浏览器中预览"，查看图像。 
   当前展示的效果图仅是示例，请以最终实际生成的效果为准。
   图3无规则的sin(x)函数图像   
   ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002563705355.gif "点击放大")
   
   
 
 #### 创建有规则约束的sin(x)图像
上文介绍了无规则约束情况下sin(x)图像的绘制效果。接下来将为您介绍基于绘图规范约束下sin(x)图像的绘图。请参考以下步骤，依次完成项目创建、规则文件编写以及绘图操作。
1. 编写绘图规范规则文件。 
   1. 在IDE工具左上角，选择"文件(F) \> 新建 \> 新建项目"，创建一个名称为"sin-test-rule"的项目并在新窗口打开。
   
   2. 单击华为云码道代码智能体IDE工具右上角的设置图标 ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002584032506.png)，进入全局设置页面。
   
   3. 选择"技能与规则"，在"项目级"页签中单击规则后的 ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002684439343.png)。
   
   4. 设置规则名称为"rule-pic"，适用范围保持默认选项"自动应用"，在内容中填写sin(x)的绘图规则，单击"确定"，即可完成规则的创建。
      图4新建rule-pic规则   
      ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002673511471.png "点击放大")
      ```
      # 绘图规范
      本文件包含了绘图过程需要遵守的规范
      ## 1.坐标系规范
      - 横轴为x轴
      - 纵轴为y轴
      - 原点O(0,0)必须清晰标注
      - 坐标轴箭头、刻度和单位长度要统一
      - 刻度线是细实线
      - 轴线是稍粗实线
      - 坐标不能和坐标轴交叉
      ## 2. 角度单位规范
      - 教学图像优先使用弧度制
      - 需要在坐标轴上标注的刻度：0,$\frac{\pi}{2}$,$\pi$,$\frac{3\pi}{2}$,$2\pi$
      ```
      规则创建后，在当前项目（SIN-TEST-RULE）的".codeartsdoer/rule"目录下，可查看到创建的规则文件rule-pic.mdc。
      图5查看规则文件rule-pic.mdc   
      ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002650269806.png "点击放大") 
   
   
   
   
2. 根据规则文件生成规则限制的sin(x)图像。 
   1. 在聊天界面的输入框中，输入如下指令，单击发送图标 ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002625165910.png)。
      ```
      在网页中画一个sin(x)的函数动态图像
      ```
      执行完成后，会在资源管理器的SIN-TEST-RULE目录下生成一个名为"\*\*\*.html"的文件（如index.html）。
      
   
   
   
   2. 在"index.html"文件上，单击右键选择"在浏览器中预览"，查看图像。 当前展示的效果图仅是示例，请以最终实际生成的效果为准。
      图6规则下绘制的sin(x)函数图像   
      ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002651419856.gif "点击放大") 
   
   
   
   
 
#### 总结
对比有无规则约束下绘制的sin(x)函数图像，可以明显看到：在引入规则后，函数图像的坐标规范和数学表达准确性都得到了显著提升，有效避免了坐标轴混乱等问题。充分体现了Rules在统一标准、约束行为、保证输出质量和稳定性方面的重要作用，使结果更规范、可靠、可预期。
本次实践带您了解了[规则](https://support.huaweicloud.com/usermanual-codeartsagent/codeartsagent_ug_0019.html)。除规则外，华为云码道代码智能体还提供了[技能](https://support.huaweicloud.com/usermanual-codeartsagent/codeartsagent_ug_0024.html)和[MCP](https://support.huaweicloud.com/usermanual-codeartsagent/codeartsagent_ug_0010.html)，三者共同构建了智能体的多样化能力。各功能的差异对比如[表3]。
 表3技能与其他功能的对比 
| 对比维度     | 规则（Rule）                                                                                                   | 技能（Skill）                                                                                                 | MCP Server                                                                                     |
|:---|:---|:---|:---|
| **定义**   | 用于约束智能体的行为方式。                                                                                              | 用于描述如何完成特定任务。                                                                                             | 提供外部工具的调用能力。                                                                                   |
| **加载方式** | 在对话开始时加载到上下文中，持续参与推理。                                                                                      | 按需加载，减少上下文占用。                                                                                             | 不参与推理过程，按需调用外部接口。                                                                              |
| **使用场景** | 定义代码规范、输出格式、团队协作约定等。 例如：代码必须符合PEP8规范。 | 封装测试流程、开发任务、复杂业务逻辑等。 例如：执行UI自动化测试。 | 连接外部系统，执行具体操作。 例如：控制浏览器操作。 |
| **关键区别** | 控制智能体"应该怎么做"，是行为边界。                                                                                        | 解决"如何完成任务"，是流程指导。                                                                                         | 提供"调用工具的能力"，是执行能力。                                                                             |