The Layout View: Arranging Your Content Layout in Preparation for Your AI Design System

The Layout View is the glue that holds your entire Claritee project together. This is where you define the structure and content of each page before moving into the final design stage.

Everything you set up here — sections, images, text, and arrangement — directly informs what the AI produces when you switch to Design View.

Because of that, the Layout View is where most of your actual project work will take place. It’s the space where you:

• Map out each page.

• Decide how content is organized.

• Provide the foundation for the AI to generate a polished design.

Claritee gives you a wide range of tools in Layout View to customize your pages exactly the way you want. Let’s explore those features step by step.

Navigation, Breakpoints, and Versions in Layout View

The Layout View includes several tools that help you control how you see your project, work across different device sizes, and manage multiple versions of a page.

Zoom Controls (Bottom-Right)

• Use the + / – buttons to zoom in and out, just like in the Map View.

• Click the zoom percentage to choose a preset level.

• Select Zoom to Fit to automatically fit the page into your view.

Breakpoints

To the left of the zoom controls, you’ll see breakpoint options.

• Breakpoints allow you to design for different screen sizes (e.g., desktop, tablet, mobile).

• When you create a new breakpoint, it becomes available on every page in the project — you don’t need to set them up individually for each page.

• Example: Create a Mobile View breakpoint once, and it will be usable everywhere.

Versions (Top Banner)

The gray banner at the top of Layout View gives you control over page versions.

• Create New Version – Start a blank version of your page.

• Duplicate Version – Use the three-dot menu (far-right) to copy your current version with all content, then continue working from there.

• Export Options – You can export directly from the version menu or from the top-right of the screen.

• Copy to Webflow – Send your layout elements directly to Webflow for further development (see dedicated guide).

• Delete Content / Delete Version – Quickly clear a layout or remove a version if no longer needed.

Lock and Save (Top-Left)

• Lock Layout – Prevent accidental changes by locking the workspace.

• Save Status Indicator – Shows whether your changes are saved. Updates in real time, but watch this if you have unstable internet.

Links-Mode (Top-Left)

Activate this mode to easily add links to elements:

• • Link to other pages in your project.

  • Add a custom URL.

  • Create an anchor link to a specific section on the same page.

Adding, Arranging, and Generating Sections with AI

In Layout View, sections are the building blocks of your page. You can rearrange them, add new ones, or even use AI to generate fresh content.

Generating with AI

• Section Level – Click inside any section, then click the blue AI icon in the upper-right of a section to generate that specific section using an AI prompt. If there are already elements inside the section, they will be removed when the sections is re-generated using AI.

• Full Page – Click outside of all sections (into the gray canvas). A blue AI icon will appear in the upper-right of the page. Selecting this will regenerate the entire page from scratch with a new AI prompt.

⚠️ Note: Full page regeneration replaces everything on the page.

Moving Sections

• Select a section and click the arrows that appear on the right of the section to move it up or down to rearrange its position within the page.

Adding Sections

When you click inside a section, you’ll see + icons:

• Bottom-Left / Top-Left of a section – Click to insert a new section above or below.

Adding and Arranging Content in Layout View

You can manually add text, images, icons, and prebuilt sections to your page. The Content Panel on the left side of the screen gives you full control.

Opening the Content Panel

• Click the + button on the left-hand side to open the content panel.

• From here, you can add content manually, search for prebuilt elements, or upload assets.

Adding Text

• Select Text to insert a text block.

• You can type directly, then adjust size, style, and formatting later.

• To undo or redo changes:

  • Bottom-right controls or

  • Keyboard shortcuts:

    • Undo: Command+Z (Mac) / Ctrl+Z (PC)

    • Redo: Command+Shift+Z (Mac) / Ctrl+Shift+Z (PC)

Adding Prebuilt Sections and Elements

• Choose from ready-made sections or elements like buttons, breadcrumbs, or hero blocks.

• Use the search bar to quickly find what you need (e.g., search for “hero section”).

• Drag and drop to add them:

  • Drop on top of an existing section to replace it.

  • Drop between sections to insert a new one.

Adding Images

• Upload your own images directly, or

• Search and import from Unsplash.

• Drag and drop images into the layout to place them.

• Any images you add are saved at the room level, so they’ll be available in all projects within that room.

  • Example: upload a logo once, and reuse it across multiple projects in the same room.

Adding Icons

• Use the built-in icon library.

• Search by keyword, then drag and drop icons directly into your layout.

Comments Toggle

• Use the Show/Hide Comments toggle to display or hide feedback markers as you work.

When you select an element in the Layout View, a toolbar appears at the top of the screen. This toolbar gives you precise control over how each element behaves and looks. The available options depend on the type of element you’ve selected.

Settings for Each Element

When you select an element in the Layout View, a toolbar appears at the top of the screen. This toolbar gives you precise control over how each element behaves and looks. The available options depend on the type of element you’ve selected.

Image Controls

For images, you can:

• Corner Radius – Round the corners of your image.

• Rotate – Rotate images to the desired angle.

• Resize / Change Height – Adjust proportions as needed.

• Arrange – Send the image forward or backward in the layer stack.

• Replace Placeholder – Quickly swap in a new image.

• Borders – Add or remove borders around the image.

• Fill/Opacity – Adjust transparency to blend images into your layout.

• Links – Attach a link to the image.

• Lock as Background – Fix the image so it doesn’t move accidentally.

• Duplicate / Delete – Quickly clone or remove the image.

• Alignment – Align images relative to other elements.

Text Controls

For text elements, you can:

• Font Size – Adjust manually or apply predefined text styles.

• Bold / Regular Toggle – Change text weight.

• Alignment – Left, center, right, or justified.

• Links – Make text clickable with a custom URL.

• Icons – Insert icons inline with your text.

• Lists – Add bullet or numbered lists.

• Fill/Background – Add background color or highlight effect.

• State – Define the state (e.g., active, hover) to show different text styles for different interactions.

My Library: Saving and Reusing Content

Your Library is a shared space across your entire room, making it easy to build reusable sections or groups.

• Saving to the Library

  • Select a section (e.g., a top menu).

  • Click Save to My Library.

  • That section is now reusable across all projects in the room.

• Favorites – Mark library items as favorites for quick access.

• Groups – Save not just full sections, but smaller groups of elements.

  • Example: Select a group of featured products → save as Wireless Catalog → reuse in multiple places, even inside other sections.

👉 Library = consistency and speed. Build once, reuse everywhere.

Comments, Conversations, and Notes

Collaboration in Claritee’s Layout View is powered by the Conversations panel. From here, you can leave comments, assign tasks, and keep permanent notes that guide your project.

Opening the Conversations Panel

• Click the thought bubble icon on the left-hand side of the screen to open Conversations.

Adding and Managing Comments

When you add a comment, you have several options:

• Visibility

  • Internal – Only visible to collaborators in the workspace.

  • Public – Visible to anyone with the Share Link.

• Link to Comment – Copy a direct link to the comment for easy reference.

• Resolve – Mark a comment as completed.

• Mark as Important – Flag key feedback.

• Reply – Start a thread under the comment.

• Mention Teammates – Use @name to notify someone directly.

👉 Example: Leave a comment for Bruno, tag him, and he’ll get notified to take action.

Filtering Comments

The Comments panel lets you sort and filter by:

• Resolved – Show only completed items.

• Assigned to Me – See all comments where you’ve been mentioned.

• Important – Show flagged comments.

• My Comments – See only the ones you wrote.

• Internal – Workspace-only comments.

• Public – Comments visible via Share Link.

This makes it easy to focus on exactly what matters to you.

Notes (Permanent Information)

• Notes work like comments but are intended for long-term reference.

• Use them to capture project intent, design rationale, or other details you don’t want lost in comment threads.

• Notes appear in the Notes section of the Conversations panel.

Reordering Comments

• Hover over the small icon on a comment.

• Drag and drop to arrange them across the layout.

Beyond arranging content, Layout View includes several tools for managing your account, sharing projects, and navigating between different parts of Claritee.

Other Features you Can Access from Layout View:

Account and Member Options (Top-Right)

• Account Menu – Access your personal settings or sign out.

• Add Members – Invite collaborators directly into your project.

• Share Link – Generate a public link so others can view without logging in.

  • Choose what viewers can see and interact with.

  • Great for quickly sharing progress with clients or stakeholders.

• Export Options – Export your project in various formats (PNG, PDF, CSV, TXT).

• Preview Mode – Opens a view-only version of your project:

  • You can click through interactive elements.

  • Navigate between pages.

  • No editing allowed.

Notepad

• Accessible from the top-right.

• Collects all project notes, including those added from Map View.

• Useful for:

  • Project requirements.

  • High-level documentation.

  • Reference information to be visible across all pages and screens.

AI Actions Bonus

• You can earn extra AI actions by inviting new people to join Claritee.

Navigation (Top-Left)

• Breadcrumb Trail – Shows your current location.

  • Click breadcrumbs to move back to a page, up to a project level, or even to your room.

  • Use it to move quickly between layers of your project.

• Navigation Panel (3-line icon) – Expand to jump between:

  • Workspaces

  • Rooms

  • Projects

  • Individual Pages

Bottom-Left Controls

• Onboarding Video – Replay the tutorial at any time for a refresher.

• Settings (see section on settings above)
• Deleted Items (review recently deleted items and restore them if necessary)
• Help Center (Access the help center)

Layout Settings

The Layout Settings give you flexibility over how you view, organize, and refine your layouts. These tools help you focus on the right details while keeping consistency across your project.

Access Layout Settings (Bottom-Left)

• Image Color Toggle – View images in grayscale to avoid getting attached to a particular aesthetic too early. This helps you focus on content and messaging.

• Theme Options – Choose a theme for your layout view: Pink, Blue, Black, or Dark Mode. Themes are purely visual and based on preference.

• Text Settings – Adjust default sizing and weight (bold/regular) for predefined text types like Heading and Subheading.

  • ⚠️ These changes only affect new text you add. Existing text blocks remain unchanged.

  • Setting defaults early is useful for maintaining consistency.

• Canvas Grid – Display a grid overlay to make aligning elements easier.

  • Choose the number of columns for your grid.

• Status Settings – Mostly relevant in Map View, not commonly used for the Layout itself.