Web-based Preview

Adjusting Page Elements in a Project

1. Log in to CodeArts Agent IDE as instructed in Quick Start.
   

   If the chat panel of CodeArts Agent is not displayed, click (Expand AI Sidebar) in the upper right corner of the top menu bar to open it.

2. In the explorer, expand the folder, right-click the ***.html file, and choose Preview in Browser.
3. Improve selected items on the project page by adjusting their size, placement, style, or layers according to the design needs. This ensures a clean layout, logical structure, and seamless user experience.

   Method 1: Add specific elements to the chat box for optimization.

   1. On the displayed page, click the element selector tool .
      Figure 1 Selecting an element
      
   2. Click the element to be added and choose from the displayed menu to add the element to the input box on the chat panel.
   3. Type your prompt in the input box, like "Change the font color of selected items to blue", and press .

      Once executed, the chosen elements' font turns blue.

   Method 2: Enter optimization instructions in the chat box.

   1. On the displayed page, click the element selector tool .
   2. Click the element to be added and choose from the displayed menu.
   3. Enter optimization keywords and press . The agent will optimize the element based on your prompts.

   Method 3: Adjust the visual style in the style settings.

   1. On the displayed page, click the element selector tool .
   2. Click the element to be added and choose from the displayed menu for setting the style.
   3. In the style attribute panel, make adjustments as needed.

4. Enhance the element's card design. Open your browser tab, select the element picker tool , hover over the desired element, and choose Optimize.
5. Open your browser tab, click , and select Improve Page to instantly enhance how the page looks.
6. Improve the design of every file in the project. Open your browser, click , and choose Improve Project to quickly upgrade the appearance of all pages.
7. Use the CSS inspector to optimize the page. Open your browser, click the CSS inspector , and select the target element. You can then modify the selected element in the component tree and design panel.

   In the component tree, right-click the target element to copy, cut, paste, or delete the element. You can also drag an element to another component tree node.

   On the design panel, you can edit elements in a visualized manner, such as adjusting the position, layout, text, background, and border. You can also view or edit CSS style rules in the CSS.

   

   When setting the font in Design > Text, manually enter the name of the font installed on your local computer.

8. Optimize the page by adding comments. Add comments to precisely bind style optimization requirements to specific elements. The agent performs local optimization based on the comment instructions to achieve precise modifications, significantly reducing communication costs and rework rates.
   1. On the displayed page, click the comment icon .
   2. Select the content to which you want to add a comment, enter the optimization prompt, and click Add Comment.

      The system temporarily stores your comments in a bubble. You can hover the mouse pointer over the bubble to view the comment target and content. You can also click Submit. The agent will optimize the page based on your comments.

   3. Select another content to which you want to add a comment, enter the optimization prompt, and click Add Comment.
   4. After adding a comment, click Submit. The agent will optimize the page based on your comments.
      To cancel saving your comments in a batch, click Cancel in the upper right corner. To undo the last operation, click .

      

      A maximum of five comments can be added.

9. Preview the page on multiple devices. After a page is developed, you can preview the page on multiple devices.
   1. On the displayed browser page, click to open the device toolbar.
   2. Select a device type and view the page effect.

Generating a New Page Based on an External Website

1. Log in to CodeArts Agent IDE as instructed in Quick Start.
2. Select Agent at the bottom of the input box on the chat panel. The selected model is displayed on the right. You can select a model as required from the drop-down list.
   

   If the chat panel of CodeArts Agent is not displayed, click (Expand AI Sidebar) in the upper right corner of the top menu bar to open it.

3. Open an external website.

   In the chat box, enter a prompt and click to open the target webpage.

   

   To view another webpage, type its URL into the browser's address bar and click to load it instantly.

4. Generate a new page using elements from the external webpage.
   1. In the input box, enter the following prompt and click .

      In the TestDemo_01 folder of the current project, build a search page for the browser's content. Start the preview using node-server. Follow all prompts and execute the given instructions as directed.

   2. After the execution is complete, in the explorer, expand the demo folder, right-click the generated ***.html file, and choose Preview in Browser.
   3. Type the website's URL into the address bar, click the element selector tool , and pick the needed element from the page.
   4. In the input box, enter the following prompt and click . Once done, check the results.

      Adjust the top-searched document details to fit this project's search page layout, and preview the generated webpage.

Related Operations

Click the developer tool icon near the address bar in your browser. The tool shows live updates for info, warning, or error logs in your project. (You can click Custom Levels on the Console tab to view the log type.) Copy and paste these logs into CodeArts Agent to get quick analysis and solutions.