ChatGPT
ChatGPT is an AI assistant for writing, learning, research, problem solving, and creative tasks. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARYFramer AI is a website platform for generating and designing responsive pages with intelligent tools. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
Explore all lessons in this catalogue and start learning at your own pace.
▶
1. What Is Framer AI? ❌
Discover Framer AI with AI Academy 1U as an AI-powered website-building platform for designers, marketers, and teams that want to move from concept to a production website efficiently.
▶
2. The Framer Ecosystem ❌
Explore the Framer ecosystem with AI Academy 1U, including Design Canvas, AI Agents, CMS, SEO, Analytics, Forms, Hosting, Publishing, and developer tools.
▶
3. What Can You Build with Framer? ❌
Explore what you can build with Framer through AI Academy 1U, including portfolios, landing pages, marketing sites, company websites, CMS-powered sites, directories, and campaign pages.
▶
4. Create and Set Up Your Framer Account ❌
Create and prepare your Framer account with AI Academy 1U by setting up your workspace, projects, and essential working environment for professional website development.
▶
5. Explore the Framer Workspace ❌
Explore the Framer workspace with AI Academy 1U by learning how to work with the canvas, pages, layers, assets, properties, and publishing controls.
🔒
6. Understand the Professional Framer Workflow ❌
Understand the professional Framer workflow with AI Academy 1U by moving from brief and structure through design, AI assistance, CMS, responsive refinement, SEO, testing, and publishing.
▶
7. Understand Frames, Layers and Sections ❌
Understand frames, layers, and sections with AI Academy 1U so you can structure Framer pages clearly and manage website content effectively.
▶
8. Work with Stacks ❌
Work with Framer Stacks using AI Academy 1U by controlling direction, gap, padding, and alignment to create flexible layouts.
🔒
9. Size and Position Elements ❌
Size and position elements with AI Academy 1U by using fixed, relative, fill, and responsive sizing techniques appropriately.
🔒
10. Typography Fundamentals ❌
Learn typography fundamentals with AI Academy 1U by working with fonts, weight, line height, letter spacing, and visual hierarchy.
🔒
11. Colors and Visual Styles ❌
Build consistent colors and visual styles with AI Academy 1U to create a unified visual language across a Framer website.
🔒
12. Build a Complete Page Layout ❌
Build a complete page layout with AI Academy 1U by combining a hero, content sections, calls to action, and a footer within a responsive structure.
▶
13. Understand Responsive Design in Framer ❌
Understand responsive design in Framer with AI Academy 1U and learn how one website adapts across different screen sizes and devices.
▶
14. Work with Breakpoints ❌
Work with breakpoints using AI Academy 1U by designing and refining layouts for desktop, tablet, and mobile.
🔒
15. Create Responsive Stacks ❌
Create responsive stacks with AI Academy 1U by adjusting direction, gap, and alignment for different breakpoints.
🔒
16. Responsive Typography ❌
Build responsive typography with AI Academy 1U by adjusting headings and body text for readability across devices.
🔒
17. Responsive Images and Media ❌
Create responsive images and media with AI Academy 1U by controlling aspect ratio, fill behavior, cropping, and adaptive presentation.
🔒
18. Build a Fully Responsive Landing Page ❌
Build a fully responsive landing page with AI Academy 1U that works effectively across desktop, tablet, and mobile screens.
▶
19. Understand Framer Components ❌
Understand Framer components with AI Academy 1U as reusable building blocks that support consistency across a website.
🔒
20. Create Your First Component ❌
Create your first component with AI Academy 1U by converting repeated interface elements into reusable website building blocks.
🔒
21. Create Component Variants ❌
Create component variants with AI Academy 1U for button states, card variations, and other reusable interface patterns.
🔒
22. Use Component Properties ❌
Use component properties with AI Academy 1U to change content and visual settings while preserving the integrity of reusable components.
🔒
23. Build Reusable Navigation Systems ❌
Build reusable navigation systems with AI Academy 1U by creating navbars, menus, and mobile navigation patterns.
🔒
24. Build a Professional Design System ❌
Build a professional design system with AI Academy 1U by organizing typography, colors, spacing, components, variants, and page structures into a reusable framework.
▶
25. What Are Framer Agents? ❌
Understand Framer Agents with AI Academy 1U and learn how an AI agent differs from a traditional template generator.
▶
26. Start Your First Agent Task ❌
Start your first Framer Agent task with AI Academy 1U by asking the agent to create or modify a specific part of a website.
🔒
27. Generate a Page with an Agent ❌
Generate a page with a Framer Agent using AI Academy 1U by guiding structure, sections, copy, and visual direction through prompts.
🔒
28. Edit Existing Pages with AI ❌
Edit existing Framer pages with AI Academy 1U by changing content, hierarchy, or visual direction without rebuilding the entire site.
🔒
29. Generate and Refine Website Copy ❌
Generate and refine website copy with AI Academy 1U by creating headlines, subheadings, calls to action, and supporting content.
🔒
30. Build an Agent-Assisted Website Workflow ❌
Build an agent-assisted website workflow with AI Academy 1U by combining prompting, generation, human review, refinement, responsive design, and publishing.
▶
31. Write Effective Website Prompts ❌
Write effective website prompts with AI Academy 1U by clearly defining the business, audience, objectives, pages, and visual direction.
🔒
32. Structure a Professional Framer Prompt ❌
Structure a professional Framer prompt with AI Academy 1U using context, goals, audience, sections, style, calls to action, and constraints.
🔒
33. Prompt for Individual Sections ❌
Prompt individual website sections with AI Academy 1U, including heroes, pricing areas, testimonials, FAQs, and calls to action.
🔒
34. Prompt for Existing Design Changes ❌
Prompt for existing design changes with AI Academy 1U by targeting the exact area that needs modification instead of regenerating the entire page.
🔒
35. Prompt for Brand Consistency ❌
Prompt for brand consistency with AI Academy 1U by including typography, color, tone, and design-language requirements in AI instructions.
🔒
36. Build a Professional Prompt Library ❌
Build a professional Framer prompt library with AI Academy 1U by standardizing reusable prompts for design, copy, CMS, and optimization workflows.
▶
37. Understand Code Components ❌
Understand Framer Code Components with AI Academy 1U and learn when visual tools are sufficient and when custom code is appropriate.
🔒
38. Generate a Component with AI ❌
Generate a custom component with AI Academy 1U by describing desired interactions and allowing the agent to create the implementation.
🔒
39. Use Framer Workshop ❌
Use Framer Workshop with AI Academy 1U to create custom components through an AI-assisted conversational workflow.
🔒
40. Build Interactive Calculators ❌
Build interactive calculators with AI Academy 1U by connecting user input, calculations, and dynamic results.
🔒
41. Build Advanced Forms and Quizzes ❌
Build advanced forms and quizzes with AI Academy 1U using conditional steps, interactive states, and structured user input.
🔒
42. Build a Reusable Custom Component ❌
Build a reusable custom component with AI Academy 1U by combining prompts, generated logic, visual controls, testing, and reuse.
▶
43. What Is Framer CMS? ❌
Understand Framer CMS with AI Academy 1U and learn the difference between static pages and dynamic structured content.
▶
44. Create Your First Collection ❌
Create your first CMS collection with AI Academy 1U by defining fields, adding items, and connecting records to dynamic pages.
🔒
45. Design CMS Fields ❌
Design CMS fields with AI Academy 1U for text, images, rich content, and other structured data.
🔒
46. Build Dynamic CMS Pages ❌
Build dynamic CMS pages with AI Academy 1U by creating reusable templates that display multiple content items through one layout.
🔒
47. Filter and Organize CMS Content ❌
Filter and organize CMS content with AI Academy 1U by displaying records according to categories, criteria, and website requirements.
🔒
48. Build a Blog with Framer CMS ❌
Build a complete blog with AI Academy 1U by connecting collections, article templates, listing pages, and navigation.
▶
49. Manage CMS with Framer Agents ❌
Manage CMS content with Framer Agents using AI Academy 1U by creating and updating structured records through AI assistance.
🔒
50. Generate CMS Content with AI ❌
Generate CMS content with AI Academy 1U by creating structured records that follow an established content schema.
🔒
51. Bulk Update CMS Items ❌
Bulk update CMS items with AI Academy 1U by changing names, categories, or content across multiple records efficiently.
🔒
52. Build CMS Collections with AI ❌
Build CMS collections with AI Academy 1U by defining fields, items, and page structures through an AI-assisted workflow.
🔒
53. Maintain CMS Consistency ❌
Maintain CMS consistency with AI Academy 1U by standardizing formatting, naming, taxonomy, and content structure.
🔒
54. Build an AI-Managed Content Website ❌
Build an AI-managed content website with AI Academy 1U by combining agents, CMS records, dynamic pages, review, and publishing.
▶
55. Understand Framer Localization ❌
Understand Framer Localization with AI Academy 1U by learning how locales, languages, and regional variants are managed.
▶
56. Add a New Locale ❌
Add a new locale with AI Academy 1U by configuring language and regional settings for a multilingual website.
🔒
57. Translate Content with AI ❌
Translate website content with AI Academy 1U by using AI to convert page and CMS content into additional languages.
🔒
58. Localize CMS Content ❌
Localize CMS content with AI Academy 1U by managing structured content separately for different languages and regions.
🔒
59. Localize Page Paths ❌
Localize page paths with AI Academy 1U to create language-specific URLs that improve visitor experience and support SEO.
🔒
60. Build a Multilingual Website ❌
Build a complete multilingual website with AI Academy 1U by combining locales, AI translation, navigation, CMS, SEO, and publishing.
▶
61. What Are Framer External Agents? ❌
Understand Framer External Agents with AI Academy 1U and learn how outside AI tools can connect directly to Framer projects.
🔒
62. Connect Claude Code to Framer ❌
Connect Claude Code to Framer with AI Academy 1U by configuring access and authorization for AI-assisted project changes.
🔒
63. Connect Codex in ChatGPT ❌
Connect Codex in ChatGPT to Framer with AI Academy 1U so AI coding workflows can interact directly with Framer projects.
🔒
64. Connect Cursor or Other Agents ❌
Connect Cursor or other AI agents to Framer with AI Academy 1U by configuring an external coding-agent workflow.
🔒
65. Manage CMS with External Agents ❌
Manage Framer CMS with external agents using AI Academy 1U by reading, creating, updating, and deleting structured content.
🔒
66. Build a Professional External Agent Workflow ❌
Build a professional external-agent workflow with AI Academy 1U by combining agents, branches, changes, review, merge, and publishing.
▶
67. Understand Framer Branches ❌
Understand Framer branches with AI Academy 1U by learning the difference between the main production branch and isolated working branches.
🔒
68. Create and Work on a Branch ❌
Create and work on a branch with AI Academy 1U so website changes can be developed safely without affecting production.
🔒
69. Work with AI Auto-Branching ❌
Work with AI auto-branching using AI Academy 1U so agents can make changes safely in isolated branches.
🔒
70. Review Changes Before Merge ❌
Review changes before merging with AI Academy 1U by checking design, CMS data, and website content before integration.
🔒
71. Use Staging URLs ❌
Use staging URLs with AI Academy 1U so clients and teams can perform quality assurance before a website goes live.
🔒
72. Build a Professional Team Workflow ❌
Build a professional team workflow with AI Academy 1U by connecting briefs, branches, agents or designers, reviews, staging, merging, and publishing.
▶
73. Build Your First Framer Form ❌
Build your first Framer form with AI Academy 1U for contact, inquiry, and lead-generation use cases.
🔒
74. Add Advanced Form Fields ❌
Add advanced form fields with AI Academy 1U, including checkboxes, radio buttons, selects, and structured input controls.
🔒
75. Build Multi-Purpose Lead Forms ❌
Build multi-purpose lead forms with AI Academy 1U for inquiries, bookings, signups, and customer requests.
🔒
76. Configure Spam Protection ❌
Configure spam protection with AI Academy 1U by applying basic and advanced safeguards to Framer forms.
🔒
77. Track Marketing Attribution ❌
Track marketing attribution with AI Academy 1U by capturing UTM parameters, Google Ads identifiers, and hidden form fields.
🔒
78. Build a Conversion-Ready Form Workflow ❌
Build a conversion-ready form workflow with AI Academy 1U by connecting landing pages, forms, attribution tracking, confirmation states, and analytics.
▶
79. Understand Framer Analytics ❌
Understand Framer Analytics with AI Academy 1U by learning how to evaluate traffic, visitors, and page behavior.
🔒
80. Analyze Top Pages ❌
Analyze top-performing pages with AI Academy 1U to identify content and experiences that attract and engage users.
🔒
81. Track Links and Forms ❌
Track links and forms with AI Academy 1U to measure clicks, submissions, and other valuable user actions.
🔒
82. Create Funnels ❌
Create conversion funnels with AI Academy 1U to understand how visitors move through important website steps.
🔒
83. Run an A/B Test ❌
Run an A/B test with AI Academy 1U by testing headlines, calls to action, or page variants against measurable outcomes.
🔒
84. Use AI to Analyze Website Performance ❌
Use AI to analyze website performance with AI Academy 1U by connecting traffic data, drop-off points, hypotheses, optimization ideas, and testing.
▶
85. Understand SEO in Framer ❌
Understand SEO in Framer with AI Academy 1U by learning about search intent, page structure, indexability, and discoverability.
🔒
86. Configure Page Titles and Descriptions ❌
Configure page titles and descriptions with AI Academy 1U by creating optimized metadata for individual website pages.
🔒
87. Optimize CMS Pages for SEO ❌
Optimize CMS pages for SEO with AI Academy 1U by using dynamic metadata and structured content effectively.
🔒
88. Configure Indexing and Redirects ❌
Configure indexing and redirects with AI Academy 1U to manage changing URLs and search-engine visibility safely.
🔒
89. Understand Canonical and International SEO ❌
Understand canonical and international SEO with AI Academy 1U by working with canonical URLs, localized paths, and hreflang concepts.
🔒
90. Build a Complete SEO/AEO Workflow ❌
Build a complete SEO and AEO workflow with AI Academy 1U by connecting keywords, content, structure, metadata, CMS, localization, and publishing.
▶
91. Understand Framer Developer Tools ❌
Understand Framer developer tools with AI Academy 1U by comparing Code Components, Overrides, Plugins, Fetch, and Server API capabilities.
🔒
92. Add Custom Code ❌
Add custom code with AI Academy 1U by integrating scripts, CSS, and third-party tools into Framer websites.
🔒
93. Build a React Code Component ❌
Build a React Code Component with AI Academy 1U by creating custom functionality while exposing useful visual controls.
🔒
94. Use Code Overrides ❌
Use Code Overrides with AI Academy 1U to modify layer and component behavior through code.
🔒
95. Connect APIs with Fetch ❌
Connect external APIs with AI Academy 1U by using Fetch to bring external data into Framer experiences.
🔒
96. Build a Professional Hybrid No-Code + Code Site ❌
Build a professional hybrid no-code and code site with AI Academy 1U by combining visual design, components, APIs, custom code, and publishing.
▶
97. Understand Framer Plugins ❌
Understand Framer plugins with AI Academy 1U and learn how plugins can interact with the Editor and CMS.
🔒
98. Use Marketplace Plugins ❌
Use Marketplace plugins with AI Academy 1U by selecting and integrating extensions that fit specific website requirements.
🔒
99. Understand the Framer Server API ❌
Understand the Framer Server API with AI Academy 1U and learn how Framer can connect with external products and automation systems.
🔒
100. Automate CMS Operations ❌
Automate CMS operations with AI Academy 1U by creating, updating, and synchronizing structured content programmatically.
🔒
101. Automate Publishing Workflows ❌
Automate publishing workflows with AI Academy 1U by connecting business processes with Framer publishing operations.
🔒
102. Build an Automated Framer Workflow ❌
Build an automated Framer workflow with AI Academy 1U by connecting external systems, APIs or agents, CMS operations, review, and publishing.
▶
103. Understand Framer Hosting ❌
Understand Framer Hosting with AI Academy 1U and learn how Framer manages infrastructure for published websites.
▶
104. Publish Your First Website ❌
Publish your first website with AI Academy 1U by moving a Framer project to a live Framer-hosted URL.
🔒
105. Connect a Custom Domain ❌
Connect a custom domain with AI Academy 1U by configuring domain settings and DNS for a professional website address.
🔒
106. Test with Staging Before Production ❌
Test with staging before production using AI Academy 1U so live website behavior can be reviewed without affecting the public site.
🔒
107. Use Version History and Rollback ❌
Use version history and rollback with AI Academy 1U to restore a safe website state when production changes cause problems.
🔒
108. Build a Production Launch Checklist ❌
Build a production launch checklist with AI Academy 1U covering responsive design, content, forms, SEO, analytics, domains, staging, and publishing.
▶
109. Project: AI Landing Page ❌
Build an AI-powered landing page with AI Academy 1U by combining a business brief, Framer Agent, design, copy, responsive layout, forms, and publishing.
🔒
110. Project: Professional Portfolio ❌
Build a professional portfolio with AI Academy 1U by combining reusable components, project showcases, animations, responsive design, and SEO.
🔒
111. Project: Business Website ❌
Build a business website with AI Academy 1U by connecting pages, a design system, forms, CMS, analytics, and a custom domain.
🔒
112. Project: CMS Blog and Content Hub ❌
Build a CMS blog and content hub with AI Academy 1U by combining collections, dynamic pages, categories, SEO, and AI content management.
🔒
113. Project: Multilingual Company Website ❌
Build a multilingual company website with AI Academy 1U by combining localization, AI translation, localized URLs, SEO, and publishing.
🔒
114. Project: Conversion Landing Page with A/B Testing ❌
Build a conversion-focused landing page with AI Academy 1U by connecting traffic, forms, funnels, variants, A/B testing, and analytics.
▶
115. Plan a Complete Professional Website ❌
Plan a complete professional website with AI Academy 1U by defining the business, audience, sitemap, CMS requirements, conversion goals, and technical needs.
🔒
116. Build the Design System and Responsive Pages ❌
Build the design system and responsive pages with AI Academy 1U by combining typography, components, sections, and desktop, tablet, and mobile layouts.
🔒
117. Build with Framer Agents and External Agents ❌
Build with Framer Agents and external agents using AI Academy 1U by combining internal AI, Codex, Claude, Cursor, branches, and review workflows.
🔒
118. Build CMS, Localization and Conversion Systems ❌
Build CMS, localization, and conversion systems with AI Academy 1U by connecting structured content, AI management, locales, forms, funnels, and analytics.
🔒
119. Optimize SEO, Performance and Production ❌
Optimize SEO, performance, and production with AI Academy 1U by refining metadata, redirects, quality assurance, staging, and custom-domain deployment.
🔒
120. Complete Project: Idea to Production with Framer AI ❌
Build a complete Framer AI production project with AI Academy 1U by taking a professional website from business brief and AI prompting through responsive design, CMS, agents, analytics, SEO, code, domains, and final publishing.
ChatGPT is an AI assistant for writing, learning, research, problem solving, and creative tasks. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARYCanva is a design platform for creating graphics, presentations, videos, and social media content. Learn practical design skills with AI Academy and explore creative workflows in our AI Library.
EXPLORE AI LIBRARYCapCut is a video editing platform for creating and enhancing videos with AI-powered tools, effects, captions, and templates. Learn practical skills with AI Academy and explore workflows in our AI Library.
EXPLORE AI LIBRARYGoogle Gemini is Google’s assistant for research, writing, reasoning, images, and productivity. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARYLearn Google Veo with AI Academy 1U and create cinematic AI videos from text and images using powerful video generation, camera controls, visual storytelling, and creative production techniques.
EXPLORE AI LIBRARYElevenLabs AI is a voice platform for text to speech, narration, and voice creation. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARYClaude AI is an assistant for writing, document analysis, reasoning, and coding. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARYVideoGen AI empowers creators to produce engaging videos faster with AI-powered tools. Learn practical workflows, creative techniques, and production strategies with AI Academy 1U to create professional video content efficiently.
EXPLORE AI LIBRARYHeyGen AI is an avatar video platform for presentations, narration, and multilingual communication. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARYMicrosoft Copilot is Microsoft’s assistant for productivity, writing, research, and workplace tasks. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARY