Module 1: From Prompter to Producer
Organise, create, and research smarter with the core Claude tools.
Understand how Claude works and how it compares to other AI tools. Connect Claude to Google Drive, Jira, GitHub, and more with Connectors. Build interactive deliverables with Artifacts. Install Skills to give Claude specialist knowledge and create real Office files. Organise everything in a Claude Project.
Learning Objectives - Explain what Claude is, who built it, and how it differs from ChatGPT and Gemini
- Connect Claude to external tools and data sources using Connectors
- Create documents, spreadsheets, interactive web pages, and diagrams using Artifacts
- Install Claude Skills to give Claude specialist knowledge for specific tasks and produce real Office files
- Set up and organise Claude Projects with custom instructions and reference files
What You'll Learn - What Is Claude and Why It Matters
- Connectors - Link Claude to Your Tools and Data
- Artifacts - Your Interactive Workspace
- Claude Skills - Specialist Knowledge on Demand
- Your First Project - From Blank to Brilliant
What Is Claude and Why It Matters
Let us get to know what Claude actually
is - where it came from, how it works, and why it differs from other AI tools you may have tried.
The company behind Claude. Claude is built by
Anthropic, founded in 2021 by Dario and Daniela Amodei. Anthropic is a Public Benefit Corporation - legally required to balance profit with a social mission. Claude is trained using
Constitutional AI: instead of relying only on human moderators, it is trained against written principles and learns to critique its own responses. The result is an AI that is more cautious, honest, and less likely to fabricate answers.
Three models, one rule of thumb. Claude is a
family of three models named after literary forms:
Haiku,
Sonnet, and
Opus. The bigger the form, the more powerful the model.
The Three Claude Models - from fastest (Haiku) to most capable (Opus)
Haiku is for quick, repetitive tasks.
Sonnet balances speed and capability for everyday work.
Opus is the flagship for complex research and analysis. Switch between them with one click on claude.ai.
More than a chatbot. Claude is an ecosystem.
Claude.ai is the web and mobile chat (free tier available, Pro USD 20/month).
Projects organise conversations with documents.
Artifacts are interactive outputs in a separate panel. Beyond those,
Claude Design creates prototypes,
Claude Code writes software,
Cowork manages desktop files,
Claude for Microsoft 365 integrates with Office, and
Claude in Chrome brings AI into your browser.
How Claude differs from ChatGPT and Gemini. Constitutional AI means Claude is more likely to say "I am not sure" than fabricate an answer - benchmarks consistently rank it among the lowest-hallucination AI models. Claude processes up to 200,000 tokens (roughly 500 pages) per conversation, with up to 1 million tokens available on all paid plans since March 2026. On consumer plans, conversations may be used to improve future models unless you opt out in Privacy Settings; commercial plans (Team, Enterprise, API) never train on your data. One limitation: Claude does not generate photographs, but Claude Design creates interactive HTML prototypes.
Watch video: What Is Claude and Why It Matters
Key Insight: Claude is built by Anthropic using Constitutional AI - a safety-first training approach. Three models (Haiku, Sonnet, Opus) cover speed to deep reasoning. An ecosystem of products goes well beyond chat: Projects, Artifacts, Design, Code, Cowork, Microsoft 365, and Chrome.
Real-World Example: A legal consultant uploads a 120-page contract to Claude and asks for a summary of all liability clauses. Claude processes the entire document in one conversation thanks to its 200,000-token context window. With ChatGPT, she would need to split the document into smaller chunks and lose context between conversations.
Q: What is Constitutional AI, the training method used to build Claude?
Constitutional AI trains Claude against a written set of principles (a constitution). During training, Claude learns to critique and revise its own responses based on these principles. This builds safety and honesty into the model itself, rather than relying only on external filters.
Think about the AI tools you have used before. Have you ever received a confident-sounding answer that turned out to be wrong? How would a more cautious AI that admits uncertainty change the way you work?
Connectors - Link Claude to Your Tools and Data
Until now, you have been giving Claude information by uploading files or typing it directly.
Connectors change this entirely. Instead of bringing data
to Claude, Connectors let Claude reach out and read from the tools and services where your work already lives.
What Connectors are. A Connector is an authorised link between Claude and an external service. Once set up, Claude can search, read, and reference that service in any conversation - no copying and pasting, no manual file uploads. You ask a question; Claude checks your connected tools and answers using live data.
Six Claude Connectors for daily professional work - communication, files and content, design and automation
The six Connectors. Claude offers over 200 Connectors across many categories. Here are six of the most useful ones in three categories.
Communication: Gmail lets Claude read email threads and draft replies; Google Calendar lets Claude check your schedule and find free slots.
Files and content: Google Drive lets Claude search and read documents, spreadsheets, and presentations; Gamma lets Claude access your presentation library.
Design and automation: Canva lets Claude reference your designs and brand assets; Make.com connects Claude to over 3,000 apps so a single message can trigger multi-step workflows.
Make.com deserves special attention. While the other five Connectors let Claude
read from a service, Make.com lets Claude
act. One message can kick off an automation that sends an email, updates a spreadsheet, and posts a notification. This is how Claude moves from an AI you chat with to one that acts on your behalf.
How to set up a Connector. Go to your Claude account settings and open the Integrations section. Select the service, follow the authentication flow, and the Connector is available in any conversation.
How Connectors differ from uploaded files. Uploaded files are static snapshots from upload time. Connectors give Claude access to live data: the email as it exists now, the calendar as it is today, the document as it was last edited.
Key Insight: Connectors give Claude live access to Gmail, Google Calendar, Google Drive, Gamma, Canva, and Make.com - no file uploads needed. Ask Claude to read your emails, check your schedule, or find a document in Drive. Connect Make.com and Claude can trigger automations across 3,000+ apps on your behalf.
Real-World Example: A training consultant starts her Monday by asking Claude: "Check my Gmail for any messages from clients this week, look at my Calendar to see what calls I have, and find the project brief in my Drive for the workshop I'm delivering Friday." Claude reads across all three connected services and returns a focused briefing - without her opening a single app.
Q: Why is Make.com described as unlocking "even more automation scenarios" as a Claude Connector?
Make.com connects to over 3,000 apps. When Claude can trigger Make.com scenarios, a single message can kick off a multi-step workflow - sending emails, updating spreadsheets, creating tasks, posting notifications - across virtually any tool in your business. This goes far beyond reading data from a single app.
Think about the tools you check first thing each morning - email, calendar, project files. Which combination of Connectors would save you the most time if Claude could read across all of them at once? What would a perfect morning briefing look like if Claude assembled it for you automatically?
Artifacts - Your Interactive Workspace
When you ask Claude to write a long email or explain a concept, the response appears in the chat as regular text. But when you ask Claude to create something substantial - a document, a chart, a working web page, or a piece of code - it appears in a separate panel called an Artifact. This is one of Claude's most distinctive features: instead of just giving you text answers, Claude builds actual deliverables you can preview, edit, and share.
Artifacts are triggered automatically when your request produces substantial, self-contained output - typically more than about 15 lines of content. You can also ask for one explicitly: "Create a one-page summary as an artifact," "Build me an interactive quiz," or "Make a flowchart showing our approval process."
What Claude can build as Artifacts:
Documents - Reports, proposals, study guides, lesson plans, and any structured text. These appear as formatted markdown that you can edit directly in the panel.
Spreadsheets - Data tables, comparison matrices, and simple calculators. Claude generates these as structured data you can copy into Excel or Google Sheets.
Interactive web pages - This is where Artifacts really shine. Claude can build working HTML pages with styling and interactivity - quizzes, dashboards, landing page mockups, pricing calculators, and more. These render as live, clickable pages right inside the Artifact panel.
Diagrams - Flowcharts, mind maps, org charts, and process diagrams using SVG graphics or Mermaid diagram syntax. Perfect for explaining workflows or structures visually.
Code - Python scripts, JavaScript functions, SQL queries, and code in any programming language. Useful even for non-developers - you can ask Claude to write a script that processes a CSV file, and copy the result into a tool that runs it.
Once an Artifact is created, you can edit it by clicking into the panel and making changes directly, or by telling Claude what to adjust: "Make the title bigger," "Add a column for deadlines," or "Change the colour to blue." Claude updates the Artifact in place.
You can also publish an Artifact to generate a shareable link. Anyone with the link can view and interact with your creation - useful for sharing an interactive quiz with learners, sending a dashboard to a client, or distributing a one-pager to your team. You can unpublish at any time to revoke access.
Watch video: Artifacts - Your Interactive Workspace
Key Insight: Artifacts are interactive outputs - documents, web pages, diagrams, and code - that Claude builds in a separate panel. You can edit them directly, ask Claude to refine them, and publish them as shareable links.
Real-World Example: A coach asks Claude: "Create an interactive self-assessment quiz with 10 questions about communication styles. Show the result as a summary with personalised tips." Claude builds a working HTML quiz as an Artifact. The coach publishes it and shares the link with workshop participants - they can take the quiz on any device without installing anything.
Q: When does Claude create an Artifact instead of a regular text response?
Artifacts are triggered automatically when your request produces substantial, self-contained output (typically more than about 15 lines). You can also ask for one explicitly. Artifacts work on all plans, both inside and outside Projects.
Think about the last time you needed to create a document, quiz, or visual for your work. How long did it take? What would change if you could describe what you wanted and get a working first draft in seconds?
Claude Skills - Specialist Knowledge on Demand
Claude is already a capable generalist.
Skills give it specialist knowledge for specific tasks - without you having to explain the same process over and over. Think of a Skill like sending Claude through a focused training programme. Before the Skill, Claude gives you a general answer. After the Skill, it follows a specific process, uses the right structure, and produces exactly the kind of output you need.
How Skills work. Skills are instruction packages stored in your Claude account. When you send a message, Claude scans your installed Skills and loads the right one automatically when it matches your task. You can also trigger a Skill directly by typing a slash command - for example
/pdf to produce a formatted PDF, or
/simplify to tighten a long prompt.
Where to find and install Skills. Go to
Customize menu > Skills in your Claude account. Browse the Skills library - which includes official Anthropic Skills and community-built Skills - and install any Skill with one click. Skills are available on all plans, including the free tier (code execution must be enabled in Settings > Capabilities).
What Skills are available. Anthropic provides four main categories:
The four categories of Claude Skills - from official Anthropic pre-built Skills to your own custom ones
Document Skills in practice. Without Document Skills, asking Claude to "build me a PowerPoint" produces a text description. With Document Skills installed, Claude creates an actual .pptx file you can download and open. The same applies to Excel spreadsheets, Word documents, and PDF reports.
Building your own Skill. Custom Skills let you write instructions once and have Claude follow them automatically. A training coordinator could create a Skill that enforces specific headings, tone, and structure for all training reports. The official
Skill Creator - available under Customize menu > Skills - guides you through building a custom Skill step by step using a simple Q&A. No technical knowledge required.
Watch video: Claude Skills - Specialist Knowledge on Demand
Key Insight: Skills give Claude specialist knowledge across four categories: Document Skills (real Office files), Creative & Design, Enterprise workflows, and your own Custom Skills. Install them once from Customize menu > Skills. Claude loads the right Skill automatically, or you can trigger any Skill directly with a slash command like <code>/pdf</code> or <code>/simplify</code>.
Real-World Example: A marketing manager types <code>/pdf</code> followed by a report draft. Claude applies the PDF Skill and delivers a formatted, downloadable PDF file - not a plain text version. Later, she builds a Custom Skill with her company's report format. From then on, every report Claude writes follows her exact headings, tone, and structure - without her having to repeat the instructions each time.
Q: How do you install a Claude Skill?
Skills are installed via Customize menu > Skills on claude.ai. Browse the library of official Anthropic Skills and community-built Skills, and install any Skill with one click. No technical knowledge needed. Skills are available on all plans, including the free tier.
Think about a task you do regularly at work that always follows the same pattern - writing status updates, structuring meeting notes, or formatting a specific type of report. If you could create a Custom Skill that tells Claude how to handle it, what would you write in the instructions?
Your First Project - From Blank to Brilliant
A
Project is the workspace that brings everything together - a dedicated area on claude.ai where you upload documents, write custom instructions, and keep everything organised around a single topic. Claude remembers your context across conversations, so you never re-explain who you are or re-attach your files.
Creating a Project takes about five minutes. Go to
claude.ai/projects and click "Create Project." Give it a descriptive name like "Client Proposals" or "Course Content."
Custom instructions are the secret weapon. Every Project has an instructions field where you tell Claude how to behave. Write 200 to 500 words covering tone, format, audience, and rules. For example: "You are a learning design advisor. Structure responses with: Objective, Key Points, Practical Exercise. Use plain language. Keep responses under 300 words unless asked for more." These instructions apply to
every conversation within that Project.
Upload your reference files. Upload documents Claude should reference: brand guidelines, SOPs, client briefs, or templates. Claude accepts PDFs, Word documents, spreadsheets, text files, and HTML files up to 30 MB each. On paid plans, Claude automatically searches your uploads and retrieves only the most relevant sections.
Start a conversation. Ask a question and Claude references your documents and follows your instructions automatically. When you return days later, everything persists - instructions, files, and searchable conversation history. Free accounts get up to 5 Projects; Pro (USD 20/month) gets unlimited Projects with sharing.
Artifacts, Skills, and Projects - what is the difference? These three features work together but serve different purposes:
Artifacts, Skills, and Projects - three features that work together in Claude
Watch video: Your First Project - From Blank to Brilliant
Key Insight: A Claude Project is a workspace with custom instructions and uploaded documents that persist across conversations. Write your instructions once, upload your files once, and Claude remembers everything - no re-explaining needed.
Real-World Example: A corporate trainer creates a Project called "Leadership Workshop." She uploads her 40-page facilitator guide, a list of client-specific case studies, and sets the instruction: "You are a co-facilitator for leadership workshops. Respond with practical exercises, debrief questions, and timing suggestions. Keep language conversational." Every time she opens this Project, Claude already knows the material and follows her style.
Q: What is the most important step when setting up a Claude Project?
Custom instructions are the most important step because they determine how Claude behaves in every conversation within that Project. Write 200 to 500 words explaining your preferred tone, format, audience, and rules. Claude follows these instructions consistently without you needing to repeat them.
Think about one area of your work where you repeat the same context or instructions every time you use an AI tool. How would setting up a Project with those instructions pre-loaded change your workflow?
Module 2: Everyday Work, Reimagined
Design prototypes, marketing materials, and Office documents in minutes.
Research and compare across tabs with Claude in Chrome. Work smarter inside Word, Excel, and PowerPoint with Claude for Microsoft 365. Design prototypes, slides, and one-pagers with Claude Design. Create marketing materials like brochures, social media graphics, and pitch decks.
Learning Objectives - Research, summarise, and compare web content across browser tabs using Claude in Chrome
- Integrate Claude into Word, Excel, and PowerPoint with Claude for Microsoft 365
- Create design prototypes, slides, and one-pagers using Claude Design
- Produce marketing materials including brochures, social media graphics, and pitch decks
What You'll Learn - Research with Chrome and Integrated Search
- Claude for Microsoft 365
- Word, Excel, and PowerPoint - The AI Add-Ins
- Designing with Claude - Logos, Slides, and More
- Marketing Materials That Convert
Research with Chrome and Integrated Search
Good research is the foundation of every strong piece of work - whether that is a pitch deck, a report, a training programme, or a client proposal. Claude in Chrome is a browser extension that brings AI directly into your Chrome browser as a side panel, so you can research, summarise, and compare web content without switching windows or copy-pasting a single word.
After installing the extension from the Chrome Web Store and signing in with your Claude account, open the Claude side panel by clicking the Claude icon in your toolbar. Claude can read the content of any web page you are viewing. Ask it to summarise a long article, extract the key points from a research paper, explain a technical concept in simpler terms, or compare what you are reading against a brief you already have. You do not need to copy and paste anything - Claude sees the page directly.
Working across multiple tabs. One of the most powerful features is tab grouping. You can drag multiple tabs into a Claude tab group, and Claude will see the content of all of them at once. This is ideal for research: open five competitor websites, group them, and ask Claude to compare their pricing, features, or messaging. Or open several articles on the same topic and ask for a consolidated summary with the key differences highlighted. For marketing work especially, this saves hours of manual research.
Beyond reading: browser automation. Claude in Chrome can also interact with web pages - clicking buttons, filling forms, and navigating links on your behalf. You can even record a workflow: perform a series of steps manually while Claude watches, then have Claude replay those exact steps automatically. This is useful for repetitive tasks like filling out the same form across multiple client accounts, downloading reports from a dashboard, or extracting data from a series of web pages. You can schedule recorded workflows to run automatically on a recurring basis.
Claude in Chrome is available to paid plan subscribers (Pro, Max, Team, and Enterprise). Pro users access Claude via the Haiku model for speed. Max and Enterprise users can choose more powerful models like Sonnet for tasks that need stronger reasoning.
Watch video: Research with Chrome and Integrated Search
Key Insight: Claude in Chrome reads web pages, summarises content, compares across multiple tabs, and automates repetitive browser tasks - all without leaving your browser. Use it to research markets, audit competitors, and gather source material before creating your visual work.
Real-World Example: A marketing manager needs to create a pitch deck comparing three competing training platforms. She opens each competitor's pricing and features page in separate tabs, groups them in Claude's tab group, and types: "Compare the pricing tiers, key features, and target audiences of these three platforms in a table." Claude reads all three pages and produces a structured comparison in seconds - ready to paste directly into her Claude Design pitch deck.
Q: What makes Claude in Chrome different from using Claude on claude.ai?
The key difference is that Claude in Chrome can see and interact with the web pages you are viewing directly in your browser. You do not need to copy and paste content - Claude reads the page, and can even click buttons, fill forms, and automate repetitive browser workflows.
Think about the research you do before creating marketing materials or presentations. Which competitor websites, industry reports, or data sources do you check regularly? How would tab grouping change your research workflow?
Claude for Microsoft 365
You have seen how Claude in Chrome can research and gather information from across the web. Now it is time to bring that same AI capability inside the tools where most professionals do the bulk of their daily work: Microsoft Word, Excel, and PowerPoint. That is exactly what Claude for Microsoft 365 does - it puts Claude directly inside the Office apps you already use.
Claude for Excel launched in beta in late 2025, followed by Claude for PowerPoint in February 2026, and shared cross-app context arrived on 11 March 2026. Claude for Word joined the suite in April 2026. The add-ins are available to Pro, Max, Team, and Enterprise subscribers (USD 20/month and above, depending on plan). Since 7 January 2026, Anthropic operates as a Microsoft subprocessor, meaning Claude sits inside Microsoft 365's security and compliance framework - the same boundary that protects your other Office data.
How to get started. Open any Office app (Word, Excel, or PowerPoint), go to the Add-ins menu, and search for "Claude." Install the add-in and sign in with your Claude account. Claude appears as a side panel inside the application - you type requests in the panel and Claude works directly with the document you have open.
The big advantage: shared context. Unlike copy-pasting content between Claude.ai and Office, the Claude add-in sees the document you are working on. You can ask it to analyse, edit, summarise, or extend the content without leaving the app. More importantly, the add-ins share conversation context across Word, Excel, and PowerPoint. This means you can analyse data in Excel, tell Claude to turn the key findings into slides in PowerPoint, and then draft a summary memo in Word - all while Claude remembers the full context from each step.
Compared to Microsoft Copilot. Microsoft 365 Copilot costs USD 30 per user per month as a separate add-on (on top of your existing Microsoft 365 subscription). Claude for Microsoft 365 is included in your Claude subscription (starting at USD 20 per month for Pro). Both tools work inside Office apps, but Claude's cross-app memory and Constitutional AI safety make it a strong alternative, especially for teams that already use Claude for other work.
Watch video: Claude for Microsoft 365
Key Insight: Claude for Microsoft 365 adds a Claude side panel to Word, Excel, and PowerPoint. It shares context across all three apps and is included in Pro, Max, Team, and Enterprise subscriptions.
Real-World Example: An HR consultant analyses training survey results in Excel. She asks Claude: "Summarise the top three themes from this feedback data." Then she switches to PowerPoint and says: "Turn those three themes into a presentation slide with bullet points and a chart." Claude remembers the Excel analysis and builds the slide automatically - no copy-pasting needed.
Q: What is the key advantage of Claude for Microsoft 365 over copy-pasting content to claude.ai?
The biggest advantage is shared context. The Claude add-ins across Word, Excel, and PowerPoint share the same conversation, so Claude remembers what you did in Excel when you switch to PowerPoint. No more copy-pasting data between apps.
Think about a workflow where you move data between Word, Excel, and PowerPoint. How much time do you spend copy-pasting and reformatting? How would a shared AI context across all three apps change that?
Word, Excel, and PowerPoint - The AI Add-Ins
Let us get specific about what Claude can do inside each Office application.
Claude in Word. Open a document and use the Claude panel to:
• Draft content - "Write a 500-word introduction for a change management workshop proposal."
• Edit and refine - "Make this section more concise" or "Rewrite this paragraph for a non-technical audience."
• Summarise - "Give me a 3-bullet executive summary of this 20-page report."
• Format - "Add headings, bullet points, and a table of contents to this document."
• Translate - "Translate this client brief into Malay" or "Write a bilingual version."
Claude works with your current document directly. Highlight a paragraph and ask Claude to improve it, or point to a specific section and request changes. The edits appear in the document itself.
Claude in Excel. This is where many professionals see the biggest time savings:
• Analyse data - "What are the top 5 trends in this sales data?" Claude reads your spreadsheet and provides insights.
• Write formulas - "Create a VLOOKUP formula that matches employee IDs to their department names." Claude writes the formula and explains how it works.
• Clean data - "Standardise the date formats in column B" or "Remove duplicate rows based on email addresses."
• Create charts - "Build a bar chart comparing Q1 and Q2 revenue by region."
• Explain existing formulas - Select a complex formula and ask "What does this formula do?" Claude breaks it down step by step.
Claude in PowerPoint. Whether you are building from scratch or improving existing slides:
• Generate decks - "Create a 10-slide presentation about digital transformation for SMEs." Claude builds the structure, writes the content, and applies a clean layout.
• Improve existing slides - "Make this slide more visual" or "Add speaker notes to all slides."
• Restructure - "This deck is 30 slides. Condense it to 12 while keeping the key messages."
• Add data - Claude can pull data from a connected Excel file and insert charts directly into slides.
Claude's context carries across all three apps. A typical workflow: analyse survey data in Excel → generate a findings presentation in PowerPoint → draft a recommendation memo in Word. Claude remembers every step.
Watch video: Word, Excel, and PowerPoint - The AI Add-Ins
Key Insight: Claude in Word drafts, edits, and formats documents. Claude in Excel analyses data, writes formulas, and creates charts. Claude in PowerPoint generates and restructures presentations. Context carries across all three apps.
Real-World Example: A training manager opens her Excel spreadsheet of 500 workshop evaluation scores. She asks Claude: "Calculate the average satisfaction score by department and highlight any department below 3.5 out of 5." Claude writes the formulas, creates a summary table, and flags two underperforming departments. She then says: "Create a PowerPoint slide showing these results as a bar chart with the flagged departments in red." Claude builds the slide using the Excel data - all without leaving Office.
Q: Which task is Claude in Excel best suited for?
Claude in Excel is best for data work: writing formulas (like VLOOKUP), analysing trends in your data, cleaning and formatting spreadsheets, creating charts, and explaining complex existing formulas step by step.
Think about a spreadsheet task you struggle with regularly - a complex formula, a data cleaning job, or a chart you can never get right. Write down the exact request you would give Claude in Excel to solve it.
Designing with Claude - Logos, Slides, and More
In Module 1 you learned how Artifacts let Claude build documents and interactive pages. Claude Design takes this much further - it is a dedicated visual design tool that turns plain-language descriptions into polished, clickable prototypes, slide decks, and one-pagers.
Claude Design launched on 17 April 2026 as a research preview from Anthropic Labs, powered by Claude Opus 4.7 (the most capable model). It is available to Pro, Max, Team, and Enterprise subscribers - there is no free tier for Design.
How it works. You open Claude Design from the sidebar on claude.ai and describe what you want: "Create a 5-slide pitch deck for a corporate training consultancy" or "Design a mobile app onboarding flow with three screens." Claude generates the design on a visual canvas. From there, you refine it through four methods:
1. Chat - type instructions like "Make the headline bigger" or "Change the colour scheme to dark blue."
2. Inline comments - click on any element in the design and leave a note for Claude to address.
3. Direct editing - click into text, drag elements, and adjust spacing yourself.
4. Custom sliders - use adjustable controls for things like colour intensity, font size, or layout density.
Design system integration. During onboarding, Claude can read your team's codebase and design files to build a design system - colours, typography, and component styles - that it applies automatically to every project. This means your prototypes match your company's branding from the start, without you pasting hex codes into every prompt.
What you can create:
• Interactive prototypes - clickable mockups of apps, dashboards, and workflows that you can test and share with stakeholders before writing any code.
• Slide decks - presentation decks with consistent layouts, charts, and transitions.
• One-pagers - product briefs, executive summaries, and fact sheets.
• Landing pages - web page designs with hero sections, call-to-action buttons, and responsive layouts.
• Mobile app screens - onboarding flows, settings pages, and feature screens.
Claude Design is different from Canva or Figma in one key way: you describe what you want in natural language and Claude does the heavy lifting. Designers use it to rapidly explore directions. Non-designers use it to produce professional-looking work without learning design tools.
Watch video: Designing with Claude - Logos, Slides, and More
Key Insight: Claude Design (April 2026) turns natural-language descriptions into interactive prototypes, slide decks, one-pagers, and app mockups. Available for Pro, Max, Team, and Enterprise plans. Powered by Claude Opus 4.7.
Real-World Example: A consultant types: "Create a 5-slide pitch deck for a leadership training program. Use navy blue and white. Include a title slide, problem slide, solution slide, pricing slide, and contact slide." Claude generates a polished deck in under a minute. She clicks the pricing slide and leaves an inline comment: "Add a three-tier pricing table." Claude updates the design instantly.
Q: What makes Claude Design different from traditional design tools like Canva or Figma?
Claude Design lets you describe your design in plain language. Claude handles the layout, styling, and interactivity. This is fundamentally different from tools like Canva and Figma where you manually place and arrange elements yourself.
Think about the last time you needed a visual - a slide deck, a mockup, a one-pager. How long did it take to create? What would you build first if you could just describe what you wanted?
Marketing Materials That Convert
Now that you know how Claude Design works, let us focus on a practical use case: creating
marketing materials. Whether you are a trainer promoting a workshop, a consultant pitching to new clients, or a coach building your brand - you need visual content. Claude Design makes it fast.
Pitch decks. Start by telling Claude what your presentation is about and who the audience is. Claude generates a complete deck with logical flow: title slide, problem statement, your solution, key benefits, social proof, pricing, and a call to action. You can ask for specific slide types: "Add a comparison slide showing our service versus hiring an agency" or "Include a testimonial slide with space for three client quotes." Export the finished deck as
PPTX (for PowerPoint),
PDF, or send it directly to
Canva for further editing.
Social media graphics. Tell Claude the platform (Instagram, LinkedIn, Facebook) and it will create graphics sized correctly for that platform. Ask for a series: "Create 5 LinkedIn carousel slides about the top reasons trainers need a website." Claude keeps the visual style consistent across all slides. You can specify your brand colours, include your logo, and request specific layouts.
Brochures and flyers. Describe your event or service: "Create a two-fold brochure for a corporate wellness retreat. Include sections for the schedule, facilitator bio, and registration info." Claude generates a print-ready layout.
Business cards. Simply describe the details and style: "Design a business card for a training consultant. Name, title, email, phone, website, LinkedIn. Clean, corporate style." Claude produces front and back designs.
Five Ways to Export from Claude Design
The export workflow. Once your design is ready, you have five export options:
PPTX for editable slide decks,
PDF for print-ready output,
Canva for collaborative editing with your team,
HTML for standalone web files, and a
shareable URL for quick stakeholder review. The Canva integration is particularly useful - your Claude Design output becomes a fully editable Canva project, so team members who prefer Canva's interface can refine the work further.
Watch video: Marketing Materials That Convert
Key Insight: Claude Design creates pitch decks, social media graphics, brochures, flyers, and business cards from natural-language descriptions. Export as PPTX, PDF, HTML, shareable URL, or send directly to Canva for team editing.
Real-World Example: A training company needs to promote a new workshop. The marketing manager tells Claude: "Create an Instagram carousel with 5 slides about why trainers need professional websites. Use our brand colours #1a2b4a and #FF6B35. Each slide should have one key point with a supporting statistic." In two minutes, she has 5 on-brand slides ready to post.
Q: What export options does Claude Design offer for finished designs?
Claude Design offers five export options: PPTX (for PowerPoint/Google Slides), PDF (for printing), HTML (for web), a shareable URL (for review), and direct export to Canva (for collaborative editing). This flexibility lets you use the output in whatever workflow your team prefers.
Think about a marketing asset you need regularly - a social media post, a flyer, a pitch deck. What instructions would you give Claude to produce it? Try writing those instructions as if you were briefing a designer.
Module 3: AI Coworker Arrives
Delegate tasks, automate your desktop, and build live dashboards.
Delegate multi-step tasks to Claude instead of doing them yourself. Let Cowork organise files and synthesise documents on your computer. Build interactive dashboards and mini-apps with Live Artifacts.
Learning Objectives - Delegate multi-step tasks to Claude Desktop
- Use Claude Cowork to organise files and synthesise documents on your computer
- Build interactive dashboards and mini-apps with Live Artifacts
What You'll Learn - Claude Desktop - Your Local AI Assistant
- Dispatch and Delegation - Phone to Desktop
- Cowork - Your Autonomous AI Agent
- Live Artifacts - Dashboards That Update Themselves
Claude Desktop - Your Local AI Assistant
So far, everything we have covered - Projects, Artifacts, Design, and Microsoft 365 - runs through a browser or an Office add-in. But what if Claude could work directly on your computer, reading your local files, opening your applications, and completing tasks while you step away? That is exactly what
Claude Desktop does.
Claude Desktop is a standalone application for
macOS and Windows (the app launched in late 2024; Cowork mode arrived on Windows in February 2026 with full feature parity). Download it from
claude.com/download, install it, and sign in with your Claude account. Once installed, Claude lives on your computer as a native app - not a browser tab.
Why does a desktop app matter? Three reasons:
1. Local file access. Claude Desktop can read files on your Desktop, in Documents, in Downloads, and other folders you grant access to. Ask it to "summarise the PDF on my Desktop" or "compare the two spreadsheets in my Downloads folder" without uploading anything to a website.
2. Application control. Through a capability called
computer use, Claude can interact with the apps on your computer - clicking buttons, navigating menus, and filling fields. If you ask Claude to update a spreadsheet in Excel or fill out a form in your CRM, it can open the application and do it.
3. Background processing. Claude Desktop runs tasks in the background while you work on other things. You do not need to keep a browser tab open and focused. Assign Claude a task, minimise the window, and come back to the finished result.
Claude Desktop is free to download for all users. However, the advanced features we cover in this module -
Cowork, Dispatch, and computer use - require a
paid plan (Pro, Max, Team, or Enterprise).
Think of Claude Desktop as the foundation for everything in this module. The features we cover next - Cowork, Dispatch, and Live Artifacts - all run through Claude Desktop.
Watch video: Claude Desktop - Your Local AI Assistant
Key Insight: Claude Desktop is a free native app for macOS and Windows that gives Claude access to your local files, your installed applications, and background task processing. Advanced features (Cowork, Dispatch, computer use) require a paid plan.
Real-World Example: A consultant has 15 client proposal PDFs scattered across her Desktop and Downloads folders. She opens Claude Desktop and says: "Read all the PDF files on my Desktop and in Downloads. Create a summary table with the client name, project scope, and proposed budget from each one." Claude reads the files locally - no uploading required - and produces a summary in under a minute.
Q: What are the three key advantages of Claude Desktop over using Claude in a browser?
Claude Desktop provides three advantages: local file access (read files without uploading), application control via computer use (interact with apps on your computer), and background processing (tasks continue while you do other work).
Think about the files scattered across your computer - proposals, reports, invoices, research notes. What task would you delegate to Claude if it could read all of them at once?
Dispatch and Delegation - Phone to Desktop
Claude Desktop gives Claude access to your computer.
Cowork is the feature that turns that access into real productivity - it lets you delegate multi-step tasks the way you would delegate to a human assistant.
Cowork uses the same agentic architecture that powers Claude Code (the developer tool), but accessible to everyone through a visual interface. Instead of responding to prompts one at a time, Claude can take a task, break it into steps, and execute the entire sequence on your behalf.
How Cowork works. Open Claude Desktop and click "Cowork" in the left panel. Describe what you want done: "Organise my Downloads folder: move all PDFs to a folder called Reports, all spreadsheets to Data, and delete files older than 90 days." Claude creates a plan, shows you the steps, and asks for confirmation before executing. Once you approve, Claude works through the steps autonomously.
Dispatch: your phone as a remote control. Dispatch lets you send tasks to your desktop from your phone. You need the Claude mobile app and Claude Desktop running on your computer. Open the Dispatch panel and you have a persistent conversation that syncs across both devices.
Here is why Dispatch changes things: you are on a train and remember you need a client report. You tell Claude on your phone: "Open the client feedback spreadsheet on my Desktop, summarise the top themes, and create a one-page Word document." Claude works on your computer and messages you the result when done.
Dispatch: Send Tasks from Your Phone, Execute on Your Desktop
Connected services. Cowork connects to Gmail, Slack, Google Calendar, and Google Drive. Ask Claude to "check my unread emails and summarise anything urgent" or "flag any scheduling conflicts next week." Claude works with both local files and cloud services.
Requirements. Cowork requires Claude Desktop (macOS or Windows) and a paid subscription. Your computer must be awake with the app open. Dispatch additionally requires the Claude mobile app.
Watch video: Dispatch and Delegation - Phone to Desktop
Key Insight: Cowork lets you delegate multi-step tasks to Claude Desktop. Dispatch extends this to your phone - send tasks from anywhere and Claude executes them on your computer. Connected services include Gmail, Slack, Calendar, and Drive.
Real-World Example: A trainer is commuting home by train. She opens Claude on her phone and types: "On my desktop, open the participant feedback Excel file, summarise the satisfaction scores, and create a one-page highlights document in Word. Save it to my Desktop." By the time she gets home, the document is ready on her computer.
Q: What is Dispatch in Claude Cowork?
Dispatch connects the Claude mobile app to Claude Desktop. Your phone acts as a remote control: send a task from your phone, and Claude executes it on your computer using local files, installed apps, and connected services.
Think about a repetitive task you do every week on your computer - organising files, processing reports, checking emails. If you could delegate it to Claude from your phone while commuting, what would you assign first?
Cowork - Your Autonomous AI Agent
Let us look at practical Cowork workflows that professionals use every day. The key concept: Cowork is not just a chatbot that answers questions. It is an autonomous agent that performs multi-step tasks using your files, apps, and connected services.
File organisation. "Go through my Downloads folder. Move all receipts to Expenses/2026, move all client contracts to Clients/Active, and create a summary spreadsheet listing every file you moved with its original location." Claude reads the file names and contents, makes decisions about where each file belongs, and executes the moves.
Document synthesis. "I have five meeting notes from this week in my Documents folder. Read all of them, identify the action items, and create a single to-do list organised by person responsible. Save it as a Word document." Claude reads multiple files, extracts relevant information, synthesises it into a new document, and saves it.
Research and summarisation. "Read the three PDF research papers in my Research folder. Write a 2-page literature review that compares their findings, notes where they agree and disagree, and suggests gaps for further research." Claude analyses multiple documents and produces original synthesis.
Scheduled tasks. Cowork supports recurring tasks - you set them up once and they run automatically on a schedule. Examples: "Every Monday morning, check my Gmail for any unread emails from clients and create a priority summary." Or: "Every Friday at 4 PM, compile a weekly status report from my project folders." Scheduled tasks run automatically as long as your computer is on and Claude Desktop is open.
Projects in Cowork. You can organise related tasks into Cowork Projects - persistent workspaces with their own files, links, instructions, and memory. For example, create a "Monthly Reporting" project with your report template, data sources, and formatting instructions. Every time you assign a task within that project, Claude already knows the context.
The pattern across all these examples: describe the outcome you want, not the individual steps. Claude figures out the steps, shows you the plan, and executes after your approval.
Watch video: Cowork - Your Autonomous AI Agent
Key Insight: Cowork handles multi-step workflows autonomously: file organisation, document synthesis, research summarisation, and recurring scheduled tasks. Organise related tasks into Cowork Projects for persistent context.
Real-World Example: A consultant sets up a recurring Cowork task: "Every Friday at 3 PM, check my Projects/ClientA folder for any new documents added this week. Summarise the key changes and email me a weekly digest." Each Friday, Claude scans the folder, reads new files, writes a summary, and sends the digest - completely hands-off.
Q: What is the key difference between Cowork and a regular Claude conversation?
Cowork is an autonomous agent, not just a chatbot. It can break tasks into steps, access your local files, interact with your applications, connect to cloud services, and execute multi-step workflows - all while you step away and do other things.
Map out a workflow you do weekly that involves reading multiple documents and producing a summary or report. What are the steps? Could you describe the entire workflow to Cowork in a single request?
Live Artifacts - Dashboards That Update Themselves
The last major Cowork feature is Live Artifacts - dashboards and trackers that stay connected to your data and refresh every time you open them.
You already know Artifacts from Module 1 - Claude builds interactive outputs like documents, web pages, and charts. But regular Artifacts are static: they show data as it was when Claude created them. Live Artifacts are dynamic: they connect to your data sources and pull fresh data each time you reopen them.
Live Artifacts launched on 20 April 2026 inside Claude Cowork. They are available to paid plan subscribers using Claude Desktop.
How to create a Live Artifact. In Cowork, ask Claude to build a dashboard connected to a data source: "Create a live dashboard that shows my email response times from Gmail, meetings scheduled this week from Google Calendar, and unread Slack messages." Claude builds an interactive dashboard and connects it to your services. The next time you open this Artifact, it pulls the latest data automatically.
What you can track:
• KPI dashboards - Revenue targets, client satisfaction scores, course completion rates - connected to spreadsheets or cloud services.
• Pipeline trackers - Sales pipeline stages, project milestones, task completion status.
• Content calendars - Upcoming blog posts, social media schedules, workshop dates.
• Personal productivity - Email volume, meeting load, unread messages, upcoming deadlines.
Supported connections. Live Artifacts can pull data from connected services including Google Calendar, Gmail, Google Drive, Slack, and Notion. They can also read local files on your computer - connect a Live Artifact to an Excel spreadsheet on your Desktop, and it refreshes with the latest data each time.
The shift from traditional dashboards. Normally, building a dashboard requires a business intelligence tool like Tableau, Power BI, or Google Looker Studio. You need to set up data connections, design visualisations, and maintain the pipeline. With Live Artifacts, you describe what you want to track in plain language and Claude builds the entire dashboard. No technical setup, no maintenance - just describe and use.
This wraps up Module 3. You now have a powerful set of desktop tools: Claude Desktop for local file access, Cowork for autonomous task delegation, Dispatch for phone-to-desktop control, and Live Artifacts for always-current dashboards. In Module 4, we will enter the world of building real applications with Claude Code.
Watch video: Live Artifacts - Dashboards That Update Themselves
Key Insight: Live Artifacts (April 2026) are dashboards that connect to your data sources and refresh automatically. Track KPIs, pipelines, calendars, and productivity - describe what you want and Claude builds it.
Real-World Example: A training company owner creates a Live Artifact: "Build a dashboard showing my upcoming workshops from Google Calendar, revenue this month from the Sales spreadsheet on my Desktop, and any unread client emails from Gmail." She pins this Artifact to her Cowork workspace. Every morning when she opens it, the dashboard shows the latest numbers - no manual updating needed.
Q: What is the key difference between regular Artifacts and Live Artifacts?
Regular Artifacts are static - they show data from the moment Claude created them. Live Artifacts are dynamic - they connect to your data sources (Gmail, Calendar, Slack, spreadsheets) and pull fresh data every time you open them.
If you could have one dashboard that updated itself every morning with the numbers you care about most, what would it show? List the 3-5 metrics and their data sources.
Module 4: Vibe Code Your Vision
Build real apps by describing your idea in plain English.
Install the Claude Code extension in Visual Studio Code and describe your idea in plain English. Create an interactive app like a quiz, calculator, or lead capture form. Build a website like a landing page, portfolio, or lead magnet.
Learning Objectives - Install and configure the Claude Code extension in Visual Studio Code
- Build an interactive app such as a quiz, calculator, or lead capture form
- Create a website such as a landing page, portfolio, or lead magnet
What You'll Learn - Setting Up Claude Code in VS Code
- The Vibe Coding Workflow
- Quizzes, Calculators, and Lead Capture Forms
- Landing Pages, Portfolios, and Multi-Page Sites
- Polish, Test, and Iterate
Setting Up Claude Code in VS Code
Everything we have covered so far - Projects, Artifacts, Design, Cowork - helps you work
with content. Now we shift to building things
from scratch. Claude Code is an agentic coding tool that reads your project files, writes code, runs commands, and builds working software from natural-language descriptions.
You do not need to know how to code. The whole point of "vibe coding" is that you describe what you want in plain English, and Claude writes the code for you.
Step 1: Install Visual Studio Code. VS Code is a free code editor from Microsoft. Download it from
code.visualstudio.com and install it. It runs on Windows, Mac, and Linux.
Step 2: Install the Claude Code extension. Open VS Code, press
Ctrl+Shift+X (Windows) or
Cmd+Shift+X (Mac) to open the Extensions panel. Search for "Claude Code" and click Install on the extension by Anthropic.
Step 3: Sign in. Click the Claude Code icon in the sidebar and sign in with your Claude account. You need at least a
Pro plan (USD 20/month) - Claude Code is not available on the free tier. Pro gives you access to both Sonnet 4.6 and Opus 4.7 (with daily Opus limits); Max and Enterprise get higher Opus usage.
Step 4: Open a project folder. In VS Code, go to File → Open Folder and select (or create) a folder for your project. This is your workspace - Claude Code can read and modify any file inside it.
What you will see. The Claude Code panel appears in the sidebar with a text input for your requests and a conversation area for Claude's responses. Claude sees whatever file you have open and any text you have highlighted, and can access other files by name.
Three important modes:
•
Normal mode - Claude asks for your permission before each file edit. You review the change and approve or reject it.
•
Auto-Accept mode - Claude applies changes without asking, running commands and editing files automatically. Fastest for experienced users who trust the output.
•
Plan mode - Claude describes exactly what it intends to do and waits for your approval before touching anything. Best for larger tasks where you want to review the full plan first.
Plan mode is recommended for beginners - it lets you see what Claude will do before it does it.
Watch video: Setting Up Claude Code in VS Code
Key Insight: Claude Code is a VS Code extension that writes code from natural-language descriptions. Install VS Code, add the Claude Code extension, sign in with a Pro or higher plan, and open a project folder. Use Plan mode to review changes before they happen.
Real-World Example: A trainer opens VS Code for the first time. She installs the Claude Code extension, signs in with her Pro account, and creates a new folder called "my-quiz-app." She types in the Claude panel: "What can you help me build?" Claude responds with suggestions: interactive quizzes, calculators, landing pages, portfolios, and more. She is ready to start.
Q: What is the minimum Claude plan required to use Claude Code?
Claude Code requires at least a Pro plan (USD 20/month). Pro gives you access to both Sonnet 4.6 and Opus 4.7 with daily Opus limits; Max and Enterprise get higher Opus usage.
Have you ever wanted to build a simple app or website but felt intimidated by the coding? What would you create first if you could just describe it in plain English?
The Vibe Coding Workflow
Now that Claude Code is set up, let us understand the core workflow:
you describe, Claude builds. This is what people call "vibe coding" - you communicate the vibe of what you want, and the AI turns it into working code.
The prompt is everything. The quality of what Claude builds depends on how clearly you describe it. Here is a framework for writing good prompts:
1. State what it is. "Build a quiz app" or "Create a landing page."
2. Describe the key features. "10 multiple-choice questions about leadership. Show the score at the end with a pass/fail message."
3. Specify the look and feel. "Clean, professional design. Navy blue header. White background. Mobile-friendly."
4. Mention any constraints. "Single HTML file. No external dependencies. Works offline."
Here is a complete prompt: "Create a single-page quiz app about leadership skills. Include 10 multiple-choice questions with 4 options each. Show a progress bar at the top. When the user finishes, display their score as a percentage and a message: above 80% says Excellent, 60-80% says Good, below 60% says Keep Practising. Use a professional navy blue and white colour scheme. Make it mobile-friendly. Everything should be in one HTML file."
The Five-Step Vibe Coding Workflow
After you submit your prompt, Claude generates the code. In Plan mode, it shows you a plan first. In Normal mode, it shows each file change as a diff. Review the changes and click Accept.
To test your creation, right-click the HTML file in VS Code and select "Open with Live Server," or double-click the file to open it in a browser.
Refining is just as easy. Build the basic version first, then refine: "Make the font bigger." "Add a countdown timer." "Change the background colour to light grey." Each refinement takes seconds.
Watch video: The Vibe Coding Workflow
Key Insight: Vibe coding = describe what you want in plain English, review the plan, approve, test, and refine. Write clear prompts with four elements: what it is, key features, look and feel, and constraints.
Real-World Example: A coach types: "Create a single-page client intake form with fields for name, email, phone, company, and a dropdown for service type (coaching, training, consulting). Add a submit button that shows a thank-you message. Navy blue header, clean white design, mobile-friendly. One HTML file." Claude generates the complete form in 30 seconds. She opens it in her browser and it works.
Q: What are the four elements of a good vibe coding prompt?
A good vibe coding prompt includes: what you are building (a quiz, a form, a landing page), the key features, the look and feel (colours, style, mobile-friendly), and any constraints (single file, no dependencies, works offline).
Write a prompt for something you need in your work right now. Include all four elements: what it is, key features, look and feel, and constraints. Save this prompt - you will use it in the next section.
Quizzes, Calculators, and Lead Capture Forms
Let us build three practical apps that trainers, coaches, and consultants actually use. Each one is a single HTML file that works offline - no server, no hosting, no coding knowledge required.
Project 1: Quiz app. Quizzes are the most common tool in training. Tell Claude: "Build a 10-question multiple-choice quiz about [your topic]. Show one question at a time with a progress bar. Highlight correct and incorrect answers. Display the final score with a pass/fail message at 80%. Allow the user to retry. Professional design with [your colours]." Claude builds the entire quiz. To change the questions, just tell Claude: "Replace question 3 with: What is the primary purpose of a SWOT analysis?" You never touch the code directly.
Project 2: Calculator or assessment tool. Many consultants use scoring tools. Example prompt: "Create a business readiness calculator. Include 15 questions rated on a scale of 1 to 5. Group them into 3 categories: People, Process, and Technology. Show a score for each category and an overall score. Display a results page with recommendations based on the total: below 30 = Needs Improvement, 30-50 = Developing, above 50 = Ready. Include a button to download the results as a PDF." Claude builds it complete with the scoring logic and PDF export.
Project 3: Lead capture form. Every professional needs leads. "Build a workshop registration page. Header with the workshop title, date, and venue. Registration form with name, email, phone, company, and a dropdown for number of attendees. When submitted, show a confirmation message and save the data to the browser's local storage. Add a hidden admin page at /admin that displays all registrations in a table." Claude builds the front-end form and a simple admin view - all in one file.
The single-file advantage. All three projects are self-contained HTML files. You can email them to someone, host them on any web server, or open them directly in a browser. No installation, no database, no server setup. This is the fastest path from idea to working tool.
Watch video: Quizzes, Calculators, and Lead Capture Forms
Key Insight: Build practical tools with Claude Code: quizzes for training, calculators for assessment, and lead capture forms for business. Each is a single HTML file that works offline in any browser.
Real-World Example: A leadership trainer tells Claude: "Build a 15-question leadership style assessment. Each question has 4 options. Score the answers into 4 categories: Directive, Coaching, Supporting, and Delegating. Show a radar chart of the results and a paragraph explaining the dominant style." In two minutes, she has a working assessment tool she can use in her next workshop.
Q: Why are single-file HTML apps ideal for trainers and consultants?
Single-file HTML apps are self-contained: no server setup, no database, no installation. You can email the file to a client, host it on any web server, or open it in a browser directly. This is the fastest path from idea to working tool.
Of the three project types - quiz, calculator/assessment, lead capture form - which would be most useful in your work right now? Draft a prompt for it using the four-element framework from the previous section.
Landing Pages, Portfolios, and Multi-Page Sites
Single-file apps are great for tools, but what about full websites? Claude Code can build multi-page websites too - landing pages, portfolios, lead magnets, and more.
Landing page. The most common need. Tell Claude: "Create a professional landing page for my coaching business. Include: a hero section with headline and call-to-action button, a section about my services (executive coaching, team coaching, leadership workshops), testimonials with three placeholder quotes, a pricing section with three tiers, and a contact form. Use a clean design with navy blue (#1a2b4a) and orange (#FF6B35) accent. Mobile-responsive." Claude builds the complete page with HTML, CSS, and responsive design.
Portfolio site. Showcase your work: "Build a portfolio website with 4 pages: Home (introduction and photo placeholder), About (bio, qualifications, experience), Services (list of offerings with descriptions), and Contact (form with name, email, message). Navigation bar at the top. Professional, minimalist design." Claude creates a multi-page site with consistent navigation.
Lead magnet page. Capture email addresses in exchange for a resource: "Create a lead magnet download page. Headline: Get Your Free Leadership Assessment Toolkit. Subtitle: 5 tools to measure and improve your team's leadership capacity. Email capture form with name and email fields. After submission, show a download button. Include social proof: Trusted by 500+ managers." Claude builds a conversion-optimised page.
Working with multiple files. For multi-page websites, Claude creates separate files: index.html (home), about.html, services.html, contact.html, and a shared style.css file. Claude handles the navigation links between pages automatically. You can see all the files in VS Code's file explorer and ask Claude to modify any of them.
Adding images. Claude cannot generate photographs, but it can set up placeholder images and tell you exactly where to add your own. It will write the HTML and CSS so that when you drop your image files into the project folder and name them correctly, they appear in the right places. You can also tell Claude to use free stock images from services like
Unsplash by providing the image URLs.
Watch video: Landing Pages, Portfolios, and Multi-Page Sites
Key Insight: Claude Code builds complete websites: landing pages, portfolios, and lead magnet pages. Multi-page sites include navigation, responsive design, and consistent styling across all pages.
Real-World Example: A consultant tells Claude: "Build a landing page for my change management workshop. Hero with the title and date. Problem section explaining why change fails. Solution section describing my 5-step framework. Three testimonial cards. Registration form. Navy blue and white design. Mobile-first." Claude builds the entire page. She swaps the placeholder photo for her own headshot and the page is ready to share.
Q: How does Claude Code handle images in websites it builds?
Claude cannot generate photographs, but it sets up the HTML and CSS for images with placeholders. It tells you exactly where to add your own image files. You can also provide URLs to free stock images from services like Unsplash.
Think about the most important page your business needs right now - a landing page, a portfolio, a lead magnet. What headline, sections, and call-to-action would it have? Write a prompt for Claude Code.
Polish, Test, and Iterate
Your first version will rarely be perfect, and that is fine. Vibe coding is iterative - you build, test, refine, and repeat. The speed of iteration is what makes it powerful.
Visual refinements. Once your app or page is working, focus on how it looks. Common requests:
• "Make the header font larger and bolder."
• "Add more spacing between sections."
• "Change the button colour to orange #FF6B35."
• "Add a subtle shadow to the cards."
• "Make the footer stick to the bottom of the page."
Each of these takes Claude a few seconds. You do not need to know CSS - describe the visual change you want and Claude writes the code.
Functional refinements. Add features after the basic version works:
• "Add a countdown timer to the quiz - 30 seconds per question."
• "Save quiz results to the browser so users can see their history."
• "Add form validation - email must be valid, name is required."
• "Show a loading spinner while the form is submitting."
• "Add a print button that formats the results nicely on paper."
Mobile testing. Always test on your phone. Open the HTML file on your computer, then access it from your phone on the same network. Or use VS Code's built-in device emulator: press F12 to open Developer Tools, then click the device toggle icon to preview different screen sizes. Tell Claude: "The buttons are too small on mobile. Make them at least 44 pixels tall with more padding."
Version history. Claude Code tracks every change. If you do not like a change, you can reject it before it is applied (in Plan mode) or undo it (Ctrl+Z in the file). You can also ask Claude: "Undo the last change you made" and it will revert the file.
When to stop. Perfectionism is the enemy of shipping. Your goal is "good enough to use," not "flawless." Ship your first version, get feedback from real users, and then iterate based on what they actually need - not what you imagine they might want.
This wraps up Module 4. You can now install Claude Code, describe what you want to build, create interactive apps and full websites, and polish them through iterative refinement. In Module 5, we will add AI features to your creations and deploy them to the web for anyone to access.
Watch video: Polish, Test, and Iterate
Key Insight: Vibe coding is iterative: build the basic version first, then refine visuals, add features, and test on mobile. Always test on your phone. Ship "good enough" and iterate based on real user feedback.
Real-World Example: A trainer builds a quiz app and tests it on her phone. The buttons are too small to tap easily. She tells Claude: "Make all buttons at least 48 pixels tall with 16 pixels of padding. Increase the font size on mobile to 18 pixels." Claude updates the CSS. She refreshes her phone and the buttons are now easy to tap. Total time for the fix: 15 seconds.
Q: What is the recommended approach to building with Claude Code?
Vibe coding is iterative. Build the basic version first with a clear prompt, then refine with small requests: "Make the font bigger," "Add a timer," "Change the colours." Each refinement takes seconds. Do not aim for perfection on the first try.
Think about the last time you tried to make something perfect before sharing it. What happened? How would a "build fast, refine based on feedback" approach change your process?
Module 5: Go Live, AI Inside
Add AI features and deploy your project to a public URL.
Add an AI chatbot, smart form, or content generator using OpenRouter. Deploy your app or website to a public URL using GitHub Pages. Test your live app with real users and gather feedback.
Learning Objectives - Integrate an AI chatbot, smart form, or content generator using OpenRouter
- Deploy an app or website to a public URL with GitHub Pages
- Test a live app with real users and interpret feedback
What You'll Learn - Adding AI Features with OpenRouter
- Deploy to the Web with GitHub Pages
- Testing with Real Users
- The Feedback Loop - Collect, Fix, Repeat
Adding AI Features with OpenRouter
In Module 4, you built interactive apps and websites with Claude Code. Now we add a powerful layer:
AI features powered by real language models. Instead of static content, your app can have a chatbot that answers questions, a form that generates personalised responses, or a content creator that produces tailored output.
The secret is
OpenRouter - a gateway that gives you access to over 300 AI models (including Claude, GPT, Gemini, Llama, and more) through a single API. You sign up, get an API key, and your app can talk to any model.
Step 1: Get your API key. Go to
openrouter.ai, create a free account, and generate an API key. Free models (like Llama 3.1) let you start without spending anything. Paid models cost fractions of a cent per request.
Step 2: Tell Claude Code to add AI. You do not write the code yourself. Tell Claude: "Add an AI chatbot to this page. Use OpenRouter with a free Llama model. The chatbot should answer questions about [your topic]." Claude writes all the JavaScript to call the API and display responses. You just paste in your key.
Three AI features you can add:
•
AI chatbot - Answers questions about your topic using a system prompt you define.
•
Smart form - Users enter information (skills, goals, preferences) and the AI generates personalised recommendations.
•
Content generator - Produces content on demand. Example: a "workshop agenda builder" where users enter topic, duration, and audience size.
How Your App Connects to AI via OpenRouter
Important security note. For prototypes, storing the API key in the JavaScript file is fine. For public apps, keep the key on a server. Tell Claude: "Move the API key to a server-side endpoint so it is not exposed in the browser."
Watch video: Adding AI Features with OpenRouter
Key Insight: OpenRouter gives your app access to 300+ AI models through one API key. Add chatbots, smart forms, and content generators by describing what you want to Claude Code. Free models are available to start.
Real-World Example: A leadership trainer adds an AI chatbot to her quiz app. She tells Claude: "After the quiz results, add a chat where users can ask follow-up questions about leadership. Use OpenRouter with a free Llama model. Set the system prompt to: You are a leadership coach. Give practical, actionable advice." Claude adds the chat interface and API integration. Users finish the quiz and immediately get personalised coaching.
Q: What is OpenRouter?
OpenRouter is a unified API gateway that gives you access to over 300 AI models (Claude, GPT, Gemini, Llama, and more) through a single API endpoint and API key. It offers both free and paid models.
Think about your clients or learners. What question do they ask you most often? An AI chatbot could answer that question 24/7. What system prompt would you give it to ensure accurate, helpful responses?
Deploy to the Web with GitHub Pages
Your app works on your computer. Now let us put it on the internet so anyone with a link can access it. The simplest free option is
GitHub Pages - it hosts static websites directly from a GitHub repository.
What you need:
• A free
GitHub account
• Your project files (the HTML, CSS, and JavaScript files Claude Code created)
Step 1: Create a GitHub account if you do not have one. Go to github.com and sign up. It is free.
Step 2: Create a new repository. Click the "+" icon in the top right and select "New repository." Name it something descriptive like "leadership-quiz" or "coaching-website." Set it to Public (required for free GitHub Pages). Click "Create repository."
Step 3: Upload your files. On the repository page, click "uploading an existing file." Drag your project files from your computer into the upload area. Make sure your main page is named
index.html - GitHub Pages looks for this file as the homepage. Click "Commit changes."
Step 4: Enable GitHub Pages. Go to your repository's Settings tab. Scroll down to "Pages" in the left sidebar (under "Code and automation"). Under "Build and deployment," select "Deploy from a branch." Under "Branch," select "main" and click Save.
Step 5: Access your live site. After a minute or two, your site will be live at:
https://yourusername.github.io/your-repo-name/. Share this link with anyone - they can access your app from any device with a browser.
Custom domains. If you own a domain (like mycoaching.com), you can point it to your GitHub Pages site. In the Pages settings, enter your custom domain and update your DNS records with your domain provider. GitHub provides HTTPS encryption automatically.
Updating your site. To make changes, update the files in your GitHub repository. GitHub automatically rebuilds and redeploys your site. The cycle is: edit with Claude Code on your computer → upload the changed files to GitHub → site updates automatically.
Alternative: Vercel. For more advanced projects (especially those with server-side API keys),
Vercel is another free hosting option that supports both static files and serverless functions. Tell Claude Code: "Set up this project for Vercel deployment" and it will create the necessary configuration files.
Watch video: Deploy to the Web with GitHub Pages
Key Insight: GitHub Pages hosts your website for free. Create a repository, upload your files, enable Pages in Settings, and your site is live at yourusername.github.io/repo-name. Updates are automatic when you push changes.
Real-World Example: A consultant builds a workshop registration page with Claude Code. She creates a GitHub account, uploads the files to a new repository called "wellness-retreat," and enables GitHub Pages. Two minutes later, the page is live at janedoe.github.io/wellness-retreat. She shares the link in her email newsletter and registrations start coming in.
Q: What is the main file GitHub Pages looks for as the homepage?
GitHub Pages looks for index.html as the homepage of your site. Make sure your main page is named index.html when you upload your files to the repository.
What URL would you want for your project? Would yourusername.github.io/project-name work, or would you want a custom domain? If you already own a domain, consider pointing it to GitHub Pages.
Testing with Real Users
Your app is live. Now comes the most important step that most people skip: testing with real users. The gap between what you think works and what actually works is always bigger than you expect.
Why test? You built the app, so you know how it works. Your users do not. They will click things you did not expect, miss buttons you thought were obvious, and get confused by instructions you thought were clear. Testing reveals these gaps before they cost you clients or credibility.
The 5-person rule. Research by usability expert Jakob Nielsen shows that testing with just 5 users reveals about 85% of usability problems. You do not need hundreds of testers - five people who represent your target audience are enough.
How to run a simple test:
1. Choose 5 testers from your target audience. If you built a quiz for managers, find 5 managers. If you built a registration page, find 5 people who might register.
2. Give them a task, not instructions. Do not say "click the blue button to start." Say: "Please take this leadership quiz and tell me your score." Watch what they do. Where do they hesitate? What do they click first? Where do they get confused?
3. Observe silently. Do not help them. Do not explain things. The whole point is to see what happens when you are not there to guide them. If they struggle, that is valuable information.
4. Ask three questions after:
• "What was confusing or frustrating?"
• "What did you expect to happen that did not happen?"
• "What would make this better?"
5. Write down every issue - even small ones. A "small" annoyance for one person is often a dealbreaker for others.
Remote testing. If you cannot meet testers in person, share the link and ask them to screen-record themselves using the app (most phones and computers have built-in screen recording). Watch the recordings and note where they hesitate or struggle.
Common issues you will discover:
• Buttons that are too small on mobile
• Text that is too long or too jargon-heavy
• Navigation that is not obvious
• Forms that do not validate input clearly
• Loading times that are too slow
Every issue is a quick fix with Claude Code: "Make the Start button bigger and change the label from Commence to Start Quiz."
Watch video: Testing with Real Users
Key Insight: Test with 5 real users from your target audience. Give them a task (not instructions), observe silently, and ask three follow-up questions. 5 testers reveal 85% of usability problems.
Real-World Example: A trainer shares her leadership quiz with 5 managers. Three of them tap the wrong area on mobile because the answer options are too close together. Two do not notice the Next button because it blends into the background. She tells Claude Code: "Increase spacing between answer options to 16 pixels. Make the Next button orange #FF6B35 with white text so it stands out." Both fixes take 30 seconds.
Q: How many users do you need to test with to find most usability problems?
Research by Jakob Nielsen shows that 5 users reveal about 85% of usability problems. You do not need large-scale testing - find 5 people who represent your target audience and observe them using your app.
Who are 5 people in your network who represent your target audience? Could you send them your live link this week and ask for 10 minutes of their time to test it?
The Feedback Loop - Collect, Fix, Repeat
Testing gives you a list of issues. Now you need a system to
collect, prioritise, and act on feedback continuously - not just once.
Add a feedback mechanism. Tell Claude Code: "Add a feedback button in the bottom-right corner. When clicked, show a simple form with: a 1-5 star rating, a text area for comments, and a submit button. Save the feedback to localStorage and show a thank-you message." Now every user can share their experience without you asking.
Prioritise with the Impact/Effort matrix. Sort every piece of feedback into four categories:
•
High impact, low effort → Do these first. Example: "The submit button does not work on Safari." One-line fix, huge improvement.
•
High impact, high effort → Plan these next. Example: "Add a feature to email results to participants." Worth doing, but takes more time.
•
Low impact, low effort → Quick wins when you have spare time. Example: "Change the font to something more modern."
•
Low impact, high effort → Skip these. Example: "Add animations to every page transition."
The feedback loop:
1. Collect - Built-in feedback form + direct user conversations.
2. Categorise - Is it a bug (broken), usability (confusing), or feature request (missing)?
3. Prioritise - Impact/Effort matrix. Fix bugs first, then usability, then features.
4. Fix - Use Claude Code. Most fixes take under a minute to describe and execute.
5. Deploy - Push to GitHub. Site updates automatically.
6. Repeat - Check feedback weekly and keep iterating.
Tracking usage. For basic analytics, add a tool like
Google Analytics (free) or
Plausible (paid, privacy-focused). Tell Claude: "Add Plausible analytics with domain mydomain.com." This shows you how many people visit, which pages are most popular, and where users drop off.
Congratulations! You have completed the Claude Creator Program. You can now use Projects, Artifacts, and Chrome for productivity, create designs and marketing materials, work smarter in Office, delegate tasks with Cowork, build apps with Claude Code, and deploy AI-powered tools to the web.
The most important thing now is to
build something real. Pick one project and build it this week. Ship it, test it, and improve it. That is how you go from learning to creating.
Watch video: The Feedback Loop - Collect, Fix, Repeat
Key Insight: Build a feedback loop: collect feedback (built-in form + conversations), categorise (bug, usability, feature), prioritise (Impact/Effort matrix), fix with Claude Code, deploy to GitHub, and repeat weekly.
Real-World Example: A consultant launches her business readiness assessment. After one week, she has 12 pieces of feedback. She sorts them: 2 bugs (form not submitting on Safari, score displaying incorrectly), 5 usability issues (text too small on mobile, confusing question wording), and 5 feature requests (email results, add more questions, PDF export). She fixes the 2 bugs first - each takes Claude Code under a minute. Then she addresses the top 3 usability issues. The feature requests go on her "next version" list.
Q: In the Impact/Effort matrix, which feedback should you act on first?
High impact, low effort items should be done first - they deliver the biggest user improvement with the least work. A one-line bug fix that affects every user is more valuable than a week-long feature that only a few people want.
Think about a product or service you use regularly. What is one small change that would significantly improve your experience? That is the kind of insight your users will give you - if you ask.
