AI Drawing Logic Construction Practice Based on Custom Rules

Application Scenarios

In the practical application of AI-assisted drawing, due to the lack of unified rules and constraints, AI still faces significant uncertainties in understanding user prompts, constructing image structures, and processing logical relationships between elements. This randomness often leads to deviations between the generated results and user expectations, affecting both efficiency and creative precision. Therefore, users often need to continuously optimize prompts and make iterative adjustments to gradually approach the desired effect, thereby improving the usability and reliability of AI-assisted drawing in practical scenarios.

This practice uses Huawei Cloud CodeArts Agent IDE as an example to describe how to configure rules to standardize and constrain the process of AI-assisted drawing of sin(x) function graphs. This ensures precise graph coordinates, consistent formatting, and controllable results.

Procedure

Preparations

Before using CodeArts Agent, create a project to store various files in the project.

1. Log in to CodeArts Agent by referring to Quick Start.
2. Create a project for storing files.
   1. On the top menu bar of the IDE, choose File > New > Create Project to go to the page for creating a project.
   2. Select a path for storing the project, enter the project name (for example, sin-test), and click OK.

      The project name must start with a letter, and can contain a maximum of 64 characters. Letters, digits, hyphens (-), and underscores (_) are allowed.

      Figure 1 Creating a project

      

      After the project is created, you can view it under EXPLORER.

      Figure 2 Viewing the created project

      

3. (Optional) Select the agent running mode and authorize automatic operations.
   1. Click in the upper right corner of CodeArts Agent IDE to go to the Settings page.
   2. Choose Chats > Agents > Terminal Command Running Mode, select the running policy for the agent to execute terminal commands. This section uses the default running policy (Running in Sandbox).
   3. Choose Chats > Auto-approve, and click to enable the required items.

      After authorization, tasks for generating complex project-level code are executed automatically. Without authorization, some operations will need your manual confirmation when you code with CodeArts Agent.

      

      Enabling auto approval can lead to operational risks. Assess these risks carefully first and only enable this feature in a secure and trustworthy environment.

      Table 2 Parameters for auto approval

      Parameter	Description	Example
      Edit	Allows the agent to call tools like edit, write, and deleteFile to edit files on your computer.	Enabled
      Browser Access	Allows the agent to access websites in the browser.	Enabled
      Web Crawler	Allows the agent to access and capture specified web page content.	Enabled

   4. Exit the current page to complete the authorization.

Creating an Irregular Sin(x) Graph

To clearly demonstrate the effect of rule-based drawing, the following shows the drawing result when no rules are applied:

1. In the input box, enter the following instruction and click :

   Draw a dynamic sin(x) function graph on the web page.

   After the execution is complete, a file named ***.html (for example, index.html) is generated in the SIN-TEST directory under EXPLORER.

2. Right-click index.html and choose Preview in Browser from the shortcut menu to view the graph.

   The graph shown here is for reference only. The actual output may vary.

   Figure 3 Irregular sin(x) function graph
   

Creating a Regular Sin(x) Graph

The preceding steps describe how to draw a sin(x) graph without any rule constraints. The steps below describe how to draw a sin(x) graph based on the drawing specifications. Perform the following steps to create a project, compile a rule file, and draw a graph:

1. Compile a drawing specification rule file.
   1. In the upper left corner of the IDE, choose File > New > Create Project. Then, create a project named sin-test-rule, and open it in a new window.
   2. Click in the upper right corner of CodeArts Agent IDE to go to the Settings page.
   3. Choose Skills and Rules and click next to Rules on the Project tab.
   4. Set Rule Name to rule-pic, retain the default option Auto Apply for Application Scope, enter the drawing rule of sin(x) in the text box under Content, and click OK.
      Figure 4 Creating a rule-pic rule
      

      # Drawing specifications
      This document contains the specifications that must be followed during the drawing process.
      
      ## 1. Coordinate system specifications
      - The horizontal axis is the x-axis.
      - The vertical axis is the y-axis.
      - The origin O(0,0) must be clearly marked.
      - The arrows, scales, and unit lengths of the axes must be consistent.
      - Tick marks should be thin solid lines.
      - Axis lines should be slightly thicker solid lines.
      - Coordinates cannot intersect with coordinate axes.
      
      ## 2. Angle unit specifications
      - The radian system is preferred for teaching images.
      - Scales to be marked on the coordinate axes: 0, $\frac{\pi}{2}$, $\pi$, $\frac{3\pi}{2}$, and $2\pi$

      After the rule is created, you can view the created rule file rule-pic.mdc in the .codeartsdoer/rule directory of the current project (SIN-TEST-RULE).

      Figure 5 Viewing the rule file rule-pic.mdc
      

2. Generate a sin(x) graph based on the rule file.
   1. In the input box, enter the following instruction and click :

      Draw a dynamic sin(x) function graph on the web page.

      After the execution is complete, a file named ***.html (for example, index.html) is generated in the SIN-TEST-RULE directory under EXPLORER.

   2. Right-click index.html and choose Preview in Browser from the shortcut menu to view the graph.

      The graph shown here is for reference only. The actual output may vary.

      Figure 6 Regular sin(x) function graph
      

Summary

By comparing the sin(x) function graphs drawn with and without rule constraints, it is clear that the introduction of rules significantly improves the coordinate specifications and mathematical expression accuracy of the function graphs, effectively avoiding issues such as axis confusion. This fully demonstrates the important role of rules in unifying standards, constraining behavior, and ensuring output quality and stability, making the results more standard, reliable, and predictable.

This practice helps you understand rules. In addition to rules, CodeArts Agent also provides skills and MCP to build diverse capabilities of agents. Table 3 compares the differences between the functions.