Wireframing in Claritee is fast, visual, and flexible. You can generate full layouts with AI, drag and drop elements manually, or mix both approaches.
Below are 2 video guides. The first one is 90 seconds to help get you up and running. The second one is very in-depth. We recommend watching them in order, since the first will give you a basic understanding allowing you to start working, and the 2nd will help you understand the process deeply.
Video 1 (90-second quick explanation)
https://www.youtube.com/watch?v=X3lX5vM0p18
Video 2 (in-depth guide)
https://www.youtube.com/watch?v=v9rpV7nWTjo
Step by step guide to wireframing:
1. Create Your Project
Open your room, create a new project, select “start from scratch”, and name it. You’ll start with a blank site map.
2. Build Your Site Map (Optional)
If you only need a single-page wireframe, select the first page and open the layout tab.
If you want a full structure, add as many pages as you want and map your entire site before wiring pages individually.
3. Generate Wireframes With AI
Inside the layout tab:
• Use the top-right AI button to generate an entire page.
• Or work section by section. Select a section (like a hero or heading area) and regenerate it individually.
4. OR, Build Manually With Drag and Drop
The left panel gives you everything you need:
• Sections: pre-built blocks for fast layout.
• Elements: individual items or grouped elements.
• Text: editable, resizable, linkable.
• Shapes: basic structure tools.
• Images: placeholder images or real assets via Unsplash search or local uploads.
• Icons: drop them anywhere.
Everything is draggable. Everything is editable.
5. Share and Collaborate
You can:
• Invite team members to edit with you.
• Share a public link for review.
6. Move From Wireframe to Design
Switch to the design tab to:
• Let AI convert your wireframe into a visual design.
• Publish the page.
• Edit the generated HTML or CSS if needed.