Website Builder is one of the major specialized workspaces inside AIUNIFY PROS SUITE.
Unlike the Standard AI Generator covered in Chapter 12, Website Builder is a persistent, visual website-creation environment designed to let a subscriber:
The Website Builder landing area tells the user:
“Bring your imagination to reality.”
and:
“Describe any web interface. Our AI will instantly design, build, and deploy it. No coding required.”
Publishing, subdomains, custom domains, and detailed project management are covered separately in Chapter 15.
Navigate to:
Sidebar → Core Tools → Website Builder
The Website Builder route is:
/website
The current page requires an authenticated PROS SUITE session. If you are not signed in, it redirects to Login.
Website Builder should be understood as a project workspace, not a one-request text generator.
A normal workflow looks like:
Describe Website
↓
Generate Initial Design
↓
Preview Website
↓
Continue Conversation in Design Chat
↓
Modify Entire Design or Selected Elements
↓
Preview Desktop / Mobile
↓
Save Project
↓
Continue Editing Later
This is fundamentally different from:
Prompt → Text Output → Download
used by many Standard Generators.
The main Website Builder page contains:
Your Projects
and a:
+ New Project
control.
Previously saved websites appear as project cards.
Each project can include:
The current project-loading workflow restores the saved website design, Chat messages, and saved subdomain when reopening a project.
For a complete new website, the most direct current workflow is the large creation area at the top of Website Builder.
You will see:
Bring your imagination to reality.
and the Prompt field:
“Ask AIUNIFY to build a website that can...”
Enter your website requirements there before entering the design workspace.
Your initial Prompt should describe the website in enough detail for the AI to establish a strong first design.
Consider including:
What is the site supposed to accomplish?
What company, organization, product, or service is being represented?
Who should the website appeal to?
For example:
For example:
Include:
Examples:
Mention mobile expectations when they are especially important.
A very broad request such as:
Build a business website.
gives the AI little specific direction.
It can still attempt a design, but more editing may be required afterward.
A stronger initial request could be:
Build a premium B2B software website for a company serving enterprise sales organizations. Create a bold hero with headline, subtitle and two calls-to-action, followed by a systems overview, business outcomes, industry use cases, enterprise benefits, testimonials, pricing call-to-action and footer. Use a clean modern technology aesthetic, strong visual hierarchy, responsive mobile layout and professional blue branding.
The more complete the initial brief, the better the first generation can reflect your desired website.
Below the creation Prompt, Website Builder displays:
Try one →
with four current suggestion options:
Selecting one fills the Prompt field with a more detailed example request.
Selecting a suggestion only places its associated Prompt into the Website Builder Input.
For example, selecting:
Workspace Dashboard
loads instructions for a modern dashboard with elements such as a Sidebar, project cards, Quick Actions, and recent activity.
You can edit that Prompt before generating.
A suggestion is best treated as a template.
For example:
Workspace Dashboard
can be changed from a generic dashboard into:
Create an enterprise insurance agency sales dashboard with producer metrics, pipeline cards, recent leads, policy activity, commission summaries and quick actions.
This lets you use the example structure while making the design specific to your business.
Website Builder's initial creation area provides:
Attach Image.
The current file selector accepts:
image files.
You can attach a reference image such as:
After attaching an image, Website Builder displays a small preview above the Prompt.
An X control is available on the preview to remove the image before starting the website.
The initial Website Builder Prompt also detects an image pasted from the clipboard.
When an image is present in clipboard data, Website Builder loads it as the selected reference image.
This can be convenient when working from a screenshot.
The initial Generate control becomes available when either:
However, a reference image plus a clear written instruction will generally give the AI more explicit guidance than an unexplained image alone.
When your initial brief is ready, select the circular Generate/Send control.
Website Builder transfers your request into the Website Playground, where the AI creates the design.
If a reference image is attached, it is carried into the initial design request.
The current initial Website Builder Prompt uses:
Shift + Enter
to begin the project.
This is different from several other PROS SUITE workspaces.
For this initial Website Builder screen:
Shift + Enter → Start Project
You can always use the visible Generate control instead.
The current full initial Website Builder generation workflow requests a deduction of:
500 PROS SUITE Tokens
before generating the new design.
If the required Tokens cannot be deducted, Website Builder stops the generation.
Website Builder has different Token behavior for:
500 Tokens in the current source workflow.
10 Tokens per current AI editing request.
This is one of the most important Website Builder operating concepts.
Because initial generation is substantially more expensive than later AI editing, prepare the first Prompt carefully.
Before starting, consider defining:
A strong first brief can reduce the need to restart from scratch.
After the project begins, Website Builder:
Website Builder does not necessarily wait for the entire AI response before changing the Preview.
While code is streaming, the workspace checks for usable generated website code and can update the Preview progressively.
This means you may see the website begin taking shape while AI generation is still underway.
Before useful streaming content arrives, Design Chat can display:
“AI is crafting your design…”
Allow the generation to complete before beginning another edit.
As generation progresses, Website Builder can display a:
Thinking…
panel containing streamed design information.
This can be expanded or collapsed.
Its purpose is to provide visual feedback while the design is being produced.
After a generated design response is recognized, Design Chat can display user-facing status elements including:
These help summarize the design activity.
Some of the action rows shown in the completed design card are derived from words found in the AI response rather than being a literal backend activity audit.
The source itself describes those derived actions as visual enhancements based on generated text.
Therefore, labels such as generated structure or compiled activity should be treated as interface progress presentation, not as a formal technical deployment log.
After a completed design, Website Builder can present an:
Up next
suggestion and a:
Build it
button.
The suggestion is derived from the design content or from a suggestion produced by the AI.
Selecting:
Build it
sends the displayed Up Next suggestion back through Website Builder's Design Chat as another AI modification request.
Because it invokes another Design Chat modification, it should be treated as another AI editing action rather than a free informational button.
After the project opens, the main working area has two primary sections:
Used to instruct the AI and review design-generation activity.
Displays the generated website visually.
A third Visual edits settings panel can appear when a specific element is selected.
The left-side workspace is titled:
Design Chat
with:
AI-Powered Assistant.
Use Design Chat for natural-language modifications to the generated site.
When no Design Chat messages exist, it displays:
“Ready to build something iconic?”
and:
“Describe your vision or upload a reference image to begin.”
This can occur when entering the Playground through + New Project without first using the main Website Builder brief.
The Website Builder Projects area includes:
+ New Project
which opens the Website Playground directly.
In that direct empty workspace, the user can begin through Design Chat.
For the clearest full-site creation workflow, the initial Website Builder brief at the top of /website remains the recommended starting point because that path specifically invokes the verified full initial-generation process.
Once a website exists, use the Design Chat Prompt:
“Ask for modifications or share a vibe...”
Examples:
Make the hero section more premium and enterprise-focused.
Change the primary color to deep navy blue.
Add a testimonials section below the features.
Make the navigation sticky.
Add a pricing section with three plans.
Improve the mobile spacing throughout the page.
To send an edit:
or select the arrow Send control.
3. Website Builder adds the instruction to Design Chat.
4. The AI updates the design.
The Design Chat footer explicitly tells users:
Press Enter to send.
Because Design Chat submits only when Enter is pressed without Shift, Shift + Enter can be used to create a new line inside a longer edit request.
This differs from the initial Website Builder screen, where Shift + Enter starts the project.
Keep the two contexts separate:
Shift + Enter → Start Project
Enter → Send
Shift + Enter → New line
Every current SendMessage AI modification workflow deducts:
10 Tokens
before processing the requested edit.
If deduction fails, the pending user message is removed and the edit does not proceed.
Because current follow-up AI editing costs considerably less than the verified 500-Token initial generation, an efficient workflow is:
Generate strong initial site
↓
Keep existing project
↓
Request focused improvements
rather than repeatedly creating complete new sites for small changes.
When a follow-up edit is sent, Website Builder includes the current design and the previous Design Chat messages in the AI editing workflow.
This allows follow-up requests such as:
Keep everything else the same and make the hero shorter.
without requiring you to reproduce all prior website requirements manually.
Design Chat also includes a Paperclip control for images.
Its file selector accepts:
image/*.
You can attach a reference image to a modification request.
For example:
Restyle the hero to feel closer to this reference image, but keep our existing copy.
Like the initial Builder, Design Chat detects pasted clipboard images and displays them as the selected reference image.
A selected Design Chat image displays an X button.
Use it to remove the image before sending the modification.
The generated website is displayed inside the Website Preview area.
The current workspace renders the generated design in an isolated preview frame.
As you edit the design, the Preview updates to reflect the current generated website code.
The Website toolbar contains a Monitor icon for the desktop/web view.
Select it to preview the design at full available width.
Beside the desktop control is a mobile-device icon.
Selecting it changes the Preview to approximately:
375 px wide.
Use this to inspect how the site looks on a narrower mobile viewport.
Before saving a final design:
Responsive review is especially important for generated website designs.
The Website toolbar includes:
View
when the toolbar has enough space.
Selecting it creates a full HTML preview and opens it in a new browser tab.
This is useful for reviewing the site outside the editor layout.
The View command creates a browser preview from the current generated HTML.
It does not mean the website is publicly published.
Publishing is a separate action covered in Chapter 15.
The Website toolbar contains:
Code.
Selecting it opens the generated source in a code viewer.
The current code viewer identifies the file as:
index.html.
Inside the Code viewer is:
Copy.
Selecting it copies the current generated source and displays:
Source code copied!
This can be useful if you need to transfer the generated HTML into another authorized development workflow.
The Website toolbar provides:
Download.
The current download creates:
index.html.
This differs from the Standard Generator's .txt downloads.
After the HTML download is created, Website Builder displays:
Download successful!
When the Website Preview area becomes narrow—or when the Visual edits panel requires additional space—the commands:
move into a three-dot menu rather than remaining as individual toolbar buttons.
The functions remain available.
Design Chat contains a control labeled:
Visual edits.
Visual edits allows you to select a specific element inside the website Preview and work on that element instead of asking the AI to rewrite the entire design.
Select:
Visual edits
The control changes its active appearance.
When Visual edits is active, moving across page elements in the Preview highlights them.
Click a specific element to select it.
When an element is selected, Design Chat displays a breadcrumb-like indicator showing:
Design / [element tag].
For example, the selected element could be identified as a heading, button, section, image, or another HTML element type.
Use the X beside the selected-element indicator or Close in the Visual edits panel to clear the current selection.
When a normal non-image element is selected, Website Builder opens:
Visual edits.
The current panel includes controls grouped around:
The current Visual edits panel provides:
Choices currently include sizes from 12px through 48px.
Visual edits includes:
Use these to make direct visual changes to the selected element.
The Visual edits panel includes separate controls for:
This allows precise local spacing adjustments.
The current panel also provides:
Border styles include:
Changes made through controls such as font size, text color, spacing, and borders are applied directly to the selected Preview element and copied back into the current working website design.
These direct style adjustments do not use the Design Chat AI request handler.
Therefore, the source does not establish the same 10-Token AI edit deduction for simply changing these local style controls.
Even when a local visual change immediately appears in the Preview, it is still part of the current working design state.
Use Save to persist the project before leaving.
Do not assume every Preview change is automatically committed to the saved project.
At the bottom of Visual edits is a targeted AI field:
“Ask AI to modify selected...”
This lets you apply a natural-language AI edit specifically to the selected element.
Suppose you select a button.
Enter:
Make this button larger, use a stronger blue background, make the corners more rounded and change the text to Schedule a Demo.
Because a specific element is selected, Website Builder asks the AI to modify that element rather than blindly redesigning unrelated page sections.
A targeted AI request from Visual edits is passed through the same Website Builder Design Chat editing function.
Therefore, the current verified 10-Token AI editing deduction applies to that AI request path.
When an element is selected, the current AI editing instructions specifically ask the Model to return the updated selected element rather than the entire unrelated page.
Website Builder then replaces the selected element in the current design.
This is useful for reducing unintended changes elsewhere.
If the selected page element is an image, Website Builder opens:
Image Settings
instead of the standard Visual edits controls.
The current Image Settings panel includes user-facing controls for:
To replace an existing selected image:
The image selector accepts image files.
Image Settings contains:
Generate AI Image
using the value entered in the Prompt field.
This image-generation behavior is tied to the image service used by the Website Builder environment.
Its availability can therefore depend on the current image-service configuration.
The current Image Settings source defines the following transform options:
Their actual availability depends on the current image-processing environment.
Once you are satisfied with the working design, select:
Save.
While saving, the button changes to:
Saving
with a loading indicator.
When the project saves successfully, Website Builder displays:
Website Saved Successfully!
If it is the first save of a new project, Website Builder also attaches the newly created Project ID to the current workspace URL.
The current save workflow includes:
This is why a saved Website Project can later reopen with both the design and its prior Design Chat messages.
The current save workflow does not provide a separate user-facing Project Name field.
Instead, the Project Name is automatically derived from:
the initial userprompt
or, when no such initial Prompt exists:
“New Website”.
The current source does not establish a user-facing:
for Website Builder.
Therefore, this manual will not instruct users to rename website projects through a control that is not currently present.
When you start through the main Website Builder creation Prompt, that initial request can become the saved project's Name.
For example, an initial Prompt like:
Create an enterprise software landing page for insurance agencies
may be used as the project's displayed Name.
For that reason, consider keeping the opening request descriptive but reasonably concise.
If the project was created without an initial userprompt, the current save logic uses:
New Website.
Because no current Rename control is established, this is another reason the main Website Builder creation path is useful when you want a descriptive project listing.
Website generation updates the working design.
It does not automatically mean the project has been persisted through the Website Builder Save operation.
Recommended:
Generate → Edit → Review → Save
Do not leave an important project unsaved.
Good times to select Save include:
Saved websites appear under:
Your Projects.
Each current project card displays:
On a saved Website Project card, select:
Edit.
Website Builder reopens the project in the Playground.
The current loading workflow restores:
Website Builder generates a miniature visual Preview inside each project card using the saved website design.
This helps identify projects visually before opening them.
Each project card displays:
Last updated: [date].
Use this as a quick reference when choosing among saved projects.
If no saved Website Projects exist, the Projects area displays:
“No projects yet. Create your first AI website!”
Use the Website Builder creation area to begin.
Website Builder includes a Delete control on each saved project.
Selecting it opens:
Delete Project
with:
“Are you sure you want to delete this project? This action cannot be undone.”
Project deletion will be covered again as part of project management in Chapter 15.
Website Builder uses the currently selected PROS SUITE AI Model when sending website-generation and editing requests.
Therefore, Model selection from Chapters 10 and 11 can affect Website Builder.
Under certain environments, the Website Playground can display a note recommending:
Gemini 3.6 Flash
or:
GPT 5.4 mini
for best results.
The banner is conditional and should not be assumed to appear for every subscriber.
Use the Models actually available in your current Model Selector.
Website Builder sends the current selected Model into its AI workflow.
Therefore:
The Website Builder's generated design is converted into complete HTML for:
The user-facing Code view identifies the website as index.html, and Download produces that HTML file.
Although users can view and download the generated HTML, ordinary Website Builder operation can be performed through:
You do not need to manually write HTML to create a site.
More technical users can open:
Code
and review the generated HTML with line numbers.
The Code viewer is a viewing/copying interface; the current source does not establish direct manual code editing within that viewer.
The current Code window provides:
It does not establish an editable source-code editor in that dialog.
For normal changes, use:
A saved website remains a saved Website Project.
Publishing is a separate action.
Therefore:
Save ≠ Publish
View ≠ Publish
Download ≠ Publish
The public hosting process begins only when you use the separate Publish workflow.
Chapter 15 covers this in detail.
On the initial Website Builder screen, the Generate control remains disabled when:
Enter a website description or attach an image.
Possible causes include:
The initial workflow requires the verified 500-Token deduction before generation continues.
If the initial deduction fails:
For later AI Design Chat edits, the current workflow uses 10 Tokens.
If the full initial response does not contain usable website code, Website Builder displays:
“AI did not generate any code.”
Possible actions:
For an AI edit, Website Builder can display:
“AI did not generate any valid code for this modification.”
Try a clearer instruction.
For example, instead of:
Fix this.
use:
Change the hero headline to two lines, reduce its font size on mobile and keep all other sections unchanged.
If the editing request itself fails, Website Builder can display the returned error or:
“Failed to send message”.
Check:
before retrying.
If Save cannot complete, Website Builder can report:
Failed to save website
or:
Error saving website: [message].
Do not leave the workspace assuming the design has been persisted.
Retry Save after resolving the issue.
A direct Visual edit changes the current working design.
If you leave without successfully selecting Save, that change should not be assumed to exist in the saved Website Project.
After important visual adjustments:
Review → Save → Confirm Website Saved Successfully!
The current save workflow uses:
New Website
when no initial user Prompt is available for naming.
The source does not establish a Rename control.
For future projects, starting with a descriptive initial brief can create a more identifiable project Name.
There is no source-verified current Website Builder:
Rename Project
function.
Do not look for a hidden Rename workflow.
This is expected.
View creates a local browser preview.
Use Publish when you intend to make the project available through its public Website Builder URL.
Publishing is covered in Chapter 15.
If:
are not individually visible, look for the three-dot menu.
The Website toolbar enters compact mode when the available width becomes small.
When a selected element opens the Visual edits panel, the main PROS SUITE Sidebar can automatically collapse to preserve working space.
This is expected workspace behavior.
The current Website Builder listens for the main Sidebar being manually expanded.
When that happens, it can clear the current selected-element Visual edits panel to prevent the layout from becoming too constrained.
If your selected element disappears, reactivate Visual edits and select it again.
Before the initial 500-Token generation, outline the website.
Example:
Page Goal
Generate enterprise demos.
Sections
Then turn that architecture into the initial Website Builder Prompt.
Include important brand requirements before first generation:
This reduces later redesign work.
A screenshot is useful for:
But also tell AIUNIFY:
Once the overall site is strong:
Do not rebuild everything to change one button.
Use:
This protects existing work and can use Tokens more efficiently.
Use direct Visual edits for changes such as:
Use AI editing for broader design/content changes.
A selected-element AI Prompt is appropriate for:
This is more controlled than asking for a general page-wide redesign.
A desktop design can look good while creating issues on mobile.
After major changes:
Desktop Preview
↓
Mobile Preview
↓
Correct layout if necessary.
Before a large change such as:
Completely redesign the homepage in a different style
select:
Save
first.
This preserves the currently saved version before you make more extensive changes to the working design.
In addition to saving inside PROS SUITE, use:
Download → index.html
when you need an external copy of an important generated site version.
This can be useful for controlled backup or development handoff.
Because current Website Builder naming is automatic:
Initial Prompt → Project Name
or:
No initial Prompt → New Website
keep the opening brief descriptive enough to identify the project later.
A strong complete creation workflow is:
WEBSITE BUILDER
↓
Define Site Goal
↓
Write Detailed Initial Brief
↓
Optional:
Attach Reference Image
↓
Generate
↓
500-Token Initial Creation
↓
Review Generated Preview
↓
Desktop / Mobile Check
↓
Design Chat
↓
10-Token AI Refinements When Needed
and/or:
Visual Edits
↓
Review
↓
Save
↓
Website Saved Successfully!
↓
Continue Editing or Move to Publishing
Before initial generation:
After initial generation:
index.html.The source verifies the following subscriber-facing capabilities:
index.html
The source does not establish a subscriber-facing universal function for:
Do not expect these functions unless they are added to a future user-facing version.
The current Builder can be summarized as:
DESCRIBE
Ask AIUNIFY to build a website that can...
↓
Optional:
ATTACH IMAGE
↓
GENERATE WEBSITE
Current verified full-generation workflow:
500 Tokens
↓
DESIGN CHAT + PREVIEW
↓
Choose:
AI EDIT
Current verified editing workflow:
10 Tokens
or:
VISUAL EDITS
Direct local styling
↓
DESKTOP / MOBILE PREVIEW
↓
VIEW / CODE / DOWNLOAD
↓
SAVE
↓
WEBSITE PROJECT
↓
Next:
PUBLISH / DOMAIN MANAGEMENT
Website Builder is AIUNIFY PROS SUITE's AI-assisted website design and project workspace.
The main creation interface invites users to:
“Ask AIUNIFY to build a website that can...”
and supports both natural-language instructions and image references.
The current full initial generation workflow requests 500 Tokens before creating a new website.
Once a site exists, the Design Chat lets users request additional modifications through:
“Ask for modifications or share a vibe...”
and current follow-up AI editing requests use 10 Tokens.
Website Builder also provides Visual edits, allowing users to select individual page elements and adjust Typography, Colors, Spacing, and Borders directly. A selected element can also receive a targeted AI instruction through:
“Ask AI to modify selected...”
The generated website can be previewed in desktop or mobile form, opened through View, inspected through Code, copied, or downloaded as index.html.
Selecting Save persists the current website design and Design Chat messages. A successful operation displays:
Website Saved Successfully!
The current project Name is generated from the initial Website Builder Prompt or defaults to:
New Website
when no initial Prompt exists. No user-facing Rename function is established in the current source.
The most effective operating method is:
Plan the Site → Generate Once → Review → Refine Through Design Chat → Use Visual Edits for Precision → Check Desktop and Mobile → Save → Preserve Important Versions → Publish Only When Ready