Workflow Tools

Prompt templates, style guide generation, and project management

Prompt Templates

Make Mode includes 60 built-in prompt templates across 8 categories. Instead of writing prompts from scratch, pick a template and customize it.

Using Templates

Click "Browse Templates" in the chat panel
Select a category from the template dialog
Click a template to insert it into the chat input
Customize the template as needed and press Enter to generate

Available Templates

Components (16)

Navigation Bar — Responsive navbar with logo, links, and hamburger menu
Hero Section — Full-width hero with heading, CTA, and background
Card Grid — Responsive grid of content cards with hover effects
Footer — Multi-column footer with links, social icons, and newsletter
Sidebar Navigation — Collapsible sidebar with nested menus
Breadcrumbs — Navigation breadcrumbs with truncation
Tab Bar — Horizontal tabs with animation and badges
Accordion — Collapsible sections with animated expand/collapse
Modal Dialog — Reusable modal with backdrop and animations
Toast Notifications — Success/error/warning/info notification system
Carousel / Slider — Image carousel with arrows, dots, and swipe
Testimonials — Quote cards with avatar, rating, and carousel
Feature Grid — Features/benefits section with icons and descriptions
Stats / Counters — Animated number counters with count-up on scroll
Timeline — Vertical timeline with alternating left/right layout
Avatar Group — Overlapping avatar stack with "+N more" indicator

Forms (8)

Login Form — Email/password with social login and validation
Registration Form — Multi-step signup with progress indicator
Contact Form — Name, email, message with loading state
Search with Filters — Search input with filter chips and sort options
Checkout Form — Shipping address, payment, and order summary
Survey / Quiz — Multi-step survey with progress bar
File Upload — Drag-and-drop with progress and previews
Newsletter Signup — Inline email signup with success/error states

Pages (10)

Dashboard — Admin dashboard with stats, charts, and activity table
Pricing Page — 3 plan tiers with monthly/annual toggle
Settings Page — Tabbed sections with form controls
Landing Page — Complete landing with hero, features, testimonials, FAQ
Blog Post — Article layout with author info and related posts
Profile Page — User profile with cover photo, stats, and tabs
Error Pages — 404 and 500 pages with illustrations
Onboarding Flow — Multi-step wizard with progress and illustrations
Gallery / Portfolio — Masonry grid with lightbox and filtering
FAQ Page — Searchable FAQ with accordion and contact section

E-Commerce (5)

Product Card — Product card with image, price, rating, and cart button
Product Detail — Full product page with gallery and selectors
Shopping Cart — Cart with quantity, subtotal, and discount code
Order Confirmation — Success page with order summary
Category Listing — Product grid with filters and pagination

Data Display (5)

Data Table — Sortable, searchable table with pagination
Charts Dashboard — Line, bar, donut charts with period selector
Kanban Board — Draggable cards across columns
Calendar View — Month/week/day views with events
Activity Feed — Timestamped feed with avatars and attachments

Feedback & Overlay (5)

Empty State — No results, no data, and error states with illustrations
Loading Skeletons — Shimmer placeholders for cards, lists, and tables
Popover Menu — Dropdown menu with keyboard navigation
Command Palette — Cmd+K search with categorized results
Cookie Banner — GDPR consent with preference toggles

Mobile (5)

Bottom Navigation — Tab bar with badges and center FAB
Chat Interface — Message bubbles, typing indicator, and image support
App Login Screen — Mobile login with biometric and social options
Pull-to-Refresh List — Scrollable list with swipe-to-delete
Bottom Sheet — Draggable sheet with snap points

From Design (6)

Match Attached Design — Generate code matching your selected elements
Design System — Extract a complete design system from elements
Responsive Version — Create responsive layout from design
Dark Mode Version — Generate dark mode with CSS custom properties
Accessibility Audit — Accessible code with ARIA and keyboard navigation
Animation & Micro-interactions — Add transitions, hover effects, and scroll reveals

Style Guide Generation

Generate a complete design system from your design elements with one click:

Select design elements on the canvas (or attach them to Make Mode)
Click "Generate Style Guide" in the Make toolbar
The AI analyzes your design elements and generates a comprehensive style guide

The generated style guide includes:

Color palette — CSS custom properties for all colors used
Typography scale — Font families, sizes, weights, and line heights
Spacing tokens — Consistent spacing values as variables
Border radius tokens — Rounded corner values
Shadow tokens — Box shadow definitions
Component styles — Button, card, and input base styles

Tip

Generate a style guide first, then reference it in follow-up prompts. This ensures all your generated components use consistent colors, spacing, and typography.

Project Management

Save and manage your Make projects locally for later access:

Saving Projects

Click "Save Project" in the Make toolbar
Your chat history, generated code, and framework selection are saved
Projects are stored locally in your device's storage

Loading Projects

Click "Load Project" in the Make toolbar
Browse saved projects showing framework badge, message count, and last updated date
Click a project to reopen it with full chat history and code

Deleting Projects

From the Load Project dialog, click the delete icon on any project
Deleted projects cannot be recovered

Design Element Context

When you attach design elements to Make Mode, the AI receives rich context about your design:

Colors — Fill colors, stroke colors, gradients
Typography — Font families, sizes, weights
Spacing — Padding, margins, gaps from auto-layout
Layout — Constraints, auto-layout direction, alignment
Interactions — Animations and interaction hints
Design tokens — Summarized as a token reference

This context is automatically included in AI prompts for more accurate code generation that matches your visual design.