The Design View: Finishing your Project in Claritee

  1. Overview
  2. The Basics
  3. The Design View: Finishing your Project in Claritee

Design View: Turning Your Layout into a Final Design

The Design View is where Claritee transforms your layout into a polished, ready-to-share design. While most editing is done in Layout View, the Design View allows you to finalize styling, generate exports, and prepare files for your team or publishing tools.

Navigation and Breakpoints

  • Breakpoints – Select or add breakpoints from the bottom-right corner. These apply across your entire project (desktop, tablet, mobile, etc.).

  • Zoom Controls – Zoom in and out just like in Map and Layout views, or use Zoom to Fit to see the full page.

  • Help Access – Click the help icon in the bottom-right for support.

Exporting Designs

From the top-right menu, you can export your finished design as:

  • PNG – For static image previews.

  • PDF – For shareable or printable documents.

  • HTML – For implementation in your editor of choice.

👉 Best practice: Most teams export HTML when finishing a project. You can copy this into your editor, hand it to your development team, or share it directly with collaborators.

How Design View Works

  • Your Design View is fully based on your Layout View.

  • You do not edit elements directly in Design View — all edits happen in Layout View.

  • The AI uses your layout structure to generate the final design.

This ensures you have full control over content and structure before the design is created.

Styling Options

From the Design View, you can:

  • Fonts – Choose from available typefaces.

  • Themes – Apply prebuilt color themes, or

  • Custom Colors – Set your brand colors using hex or RGB values.

Regenerating the Design

Once you’ve made changes to the layout, fonts, or color themes:

  • Click the big blue Regenerate Design button on the left side of the screen.

  • Wait a few moments for your updated design to be generated.

Summary

Design View is where your Claritee project comes together visually. Use it to:

  • Adjust fonts and colors.

  • Export in PNG, PDF, or HTML.

  • Regenerate designs after making layout or style updates.

Bottom line: Layout View gives you control; Design View turns that control into a polished design you can share, export, or hand off to your team.

Was this article helpful?