Skip to main content

Design and audit a Freedom UI page

Level: beginner

Get Freedom UI pages that look like the rest of Creatio, follow the order in which users fill them in, and meet accessibility requirements. The coding agent uses the creatio-ui-guidelines skill of Creatio AI app development toolkit to design a new page or audit a page you already have. When you create an app, migrate a section, or convert a page to mobile, the agent applies the same guidelines automatically. Use the procedures in this article when page design or a page review is the task itself.

The agent designs a page around how users fill it in rather than around the data model. For example, the agent puts required and frequently edited fields first, renders lookups with few values as dropdowns, adds placeholders and tooltips where a field needs explanation, and keeps the left and right page areas balanced. The agent keeps the base Creatio look and asks for your confirmation before it applies custom CSS.

Prerequisites​

Design a new page​

  1. Open your coding agent and start a new session.

  2. Describe the page and who uses it. For example:

    Design the record page of the Equipment requests section.
    Employees create requests, and IT admins approve them.

    The agent selects the matching skill automatically. To make sure the agent uses it, you can mention the creatio-ui-guidelines skill in your request.

  3. Review the page structure proposal. The proposal describes the users and their main task, the page pattern, the header, tabs, field groups, profile islands, actions, field order, validation, and accessibility checks.

  4. Ask the agent to adjust the proposal if needed.

  5. Ask the agent to build the page on your environment, or hand the proposal to a developer.

  6. Check the page against the checklist the agent provides.

As a result, the page has a structure that follows Freedom UI patterns and a checklist you can use before the release.

Audit an existing page​

  1. Open your coding agent and start a new session.

  2. Name the pages to audit and their environment. For example:

    Audit the Equipment request record page and its list page on my development environment.

  3. Wait for the agent to finish the audit. The agent checks the rendered page first, then the page schema.

  4. Triage the findings by severity.

    Severity

    Meaning

    High

    The issue blocks users, hides required information, breaks accessibility, or allows a destructive action without confirmation.

    Medium

    The issue causes confusion, inconsistency, poor scannability, weak validation, or excessive scrolling.

    Low

    The issue concerns copy, spacing, icons, or consistency.

  5. Ask the agent to apply the fixes you accept.

As a result, you get a list of issues ranked by severity with a fix for each one, an accessibility check, and an acceptance checklist you can reuse before the next release.

See also​

Creatio AI app development toolkit

Set up Creatio AI app development toolkit

Start working with Creatio AI app development toolkit

Working with coding agents in Creatio