Every app in Blocks is made up of three layers:
Design – What people see: customizable interfaces for each role, with built-in databases.
Logic – The workflows and AI agents that automate tasks, connect to systems, and generate insights.
Data – A built-in database that powers your app and provides agents with full context.
What is the Design Layer?
The Design Layer defines what people see and do inside your app. It includes pages, layouts, and navigation for each role. Behind the scenes, it’s connected to the Data Layer (where your tables live) and the Logic Layer (where automations and AI agents run).
Think of it as the front end of your app: dashboards, forms, tables, kanban boards, charts, and any other interfaces your team and clients will use.
How the Design Layer Works?
Building with Ella
Ella, your AI builder, creates app designs for you. Just explain what you need in plain language, and she’ll build the pages automatically.
The more specific you are, the more accurate Ella’s output will be. For example:
Instead of asking:
“Build me a CRM.”
Ask:
“Build me a CRM with: a dashboard page showing analytics (pipeline value, deals won, average ARR), a pipeline page with both table and kanban drag-and-drop views, a companies page for all company records, and a contacts page for all contacts.”
Ella will not only create the design, but also:
Generate the right data tables in the Data Layer.
Connect them to the pages.
Set up agents and automations in the Logic Layer (like sending emails or scheduling meetings). Learn more about Logic here →
How the Layers Work Together
The Design layer doesn't work in isolation:
Data Layer: Provides the content that appears in your UI (e.g., deals, customers, contacts).
Logic Layer: The design triggers workflows and automations, or displays results from AI agents(e.g., updating deal status, showing emails sent by agents).
Design Layer: Displays everything in a clean, role-specific interface.
Navigating Your App
App Structure
Your app includes:
Sidebar navigation: Usually positioned on the left side (occasionally in the top bar), showing all accessible pages within the app
Multiple pages: Each serving different functions based on your app's purpose
Role-based interfaces: Different views and access levels for different user types
Builder View vs. App View
As a builder, you have enhanced visibility:
See all pages: Including hidden pages like success pages after form submissions or client-specific project pages
Access different roles: Navigate between role perspectives to experience how each user type interacts with your app
Tip: If Ella says she created something but you don’t see it in the app, check the builder view - she may have added it as a new page or updated a different one.
Role-Based Interfaces
Every app can have different UIs for different roles. With Ella, you can set up:
Different pages for each role.
Different permissions (what each role can see or edit).
Different layouts or sections tailored to each role’s responsibilities.
This makes it easy to give, for example, clients access to only their projects while your internal team sees everything.
Editing the Design Layer
You can always continue refining your app’s look and feel with Ella.
Modify specific sections or components
Create role-specific views and access permissions
Implement design inspiration from screenshots you share
Best Practices for Design Requests
Be Specific:
Instead of saying "add customer ARR," try:
"In the pipeline page table view, add columns for 'Deal Estimated ARR' and 'Actual ARR.' Please also add the Actual ARR field to the company entity displayed on the company page."
Tip: Ella reviews the full code of your app every time you make a request. The more specific you are about where the change should happen, the better the result.
Coming Soon ✨
We’re about to release a new feature that will transform app design in Blocks. Stay tuned - or reach out at [email protected] if you’d like to learn more ahead of time.