Module 1: From Prompts to Skills
Automate repetitive tasks by using Claude Skills to standardize workflows and create custom automations.
Understand the Claude ecosystem and navigate claude.ai confidently. Build documents, interactive web pages, and diagrams using Artifacts. Organise work in Projects with custom instructions. Install pre-built Skills to produce real Office files, then create your own custom Skills to automate repetitive workflows.
Learning Objectives - Navigate the Claude ecosystem confidently, choosing the right model and plan for each task
- Create documents, spreadsheets, interactive web pages, and diagrams using Artifacts
- Set up Projects with custom instructions and reference files for persistent context
- Install and use pre-built Skills to produce real Office files like Word, Excel, and PowerPoint
- Build custom Skills from scratch to standardize repetitive workflows and automate task-specific outputs
What You'll Learn - Meet Claude: Models, Artifacts, and Projects
- Claude Skills: Specialist Knowledge on Demand
- Building Your First Custom Skill
- Skill Workflows: From Template to Automation
- Putting It All Together: Your Claude Toolkit
Meet Claude: Models, Artifacts, and Projects
Before you can build Skills that automate your work, you need to understand the platform they run on. This section gives you a working knowledge of Claude, its key features, and how to organise your workspace.
What is Claude? Claude is an AI assistant built by
Anthropic, a company founded in 2021 by Dario and Daniela Amodei. Claude is trained using
Constitutional AI: instead of relying only on human moderators, it is trained against a written set of principles and learns to critique its own responses. The result is an AI that is more cautious, honest, and less likely to fabricate answers. Independent benchmarks consistently rank Claude among the lowest-hallucination AI models.
Three models, one rule of thumb. Claude comes in three sizes named after literary forms. 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, analysis, and coding. You can switch between them with one click on claude.ai.
Plans and pricing. Claude offers five tiers. The
Free plan gives you basic access to Sonnet with limited messages.
Pro (USD 20/month) unlocks unlimited Projects, higher usage, Claude Code, and Research.
Max comes in two tiers: 5x (USD 100/month) and 20x (USD 200/month) with much higher usage limits.
Team and
Enterprise add collaboration and admin controls for organisations.
Artifacts: your interactive workspace. When you ask Claude to create something substantial, it appears in a separate panel called an
Artifact. Artifacts are triggered automatically when the output is self-contained and typically more than about 15 lines. Claude can build formatted
documents,
spreadsheets,
interactive web pages (quizzes, calculators, dashboards),
diagrams (SVG and Mermaid), and
code in any programming language. You can edit Artifacts directly, ask Claude to refine them, and publish them as shareable links. Artifacts work on all plans, including Free.
Projects: persistent workspaces. A
Project is a workspace where you define custom instructions and upload reference files. Every conversation inside that Project inherits your instructions and has access to your files. This means you write your preferred tone, format, and rules once, and Claude follows them consistently. Projects accept PDFs, Word documents, spreadsheets, text files, and HTML files (up to 30 MB each). Free accounts get basic Projects; Pro and above get unlimited Projects with enhanced retrieval across large knowledge bases.
The bigger picture. Beyond chat, Artifacts, and Projects, the Claude ecosystem includes
Skills (specialist knowledge packages, the focus of this module),
Claude Design for visual prototypes,
Claude Code for software development,
Cowork for desktop automation,
Claude for Microsoft 365, and
Browser Use for browser-based research.
Watch video: Meet Claude: Models, Artifacts, and Projects
Key Insight: Claude is built by Anthropic using Constitutional AI. Three models (Haiku, Sonnet, Opus) cover speed to deep reasoning. Artifacts let you build interactive documents, web pages, and diagrams. Projects give you persistent workspaces with custom instructions and uploaded reference files.
Real-World Example: A training consultant creates a Project called "Workshop Proposals" with instructions: "Always write proposals in this format: Objective, Modules, Timeline, Investment. Use a professional but friendly tone." She uploads her company profile and three past proposals as reference files. Now every time she starts a new conversation in this Project, Claude already knows her format, tone, and company details.
Q: What is the main advantage of using a Claude Project over a regular conversation?
Projects are persistent workspaces. You write custom instructions once (tone, format, rules) and upload reference files, and Claude follows them in every conversation within that Project. Regular conversations start fresh each time.
Think about the AI tools you use today. How often do you repeat the same instructions or re-upload the same files? How would a persistent workspace that remembers your preferences change the way you work?
Claude Skills: Specialist Knowledge on Demand
You now know how to chat with Claude, create Artifacts, and organise work in Projects. But there is a layer above all of these: Skills. A Skill is an instruction package that gives Claude specialist knowledge for specific tasks. Once installed, Claude uses a Skill automatically when your request matches what the Skill is designed to do.
How Skills differ from Projects. A Project is a workspace: you organise documents and write instructions for a specific area of work, like "Client Proposals." A Skill is specialist knowledge: it extends what Claude can do across any conversation. A Project tells Claude "here is my context." A Skill tells Claude "here is how to perform this task." You can use both together for maximum impact.
Pre-built Skills from Anthropic. Anthropic provides several built-in Skills that are available to all users. These include:
Enhanced Excel spreadsheet creation lets Claude build professional spreadsheets with formulas, formatting, and charts. Professional Word document creation produces properly formatted .docx files with headings, tables, and styling. PowerPoint presentation generation creates slide decks with layouts, text, and visuals. PDF creation and processing handles generating and working with PDF files.
When you have a Skill enabled and ask Claude to create a spreadsheet, it does not produce a text table in the chat. It generates a real .xlsx file you can download and open in Excel or Google Sheets. The same applies to Word and PowerPoint files.
How to install Skills. First, make sure code execution is enabled: go to Settings, then Capabilities, and toggle it on. Next, go to Customize (in the left sidebar), then Skills. You will see Anthropic's built-in Skills listed there. Toggle each one on or off. Once a Skill is enabled, Claude uses it automatically whenever your request matches what the Skill does.
Skills require code execution. Skills run in a sandboxed environment on Claude's servers. When you ask Claude to create a Word document, the Skill executes code behind the scenes to generate the actual file. This is why code execution must be enabled in your settings before Skills can work.
Beyond Anthropic's built-in Skills. The built-in Skills are just the starting point. You can also install third-party Skills or create your own custom Skills (covered in the next sections). Custom Skills let you teach Claude your specific workflows, templates, and processes.
Watch video: Claude Skills: Specialist Knowledge on Demand
Key Insight: Skills are instruction packages that give Claude specialist knowledge. Anthropic provides built-in Skills for creating real Excel, Word, PowerPoint, and PDF files. Enable them in Customize, then Skills. Code execution must be turned on first.
Real-World Example: A coach needs to send a quarterly progress report to each of her 12 clients. She enables the Word document Skill and types: "Create a professional progress report for Sarah Chen. Include sections for Goals Review, Key Achievements, Areas for Improvement, and Next Quarter Targets." Claude generates a formatted .docx file she can download, personalise with specific notes, and email directly.
Q: What must you enable before Claude Skills can work?
Skills require code execution to be enabled. Go to Settings, then Capabilities, and toggle code execution on. Skills run code in a sandboxed environment on Claude's servers to generate real files like Word documents, Excel spreadsheets, and PowerPoint presentations.
Think about the types of files you create most often at work. Reports, spreadsheets, presentations? How would it change your workflow if Claude could produce real, downloadable versions of those files instead of just text in a chat window?
Building Your First Custom Skill
Anthropic's built-in Skills handle common file types, but the real power comes from creating your own. A custom Skill teaches Claude a specific workflow that you define. Once installed, Claude applies it automatically whenever it recognises a matching request.
Why build custom Skills? Every professional has tasks they repeat with minor variations. A trainer writes session outlines in the same format. A consultant produces competitor analyses with the same structure. A coach sends follow-up summaries after every session. Instead of re-explaining these patterns to Claude each time, you package them into a Skill that Claude applies automatically.
Two ways to create a Custom Skill.
Method 1 - Skill Creator. The easiest starting point. Install the Skill Creator from the Skills library (Customize > Skills) and type /skill-creator in any conversation. Claude walks you through a Q&A: what should the Skill do, what triggers it, and what should the output look like. It generates complete Skill instructions at the end - no writing or technical knowledge required.
Method 2 - Output-first. Often the fastest approach. Start a regular chat and get Claude to produce exactly the output you want: the right structure, tone, and format. Once it looks right, ask Claude: "Turn this into a reusable Skill so you always produce output like this." Claude converts your working example into Skill instructions you can save and install. This works well when you already know what good output looks like but find it hard to describe from scratch.
Manual method (advanced). For complex workflows, you can build a Skill manually: create a Skill.md file with YAML frontmatter (name and description) plus a markdown body with your instructions, then upload it as a ZIP in Customize > Skills. Start with Method 1 or 2 first - use the manual approach only when you need full control or want to include reference files and scripts.
Key Insight: Two ways to create a Custom Skill: use <strong>Method 1 - Skill Creator</strong> (type <code>/skill-creator</code>) for a guided Q&A that writes the instructions for you, or <strong>Method 2 - Output-first</strong>: refine the output in chat until it looks right, then ask Claude to convert it into a Skill. Both produce Skills that trigger automatically when Claude recognises a matching request.
Real-World Example: A trainer wants Claude to always format session plans her way. She starts a chat and asks Claude to produce a session plan for a communication skills workshop. After a few rounds of refinement it looks exactly right. She types: "Turn this into a reusable Skill so you always produce session plans in this format." Claude generates the Skill instructions. She installs the Skill, and from then on every session plan follows her exact template - without her repeating the instructions each time.
Q: Which method of creating a Custom Skill works best when you already know what good output looks like but find it hard to describe from scratch?
Method 2 - Output-first - is ideal when you can recognise good output but struggle to describe it from scratch. Chat with Claude until the result looks exactly right, then say: "Turn this into a reusable Skill so you always produce output like this." Claude converts your working example into Skill instructions you can install and reuse.
Think about a task you repeat at least once a week. Which method would you use to build a Skill for it - Skill Creator (guided Q&A) or Output-first (refine in chat, then convert)? What would you ask Claude to produce first?
Skill Workflows: From Template to Automation
You know how to create a basic Skill. Now let us look at how to make Skills more powerful and how to combine them with Projects for real workflow automation.
Writing better Skill instructions. The quality of your Skill depends on the clarity of your instructions. Here are five principles that make the difference between a Skill that works sometimes and one that works every time.
Be specific about format. Do not write "produce a summary." Write "produce a summary with these exact sections: Key Points (3-5 bullets), Decisions (numbered list), Action Items (table with columns: Task, Owner, Due Date)." The more specific your template, the more consistent Claude's output.
Include examples. Show Claude what good output looks like by including a completed sample in the Skill instructions. Claude uses this as a reference point for tone, length, and structure.
Define boundaries. Tell Claude what NOT to do. "Do not include a greeting or sign-off. Do not add disclaimers. Do not suggest additional sections beyond the template." Boundaries prevent Claude from adding unnecessary content.
Specify tone and audience. "Write for a non-technical audience. Use short sentences. Avoid jargon. If a technical term is necessary, define it in parentheses." This is especially important for Skills that produce client-facing documents.
Keep Skills focused. One Skill should do one job well. A "Meeting Summary" Skill and a "Client Email" Skill are better than a single "Business Communication" Skill that tries to do both. Focused Skills trigger more reliably and produce more consistent output.
Combining Skills with Projects. Skills and Projects work powerfully together. A Project provides the context (your company profile, past work, reference documents). A Skill provides the process (how to structure the output). When you use both, Claude has everything it needs to produce professional, consistent deliverables with minimal input from you.
For example, create a Project called "Client Work" with your company profile, pricing guide, and portfolio uploaded as reference files. Then install a "Proposal Generator" Skill that follows your exact proposal format. When you tell Claude about a new client, it pulls company details from the Project files and formats the proposal using the Skill template.
Sharing Skills. Custom Skills you create are private to your account. If you are on a Team or Enterprise plan, organisation owners can provision Skills for the entire team. Skills shared this way appear in each team member's Customize panel and can be toggled on or off individually.
Key Insight: Write specific, focused Skill instructions with exact templates, examples, boundaries, and tone guidelines. Combine Skills with Projects for maximum impact: Projects provide context (your documents and preferences), Skills provide process (how to structure the output).
Real-World Example: A training company creates a Project called "Workshop Delivery" with their facilitator guide template, company branding guidelines, and a list of 50 ice-breaker activities uploaded as reference files. They also install a custom "Session Plan" Skill that formats every session with: Learning Objectives, Activity Sequence (table), Materials Needed, and Debrief Questions. When a trainer types "Plan a 2-hour session on conflict resolution for 20 managers," Claude pulls the ice-breaker list from the Project files and formats everything using the Skill template.
Q: Why is it better to create separate, focused Skills rather than one large Skill that handles many tasks?
Focused Skills trigger more reliably. Claude reads each Skill's description to decide whether to activate it. A specific description like "Generate a meeting summary with action items" is easier for Claude to match than a vague one like "Handle business communications." Focused Skills also produce more consistent output because the instructions are targeted.
Think about the documents you create most often at work. Could you break your workflow into a Project (for context and reference files) and a Skill (for the output template)? What would each contain?
Putting It All Together: Your Claude Toolkit
You have now learned four layers of the Claude ecosystem: the models and interface, Artifacts for interactive outputs, Projects for persistent workspaces, and Skills for specialist knowledge. The key to working effectively with Claude is knowing
when to use which tool.
Four tools in your Claude toolkit: Chat for quick tasks, Artifacts for outputs, Projects for context, Skills for workflows
Regular chat is for quick questions, brainstorming, and one-off tasks. No setup needed.
Artifacts are for substantial, self-contained outputs like documents, web pages, diagrams, and code. Claude creates them automatically. You can edit, iterate, and publish them as shareable links.
Projects are for ongoing work where you need persistent context. Upload your reference files, write custom instructions, and Claude follows them in every conversation. Use Projects when you work on the same topic repeatedly.
Skills are for repeatable tasks that follow a consistent format. Build a Skill once and Claude applies it automatically whenever it recognises a matching request. Skills work across all conversations, not just within one Project.
The power combination. The most effective setup combines Projects and Skills. Your Project holds the "what" (your company info, guidelines, reference materials). Your Skill defines the "how" (the output template, formatting rules, and process). Together, they let Claude produce professional deliverables with minimal input.
Setting up your workspace. Here is a practical starting point for your first week with Claude:
Day 1: Enable code execution and turn on the built-in Word, Excel, and PowerPoint Skills.
Day 2: Create your first Project. Pick your most common area of work, upload 3-5 key reference files, and write custom instructions (200-500 words covering tone, format, audience, and rules).
Day 3: Build your first custom Skill. Choose the task you repeat most often, write a Skill.md with clear instructions and an example output, and upload it.
Day 4-5: Use your Project and Skill together on real work. Note what needs adjusting, refine your instructions, and iterate.
Security note. Custom Skills you upload are private to your account. Never hardcode sensitive information like API keys or passwords in Skill files. Review any third-party Skills before enabling them, particularly checking for external network connections or suspicious code dependencies.
Key Insight: Use regular chat for quick tasks, Artifacts for substantial outputs, Projects for persistent context, and Skills for repeatable workflows. The most powerful setup combines Projects (your context and files) with Skills (your output templates) so Claude produces professional deliverables with minimal input.
Real-World Example: A consultant sets up her Claude workspace in three days. Day 1: she enables the built-in Office Skills and generates her first real PowerPoint deck. Day 2: she creates a Project called "Advisory Practice" with her company profile, fee schedule, and three past engagement summaries. Day 3: she builds a custom "Engagement Letter" Skill that formats proposals in her standard layout. By the end of the week, she can type "Draft an engagement letter for TechStart Sdn Bhd, 3-month digital transformation advisory" and Claude produces a formatted document using her exact template and company details.
Q: What is the recommended approach for combining Projects and Skills effectively?
Projects provide the "what" (your company info, guidelines, reference materials) and Skills define the "how" (the output template, formatting rules, and process). Together they let Claude produce professional, consistent deliverables with minimal input from you. Skills work in any conversation, not just inside Projects.
Map out your ideal Claude workspace. Which Projects would you create? Which custom Skills would save you the most time? What would your first week look like if you followed the Day 1-5 setup plan?
Module 2: Visual Work, Reimagined
Design professional marketing materials with brand guidelines through Claude Design.
Create a design system with brand colours, fonts, and visual guidelines. Apply your design system to marketing materials like slides, social media graphics, and flyers. Make edits to visual designs by refining layouts, swapping elements, and adjusting styles.
Learning Objectives - Set up a design system in Claude Design with your brand colours, fonts, and visual guidelines
- Apply your design system to create consistent marketing materials like slides, social media graphics, and flyers
- Use inline comments, direct editing, and adjustment sliders to refine layouts and styles
- Export finished designs to PDF, PPTX, HTML, or Canva for distribution
- Maintain and update your design system as your brand evolves
What You'll Learn - What Is Claude Design and How It Works
- Building Your Design System
- Creating Marketing Materials
- Editing and Refining Your Designs
- Exporting and Maintaining Your Brand
What Is Claude Design and How It Works
In Module 1 you learned how Claude handles text, documents, and workflows.
Claude Design extends Claude into the visual world. It is a collaborative design tool that lets you create polished visual work by describing what you want in plain language.
What Claude Design is. Claude Design is a product from Anthropic Labs, launched on 17 April 2026 as a research preview. It is powered by Claude Opus 4.7 and is available to
Pro, Max, Team, and Enterprise subscribers. You access it at
claude.ai/design, separate from the main Claude chat.
The interface has two panels. On the left is a
chat panel where you describe what you want. On the right is a
canvas where Claude generates your design in real time. You iterate by talking to Claude, commenting directly on the canvas, or editing elements by hand.
What you can create. Claude Design handles a wide range of visual work:
Presentations and slide decks for pitches, workshops, and training sessions.
Marketing materials like social media graphics, flyers, brochures, and one-pagers.
Prototypes and mockups for web interfaces, mobile apps, and dashboards.
Landing pages for products, events, and lead generation.
Internal tools like forms, trackers, and visual reports.
The five-step Claude Design workflow: describe, generate, refine, apply across, and export
How it differs from Artifacts. Artifacts (from Module 1) generate interactive HTML, documents, and code inside the Claude chat. Claude Design is a dedicated visual workspace with a canvas, editing tools, and export options. Think of Artifacts as quick single-page outputs. Claude Design is for multi-page, brand-consistent visual projects that need iteration and polish.
A structured brief saves time. A strong prompt takes three minutes and saves thirty minutes of iteration. Include the
type of design (slide deck, social media graphic, landing page), the
audience (clients, internal team, social media followers), the
tone (professional, playful, bold), and the
specific structure you want (number of slides, sections, layout preferences).
Watch video: What Is Claude Design and How It Works
Key Insight: Claude Design is a visual creation tool at claude.ai/design, available to Pro, Max, Team, and Enterprise subscribers. Describe what you want in plain language, Claude generates it on a canvas, and you refine using chat, inline comments, direct edits, or adjustment sliders. Export to PDF, PPTX, HTML, or Canva.
Real-World Example: A trainer needs a 5-slide pitch deck for a new workshop. She opens Claude Design and types: "Create a 5-slide presentation for a leadership workshop. Slides: title with bold headline, problem statement, 3-module overview, participant testimonials, and call-to-action. Professional tone, dark navy background, white text." Claude generates the deck on the canvas in seconds. She refines the headline wording and exports to PPTX for her next client meeting.
Q: What is the main difference between Claude Design and Artifacts?
Artifacts generate interactive HTML, documents, and code inside the Claude chat as quick single-page outputs. Claude Design is a dedicated visual workspace with a full canvas, multiple editing modes, and export options, built for multi-page visual projects that need brand consistency and iteration.
Think about the visual materials you create for your work. Presentations, social media posts, flyers? How much time do you spend on design tools like Canva or PowerPoint? What would change if you could describe what you want and get a professional draft in seconds?
Building Your Design System
The most powerful feature in Claude Design is the
design system. A design system is a set of rules that defines your brand: colours, fonts, components, and layout patterns. Once set up, every project you create in Claude Design automatically follows your brand guidelines. No more recreating styles from scratch.
What a design system includes. When you set up a design system, Claude extracts and organises four categories from your brand materials:
Colour palette: Your primary, secondary, and accent colours. Claude identifies these from your existing materials and creates a consistent palette.
Typography: Font families, sizes, and weights for headings, body text, and captions.
Components: Reusable elements like buttons, cards, navigation bars, and call-to-action blocks that match your brand.
Layout patterns: Spacing rules, grid systems, and page structures that keep everything aligned and professional.
How to set up your design system.
Step 1: Open Claude Design. Go to
claude.ai/design and log in with your Pro, Max, Team, or Enterprise account.
Step 2: Create or select your organisation. Click your organisation name in the lower-left corner of the project picker. Select your organisation or create a new one, then follow the onboarding flow.
Step 3: Upload your brand assets. During onboarding (or later in organisation settings), upload materials that define your brand. You can use any combination of:
Your
website URL or screenshots of your site.
Slide decks or documents (PowerPoint or PDF) that reflect your brand style.
Logos, colour swatches, and typography specimens. A
codebase if your design system lives in code (for example, a React component library). You only need one source to start. Multiple sources give better results.
Step 4: Review the generated system. Claude analyses your uploads and creates a UI kit with your colour palette, typography, components, and layout patterns. Review it and make adjustments by chatting with Claude.
Step 5: Publish. Toggle the "Published" setting on. Once activated, all new projects created in Claude Design within your organisation automatically use your custom design system.
Test your design system. Create a few test projects to check that the colours, fonts, and layouts match your brand. Good test prompts include: "Create a landing page for [your product]," "Design a dashboard showing [relevant metrics]," or "Make a presentation about [a topic you commonly present on]." If the results do not match your expectations, upload additional brand assets or chat with Claude to adjust the system.
Key Insight: A design system defines your brand colours, typography, components, and layout patterns. Set it up once by uploading brand assets (website URL, slides, logos, style guides) during onboarding. Publish it, and every new project in Claude Design automatically follows your brand guidelines.
Real-World Example: A coaching company uploads three things to set up their design system: their website URL, a past conference slide deck, and a one-page brand guide with their logo, hex colours (#1A2B4A navy, #FF6B35 orange), and preferred fonts (Inter for body, IBM Plex Serif for headlines). Claude analyses these and generates a complete UI kit. The coach publishes the system. Now when she creates any new presentation, flyer, or social media graphic, Claude automatically uses her brand colours, fonts, and layout style.
Q: What happens after you publish a design system in Claude Design?
Once you toggle the "Published" setting on, all new projects created in Claude Design within your organisation automatically inherit your design system. You do not need to select or apply it manually. Every new design follows your brand colours, fonts, components, and layout patterns from the start.
Think about your current brand materials. Do you have a consistent look across your presentations, social media, and documents? What brand assets would you upload to Claude Design to create your design system?
Creating Marketing Materials
With your design system in place, you can now create professional marketing materials that are automatically on-brand. Let us walk through the most common types.
Presentation slide decks. This is one of the most popular uses of Claude Design. Describe the deck structure and Claude generates a coherent visual layout for each slide. A strong prompt includes the number of slides, the content for each slide, and the intended audience.
Example prompt: "Create a 6-slide workshop pitch deck. Slide 1: bold title with tagline. Slide 2: the problem we solve. Slide 3: our 3-module approach. Slide 4: trainer credentials and testimonials. Slide 5: pricing table. Slide 6: call-to-action with contact details. Audience: HR managers. Tone: professional and confident."
Refinement typically takes 10 to 20 minutes to reach presentation-ready quality. You can ask Claude to rearrange slides, change layouts, or adjust content through the chat panel.
Social media graphics. Claude Design creates graphics sized for specific platforms. Tell Claude the platform (Instagram, LinkedIn, Facebook) and it uses the correct dimensions. You can create single images or a set of carousel slides.
Example prompt: "Create a set of 4 LinkedIn carousel slides promoting a cybersecurity workshop. Each slide should have one key statistic, a short headline, and our brand colours. End with a call-to-action slide."
Flyers and one-pagers. For events, promotions, or service overviews, describe the content and layout. Claude creates a print-ready design with your brand elements.
Example prompt: "Design a one-page flyer for a financial planning seminar. Include: event title, date and venue, 4 key topics covered, speaker bio with photo placeholder, QR code placeholder for registration, and contact details. A4 size, portrait orientation."
Landing pages and web mockups. Claude Design can create web page mockups with sections, call-to-action buttons, and responsive layouts. These are visual prototypes, not functional websites, but they can be handed off to Claude Code for development.
Using references for better results. Claude Design works dramatically better when you give it reference material rather than starting from a blank slate. Upload screenshots of designs you like, competitor examples, or your past materials. Tell Claude: "Use this as a reference for style and layout, but apply my brand colours and fonts."
Watch video: Creating Marketing Materials
Key Insight: With a published design system, all materials are automatically on-brand. Create slide decks, social media graphics, flyers, landing pages, and web mockups by describing the structure, audience, and tone. Upload reference materials for better results.
Real-World Example: A consultant creates three marketing materials in one afternoon. First, a 5-slide pitch deck for an upcoming workshop. Then, a set of 4 LinkedIn carousel slides to promote it. Finally, an A4 flyer for the venue. All three use her brand colours, fonts, and layout patterns automatically because her design system is published. She exports the deck as PPTX, the carousel slides as individual images, and the flyer as PDF.
Q: What is the recommended approach for getting better results from Claude Design?
Claude Design works dramatically better with reference material. Upload screenshots of designs you like, competitor examples, or your past work. Combine this with a specific prompt that includes the design type, number of pages or slides, content for each section, audience, and tone.
Think about the next presentation or marketing material you need to create. How would you structure the prompt? What reference materials would you upload to guide Claude Design?
Editing and Refining Your Designs
Claude Design gives you four ways to refine your work. The first output is rarely perfect, but iteration is fast because you have multiple editing modes to choose from.
1. Chat iteration. The simplest way to make changes. Type what you want in the chat panel and Claude updates the canvas. This is best for broad structural changes.
Examples: "Rearrange the dashboard so the metrics appear in the top row." "Add a testimonial section between slide 3 and slide 4." "Make the overall design feel more modern and spacious."
2. Inline comments. Click directly on a canvas element and leave a targeted comment. This works like review mode in Google Docs. You can annotate multiple elements in one pass, then tell Claude to batch-apply all changes.
Examples: Click on a button and write "Make this 20% wider with rounded corners." Click on a heading and write "Change to sentence case." Annotate three cards and write "Align these to the same height."
3. Direct text editing. Click a text element on the canvas, then click the text again to enter edit mode. Type your replacement directly. This does not use an AI call, so it is instant. Use it for fixing typos, swapping in your own copy, or testing wording variants.
4. Adjustment sliders. Click an element and then the Adjust icon. Claude generates element-specific sliders. For a card component, you might get sliders for padding, corner radius, shadow depth, and background tint. For a chart, you might get bar spacing, label rotation, and colour saturation. Drag the sliders and the element updates live.
Four editing modes: Chat for structural changes, Inline Comments for targeted fixes, Direct Editing for text, Adjustment Sliders for visual fine-tuning
The propagate trick. This is the most powerful feature for non-designers. After you make a change to one element, ask Claude in the chat panel: "Apply these adjustments across the whole deck." Claude propagates your tweak to every equivalent element in the project. For example, if you adjust the padding on one card, Claude applies the same padding to all cards. If you change a header style on one slide, Claude updates all slide headers. This turns a single edit into a design-system-level change.
Visual annotations. For spatial changes, you can draw directly on the canvas. Draw an arrow from one element to another and write "swap these two positions." Circle an area and write "move this section to the middle." Draw a box on empty space and write "add a testimonial card here."
Key Insight: Four editing modes: Chat iteration for broad changes, Inline Comments for targeted fixes, Direct Text Editing for instant copy changes, and Adjustment Sliders for visual fine-tuning. Use "apply across" to propagate a single change to every equivalent element in the project.
Real-World Example: A coach reviews her 6-slide pitch deck and makes three types of edits. She uses Direct Text Editing to fix a typo on slide 2 (instant, no AI needed). She clicks on a card element and uses the Adjustment Sliders to increase padding and round the corners. Then she tells Claude in chat: "Apply this card style across all slides." Claude propagates the padding and corner radius to every card in the deck. Total refinement time: 8 minutes.
Q: What does the "apply across" command do in Claude Design?
When you adjust one element (like changing card padding or a header style), asking Claude to "apply across the whole deck" propagates that change to every equivalent element in the project. This turns a single edit into a design-system-level change, so all cards get the same padding and all headers get the same style.
Think about the last time you edited a presentation or flyer. How long did it take to make the same style change across every slide or section? How would the "apply across" feature change your editing workflow?
Exporting and Maintaining Your Brand
Your design is polished and on-brand. Now you need to get it out of Claude Design and into the hands of your audience. Claude Design offers several export paths, each suited to a different use case.
Export formats.
PDF is the best choice for print materials like flyers, brochures, and one-pagers. It preserves your layout exactly as designed.
PPTX (PowerPoint) is ideal for slide decks. The exported file opens in PowerPoint or Google Slides, where you can make final adjustments or present directly.
HTML exports your design as a standalone web page. This is useful for email-friendly layouts, internal dashboards, or quick web prototypes.
Canva sends your design directly to Canva, where you or your team can make further edits using Canva's tools. This is the best path if your team already uses Canva for design work.
ZIP folder downloads all assets (images, styles, files) as a compressed package.
Shareable link generates a URL you can send to colleagues. You control access levels: view-only, comment, or edit.
Handoff to Claude Code. If your design is a web page or app prototype, you can hand it off directly to Claude Code. Claude Code takes the visual design and generates the actual HTML, CSS, and JavaScript to build it as a working website or application. This is the bridge from visual mockup to functional product.
Maintaining your design system. Your brand will evolve over time. Colours change, new fonts are adopted, layouts are refreshed. To update your design system:
Go to your organisation settings in Claude Design. Click "Open" next to your design system. Select "Remix" to open the chat interface for modifications. Tell Claude what to change: "Update the primary colour from #1A73E8 to #0F5ABE" or "Add a new card component with a gradient background." Publish the updated system.
All future projects will use the updated design system. Existing projects keep the version they were created with, so completed work is not affected.
Sharing across your team. On Team and Enterprise plans, your published design system is available to all members. Everyone creates materials that follow the same brand guidelines without manual checks. This solves one of the most common brand consistency problems: different team members producing materials with slightly different colours, fonts, or layouts.
Practical weekly workflow. Here is how Claude Design fits into a typical work week:
Monday: Review your content calendar and identify materials needed for the week.
Tuesday-Wednesday: Create the materials in Claude Design. Start with the most complex one (usually a presentation deck) and work down to simpler items (social media graphics, one-pagers).
Thursday: Refine and get feedback from colleagues using shareable links.
Friday: Export final versions and schedule or distribute.
Key Insight: Export to PDF (print), PPTX (presentations), HTML (web), Canva (team editing), or shareable links. Hand off web designs to Claude Code for development. Update your design system anytime through organisation settings. On Team and Enterprise plans, the design system is shared across all members for consistent branding.
Real-World Example: A training company finishes a workshop promotion kit in Claude Design. They export the pitch deck as PPTX for the sales team, the event flyer as PDF for printing, and the social media graphics as a Canva handoff for the marketing assistant to schedule posts. The landing page mockup goes to Claude Code for development. All five deliverables use the same brand colours, fonts, and layout patterns because they all inherit the same design system.
Q: What happens to existing projects when you update your design system in Claude Design?
When you update your design system, existing projects keep the version they were created with. Only future projects inherit the updated system. This means your completed work is not affected by design system changes, while all new materials automatically use the latest brand guidelines.
Think about how your team currently creates marketing materials. Does everyone use the same colours, fonts, and layouts? How would a shared, published design system change the consistency of your brand across different team members and materials?
Module 3: AI Coworker Enhanced
Turn Claude into an autonomous coworker that handles tasks on your desktop, in your browser, and across your apps.
Install Claude Desktop and unlock four powerful capabilities: Cowork for autonomous multi-step task delegation, Browser Use for hands-free web navigation, Computer Use for controlling any desktop application, and Live Artifacts for real-time dashboards connected to your data.
Learning Objectives - Install Claude Desktop and understand its three modes: Chat, Cowork, and Code
- Delegate multi-step tasks to Claude Cowork with connected services and scheduled automation
- Let Claude browse the web autonomously using Browser Use
- Automate any desktop application using Computer Use screen interaction
- Build persistent, data-connected dashboards with Live Artifacts
What You'll Learn - Claude Desktop - Your Local AI Hub
- Claude Cowork - Your Autonomous AI Agent
- Browser Use - Hands-Free Web Navigation
- Computer Use - Automate Any App on Your Screen
- Live Artifacts - Real-Time Dashboards That Stay Current
Claude Desktop - Your Local AI Hub
So far, everything we have covered - Projects, Artifacts, Skills, and Design - runs through a browser at claude.ai. But what if Claude could work directly on your computer, reading your local files, running in the background, and connecting to your installed apps? That is exactly what
Claude Desktop does.
Claude Desktop is a standalone application for
macOS and Windows. Both versions launched in October 2024. 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.
Three modes inside one app. Claude Desktop is not just a chat window. It gives you three distinct modes:
Claude Desktop combines Chat, Cowork (autonomous agent), and Code (developer tool) in a single app
Chat is the same conversational experience you know from claude.ai, but accessible from your dock or taskbar without opening a browser.
Cowork is an autonomous background agent that delegates multi-step tasks. It reads your local files, connects to cloud services, and works while you step away. This is where Browser Use, Computer Use, and Live Artifacts all live.
Code is Claude Code with a graphical interface - a developer tool for building and editing software with direct access to your project files.
Desktop-exclusive features. Beyond the three modes, the desktop app adds capabilities you cannot get in the browser:
•
Quick Entry (macOS only) - Double-tap the Option key from any app to pop up a Claude input box. Ask a question without switching windows. The shortcut is customisable in settings.
•
MCP Extensions - Pre-packaged plugins that install with a double-click. Thousands of extensions available. Browse them by clicking "+" then "Extensions" when starting a new chat.
Pricing. Claude Desktop is
free to download for all users. The Chat mode works on the Free plan. However, the advanced features we cover in this module -
Cowork, Browser Use, Computer Use, and Live Artifacts - require a
paid plan (Pro at USD 20/month, Max at USD 100–200/month, Team, or Enterprise).
Watch video: Claude Desktop - Your Local AI Hub
Key Insight: Claude Desktop is a free native app for macOS and Windows with three modes: Chat (conversation), Cowork (autonomous agent), and Code (developer tool). Desktop-exclusive features include Quick Entry and MCP Extensions. Cowork, Browser Use, Computer Use, and Live Artifacts all 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 modes available inside Claude Desktop?
Claude Desktop has three modes: Chat (same as claude.ai but on your desktop), Cowork (autonomous agent for delegating multi-step tasks), and Code (Claude Code with a visual interface for software development).
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 without uploading anything?
Claude Cowork - Your Autonomous AI Agent
Claude Desktop gives Claude access to your computer. Cowork is the mode 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 switch to Cowork mode. Describe what you want done: "Organise my Downloads folder: move all PDFs to Reports, all spreadsheets to Data, and delete files older than 90 days." Claude creates a plan, shows you the steps, and asks for confirmation. Once you approve, Claude works through the steps autonomously in a sandboxed environment on your machine.
Connected services. Cowork connects to your cloud services too. Supported connectors include Gmail, Google Drive, Calendar, Docs, Sheets, Outlook, Teams, SharePoint, OneDrive, Slack, Notion, Confluence, Salesforce, HubSpot, Jira, GitHub, DocuSign, Box, and Dropbox. Claude works with both local files and cloud services in the same task.
Scheduled tasks. Cowork supports recurring tasks - set them up once and they run automatically. Click "+" and select "Schedule a task", or type /schedule in chat. Example: "Every Monday morning, check my Gmail for unread client emails and create a priority summary." Scheduled tasks run as long as your computer is on and Claude Desktop is open.
Cowork Projects. Organise related tasks into Cowork Projects - persistent workspaces with their own files, links, instructions, and memory. Unlike regular sessions that start fresh, a Project remembers context. Create a "Monthly Reporting" project with your template and data sources, and Claude applies them every time.
Practical workflows. Professionals use Cowork for file organisation ("Move all receipts to Expenses/2026 and contracts to Clients/Active"), document synthesis ("Read five meeting notes and extract all action items"), and research ("Compare three PDF papers in a literature review"). The pattern: describe the outcome you want, not the individual steps. Claude figures out the steps and executes after your approval.
Watch video: Claude Cowork - Your Autonomous AI Agent
Key Insight: Cowork is an autonomous agent inside Claude Desktop. It delegates multi-step tasks: file organisation, document synthesis, research, and more. It connects to cloud services (Gmail, Slack, Drive, Calendar, Notion, and many more), supports recurring scheduled tasks, and organises work into persistent Cowork Projects.
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 via Gmail." 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, 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?
Browser Use - Hands-Free Web Navigation
Cowork can read your local files and connect to cloud services through built-in connectors. But what about websites that do not have a connector? That is where
Browser Use comes in. It is a
Chrome extension that lets Claude browse the web on your behalf - navigating pages, clicking buttons, filling out forms, and extracting information.
How it works. Install the Claude extension from the Chrome Web Store and sign in. Once installed, Claude can interact with any website in Chrome. Open the extension panel and describe what you want: "Go to the company directory, find the marketing team contacts, and put them into a spreadsheet." Claude navigates the pages, reads content, clicks through links, and delivers the result.
Tab group management. Drag multiple open tabs into Claude's designated tab group, and Claude can see and interact with all of them simultaneously. Perfect for research: "I have five competitor websites open. Compare their pricing pages and summarise the differences."
Workflow recording. For tasks you repeat regularly, Claude can learn your steps. Click the record icon, perform your browser workflow manually, then stop recording. Claude saves the sequence as a reusable shortcut that it can repeat for you.
Scheduled browser tasks. Set up recurring browser automations via the clock icon. Schedule tasks daily, weekly, monthly, or annually. Example: "Every morning at 8 AM, check these three industry news sites and compile the top headlines."
Planning mode. For complex browser tasks, enable "Ask before acting." Claude creates a plan, shows it to you for approval, then executes independently within those boundaries.
How Browser Use differs from Computer Use. Browser Use operates
within Chrome only - web pages and tabs. Computer Use controls your
entire desktop - any application. Browser Use is faster because it reads page structure directly rather than taking screenshots. Use Browser Use for web tasks; Computer Use for everything else.
Requirements. Chrome browser, Claude extension installed, and a paid plan (Pro, Max, Team, or Enterprise).
Watch video: Browser Use - Hands-Free Web Navigation
Key Insight: Browser Use is a Chrome extension that lets Claude navigate websites, click buttons, fill forms, and extract information hands-free. Key features include tab group management, workflow recording, and scheduled browser tasks. It is faster and more reliable than Computer Use for web-specific tasks.
Real-World Example: A trainer needs to register for five upcoming industry conferences. She opens all five registration pages in Chrome, drags them into Claude's tab group, and says: "Fill in the registration forms on all five tabs using my details: [name, email, company]. Submit each one." Claude navigates each tab, fills in the fields, and submits the forms - all while she works on something else.
Q: How does Browser Use differ from Computer Use?
Browser Use operates within Chrome only - it works with web pages and tabs. Computer Use controls your entire desktop screen and can interact with any application. Browser Use is faster for web tasks because it interacts with page structure directly, while Computer Use relies on screenshots.
Think about a web-based task you do repeatedly - checking competitor prices, filling out forms, or researching industry news. How would you describe it to Claude as a Browser Use workflow?
Computer Use - Automate Any App on Your Screen
Cowork connects to cloud services through connectors. Browser Use handles websites. But what about desktop applications with no connector and no web version? That is where Computer Use comes in. It gives Claude the ability to see your screen, click buttons, type text, and scroll through any application on your computer.
Computer Use launched as a research preview on 23 March 2026 for Pro and Max subscribers, on both macOS and Windows.
How Computer Use works. It operates in a perception-action loop: Claude takes a screenshot, decides the next action (click, type, scroll), performs it, takes another screenshot to see the result, and repeats until done. This means Claude can work with any application - even ones it has never seen before.
How Cowork chooses the right method. When you give Cowork a task, it picks the fastest path:
• Connectors first - Direct API access to Gmail, Slack, Google Drive, etc. Fastest and most reliable.
• Browser Use second - For websites without a connector. Reads page structure directly.
• Computer Use last - Screen interaction for everything else. Each cycle takes 2–5 seconds, so a 30-second human task might take Claude 2–3 minutes. Powerful but patient.
What Computer Use can do:
• Fill in forms - Expense reports, registration pages, booking forms across any app.
• Navigate unfamiliar apps - Open menus, find features in apps Claude has never seen.
• Transfer data between apps - Copy from one application to another with no integration.
• Automate repetitive clicks - Same sequence of actions across dozens of records.
Safety and permissions. Claude asks before accessing each new application. You can block specific apps - investment platforms and cryptocurrency apps are blocked by default. Before any action with real-world consequences, Claude shows you its plan and waits for approval.
Tips for best results. Keep your desktop tidy. Close unnecessary windows. Describe the outcome, not the steps. Use connectors or Browser Use whenever possible - reserve Computer Use for apps that have no other option.
Watch video: Computer Use - Automate Any App on Your Screen
Key Insight: Computer Use (March 2026 research preview) lets Claude see your screen and interact with any application by clicking, typing, and scrolling. Cowork prioritises: connectors first (fastest), Browser Use second (web tasks), Computer Use last (any app). Each screenshot-action cycle takes 2–5 seconds.
Real-World Example: A consultant needs to submit 15 expense reports through her company's internal desktop portal that has no web version and no API. She tells Cowork: "Open the expense portal, fill in each report from the Expenses spreadsheet on my Desktop, and submit them." Claude uses Computer Use to navigate the portal, fill in each form field, attach receipts, and click Submit for each report. She reviews the first one, approves, and Claude handles the rest.
Q: In what order does Cowork choose how to interact with apps and services?
Cowork uses a priority order: connectors first (direct API access - fastest), Browser Use second (for websites without connectors), and Computer Use last (clicking, typing, scrolling on your screen - slowest but works with any app). This ensures the fastest and most reliable method is always tried first.
Think about a repetitive task you do on your computer that involves multiple clicks across different applications. How would you describe it to Claude as a single Cowork task?
Live Artifacts - Real-Time Dashboards That Stay Current
In Module 1, you learned about
Artifacts - the interactive outputs Claude creates during conversations. Documents, spreadsheets, web pages, diagrams. But regular Artifacts have a limitation: they are
static snapshots. The data is frozen at the moment Claude created them. If your sales numbers change tomorrow, the Artifact does not update.
Live Artifacts solve this problem. Launched on
20 April 2026, they are persistent, data-connected dashboards inside Cowork. Unlike regular Artifacts that exist only within a chat, Live Artifacts have their own tab in the Cowork sidebar and refresh with current data every time you open them.
Regular Artifacts are frozen snapshots; Live Artifacts refresh with real-time data
How Live Artifacts work. They connect to your data through
MCP (Model Context Protocol) servers - the same extension system we mentioned earlier. Claude connects a Live Artifact to one or more data sources: a Google Sheet, a database, a Shopify store, or a Gmail inbox. Every time you open it, it pulls fresh data from those sources.
What you can build:
•
KPI dashboards - Connect to your spreadsheet or database and see key metrics update automatically.
•
Pipeline trackers - Pull data from your CRM and visualise where each deal or task stands.
•
Content calendars - Connect to your Google Calendar and content spreadsheet for a unified editorial view.
•
Consolidated views - Combine data from multiple sources (e.g., Facebook Ads + Shopify) into a single dashboard.
Creating a Live Artifact. In Cowork, describe what you want: "Create a live dashboard showing my weekly sales from this Google Sheet, with a bar chart for revenue by product and a table of the top 10 orders." Claude builds the dashboard and saves it in the "Live artifacts" tab in the Cowork sidebar. You can modify it anytime, and it keeps a
version history so you can track changes or restore earlier versions.
Practical tip. Start simple. Your first Live Artifact might be a single metric from one spreadsheet. Once you see how it works, gradually connect more data sources. Live Artifacts grow with your needs - from a single number to a full dashboard.
This wraps up Module 3. You now have five powerful tools in your desktop toolkit: Claude Desktop as the hub, Cowork for autonomous task delegation, Browser Use for hands-free web navigation, Computer Use for controlling any app on your screen, and Live Artifacts for real-time dashboards. In Module 4, we build real applications with Claude Code.
Watch video: Live Artifacts - Real-Time Dashboards That Stay Current
Key Insight: Live Artifacts (launched April 2026) are persistent, data-connected dashboards inside Cowork. Unlike regular Artifacts (static snapshots), Live Artifacts refresh with current data via MCP connections to spreadsheets, databases, and cloud services. They live in their own tab and have version history.
Real-World Example: A training company owner creates a Live Artifact: "Build a dashboard from my Google Sheet showing monthly enrolments by course, revenue this quarter, and a list of upcoming sessions." Every morning when she opens Claude Desktop, the dashboard shows the latest numbers - no manual updates needed. When she adds a new course to the spreadsheet, it appears on the dashboard automatically.
Q: What is the main difference between a regular Artifact and a Live Artifact?
Regular Artifacts are static snapshots - the data is frozen at the moment Claude created them. Live Artifacts connect to data sources through MCP and refresh with current data every time you open them. They live in their own tab in the Cowork sidebar and have version history.
Think about information you check regularly - sales numbers, project status, email metrics, content schedules. Which of these would benefit most from a Live Artifact that updates automatically?
Module 4: Vibe Code Your Website
Plan, build, and publish a real website by describing it in plain English.
Plan an effective website using AI, then build it with Claude Code by describing what you want in plain English. Refine the design until it matches your vision, and publish it online with GitHub Pages so anyone can visit it.
Learning Objectives - Plan an effective website using AI
- Create and refine your website using Claude Code
- Publish and host your website online with GitHub Pages
What You'll Learn - Plan Your Website with AI
- Setting Up Claude Code
- The Vibe Coding Workflow
- Landing Pages, Portfolios, and Multi-Page Sites
- Polish, Test, and Iterate
- Publish with GitHub Pages
Plan Your Website with AI
In the first three modules, you worked with tools that Claude provides - Skills, Design, Browser Use, Computer Use. Now you build something of your own: a real website, live on the internet. But before you write a single prompt to Claude Code, you need a plan.
A website built without a plan looks like one: pages that ramble, no clear next step for the visitor, and endless revisions. Thirty minutes of planning with AI saves hours of rebuilding. Here is what to pin down.
1. Define the purpose - one goal. Every effective website drives one primary action: book a discovery call, register for a workshop, download a lead magnet, or buy a course. Complete this sentence: "When someone visits my website, I want them to ___." Every page, headline, and button serves that goal.
2. Know your audience. Who is this website for? A corporate HR manager evaluating trainers reads very differently from a young professional looking for a career coach. Note who they are, what problem brings them to you, and what would convince them to act.
3. Map your pages. List the pages and what each one must contain. A typical professional site needs only four or five: Home (who you help and how, plus your call-to-action), About (your story and credentials), Services (what you offer and the outcomes), and Contact (how to reach you). Resist adding more - fewer pages, clearer message.
4. Draft your copy with Claude. The fastest way is to let Claude interview you. Open a chat and prompt: "I am building a website for my training business. Interview me one question at a time about my audience, services, and what makes me different. Then write the copy for a Home, About, Services, and Contact page, with a headline and call-to-action for each." Answer the questions, and Claude produces draft copy you can refine.
5. Gather your assets. Collect your photo or headshot, your logo if you have one, brand colours, testimonials, and any credentials worth showing. Claude Code will set up placeholders for these, but having them ready means your site looks finished sooner.
When you are done, save the plan - the goal, audience notes, page map, draft copy, and asset list - in a document. In the sections ahead, this plan becomes the prompt material you feed to Claude Code.
Watch video: Plan Your Website with AI
Key Insight: Plan before you build: define one primary goal, know your audience, map four or five pages, draft the copy with Claude, and gather your assets. Thirty minutes of planning saves hours of rebuilding.
Real-World Example: A leadership trainer wants more discovery calls. Her goal sentence: "When someone visits my website, I want them to book a free 30-minute call." She maps four pages - Home, About, Services, Contact - and lets Claude interview her to draft the copy. By the end of the session she has a one-page plan with headlines, page content, and a clear call-to-action repeated on every page.
Q: What is the "one goal" rule when planning a website?
Effective websites drive one primary action - book a call, register, download, or buy. Define that goal first, then design every page, headline, and button around it.
Complete this sentence for your own business: "When someone visits my website, I want them to ___." How would your current online presence change if every page pointed to that one action?
Setting Up Claude Code
With your plan ready, meet the tool that will build it.
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 - you describe what you want in plain English, and Claude writes the code for you.
The easiest way: Claude Desktop. You already installed the Claude Desktop app in Module 3. It includes Claude Code built in - no terminal and no extra installation.
Step 1: Open the Claude Desktop app and select
Code.
Step 2: Choose a folder for your project, or create a new one like "my-website". This is your workspace - Claude Code can read and create any file inside it.
Step 3: Type your request in plain English, exactly like chatting with Claude.
That is the whole setup. 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.
The alternative: VS Code. If you prefer working in a full code editor, install
Visual Studio Code (free), open the Extensions panel with
Ctrl+Shift+X (Windows) or
Cmd+Shift+X (Mac), and install the "Claude Code" extension by Anthropic. The experience is similar - a Claude panel beside your files - with more visibility into the code itself. Either path works for this course; pick whichever feels comfortable.
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
Key Insight: Claude Code builds software from plain-English descriptions. The easiest way to use it is inside the Claude Desktop app: open Code, pick a project folder, and type your request. A Pro plan or higher is required. Use Plan mode to review changes before they happen.
Real-World Example: A trainer opens Claude Desktop and clicks Code. She creates a folder called "my-website" and selects it. In the input box she types: "What can you help me build?" Claude responds with suggestions: landing pages, portfolios, multi-page websites, and more. No terminal, no installation - she is ready to start building.
Q: What is the easiest way to start using Claude Code without a terminal?
Claude Code is built into the Claude Desktop app. Open Code, choose a project folder, and type your request in plain English. The VS Code extension is an alternative if you prefer a full code editor. Either way, you need a Pro plan or higher.
Have you ever wanted to build a website but felt intimidated by the technology? What would you create first if you could simply 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 landing page" or "Create a portfolio site."
2. Describe the key features. "A hero section with my headline, three service cards, client testimonials, and a contact form."
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 landing page for my leadership training business. Include a hero section with the headline Lead with Confidence and a Book a Call button, a section describing my three services, three testimonial cards, and a contact form with name, email, and message. Use a professional navy blue and white colour scheme. Make it mobile-friendly."
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 website, double-click the HTML file in your project folder 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 one-page website for my career coaching practice. Hero section with my name and tagline, an About paragraph, three service cards (CV review, interview preparation, career strategy), and a contact form. Navy blue header, clean white design, mobile-friendly." Claude generates the complete page in under a minute. 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.
Landing Pages, Portfolios, and Multi-Page Sites
With your plan from the start of this module ready, it is time to build. Claude Code can create complete websites - landing pages, portfolios, lead magnets, and multi-page sites.
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 photo gallery section with a lightbox view."
• "Add smooth scrolling when visitors click a navigation link."
• "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.
Your website now looks and works the way you want - on your computer. The final step is putting it on the internet so anyone can visit it. That is exactly what the next section covers.
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 her workshop website 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?
Publish with GitHub Pages
Your website works on your computer. Now let us put it on the internet so anyone with a link can visit 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 website 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 "coaching-website" or "leadership-training." 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 website 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: Visit your live site. After a minute or two, your website will be live at:
https://yourusername.github.io/your-repo-name/. Share this link with anyone - they can visit your site 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.
This wraps up Module 4. You planned a website, built it with Claude Code, refined it, and published it for the world to see. GitHub Pages is perfect for static websites like these. In Module 5, you go further: plan a web app with a PRD, build it, add AI features, and deploy it with Vercel - a platform that can also keep your AI keys secure.
Watch video: Publish 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 her workshop website 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 site is live at janedoe.github.io/wellness-retreat. She shares the link in her email newsletter and visitors start arriving.
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 website? Would yourusername.github.io/site-name work, or would you want a custom domain? If you already own a domain, consider pointing it to GitHub Pages.
Module 5: Deliver Apps, AI Inside
Plan your app with a PRD, build it with AI features, and deploy it live with Vercel.
Plan your web app with a Product Requirements Document (PRD), build it with Claude Code, add AI features like chatbots and smart forms using OpenRouter, and deploy it live for the world to use with Vercel.
Learning Objectives - Plan your web app using a Product Requirements Document (PRD)
- Build and enhance your app with AI features using OpenRouter
- Deploy your app live for the world to use with Vercel
What You'll Learn - Plan Your App with a PRD
- Build Your App with Claude Code
- Adding AI Features with OpenRouter
- Deploy Live with Vercel
- Testing with Real Users
- The Feedback Loop - Collect, Fix, Repeat
Plan Your App with a PRD
In Module 4, you built and published a website. A website mostly
presents information. An app
does something: it scores a quiz, calculates a result, generates a recommendation, captures and stores data. That interactive logic gives Claude Code many more decisions to make - which is why apps deserve a better plan than a quick prompt.
Professional product teams solve this with a
Product Requirements Document (PRD) - a short, structured document that describes what to build and why, before anyone writes code. A PRD is not bureaucracy; for AI building, it is leverage. The clearer your requirements, the closer the first build lands to your intent.
What goes into a simple PRD:
•
Problem - What pain does this app solve, and for whom?
•
Target users - Who will use it, and in what situation?
•
Core features - The must-haves for version 1, and the nice-to-haves for later.
•
User flow - The steps a user takes from arriving to getting value.
•
Look and feel - Colours, tone, and mobile-friendliness.
•
Out of scope - What you are deliberately NOT building yet. This keeps the project focused.
What Goes Into a PRD
Generate your PRD with PRoDuce. Writing a PRD from scratch can feel daunting, so use
PRoDuce (produce.aicoach.my), an AI tool by AICoach.my that turns ideas into PRDs. Describe your app idea in plain language and PRoDuce produces a structured PRD ready to use. Review it, adjust anything that does not match your intent, and you have a professional requirements document in minutes.
Feed the PRD to Claude Code. Save the PRD as
prd.md inside your project folder. Then tell Claude Code: "Read prd.md and build this app. Start with the must-have features only." Claude reads the full document and builds with your problem, users, features, and scope in mind. The out-of-scope section is especially powerful - it stops Claude from over-building things you did not ask for.
Watch video: Plan Your App with a PRD
Key Insight: A PRD turns a vague app idea into a clear build plan: problem, target users, must-have features, user flow, look and feel, and what is out of scope. Generate one in minutes at produce.aicoach.my, save it as prd.md, and let Claude Code build from it.
Real-World Example: A consultant wants a "business readiness checker" for her prospects. She describes the idea to PRoDuce, which generates a PRD: the problem (prospects do not know if they are ready for her programme), users (SME owners on mobile), must-have features (15 questions, category scores, a recommendation), and out of scope (no login, no payments). She saves it as prd.md, points Claude Code at it, and the first build already matches her vision.
Q: What is a Product Requirements Document (PRD)?
A PRD describes what you are building and why, before any code is written: the problem, target users, must-have features, user flow, look and feel, and what is out of scope. Tools like PRoDuce (produce.aicoach.my) can generate one from your idea in minutes.
Think of one app that would genuinely help your clients or learners. What problem would it solve, and what is the single must-have feature for version 1? Try describing it to PRoDuce at produce.aicoach.my and see what comes back.
Build Your App with Claude Code
PRD in hand, it is time to build. Open Claude Code (in Claude Desktop or VS Code), make sure prd.md is in your project folder, and start with: "Read prd.md and build this app as a single HTML file. Implement only the must-have features." Then refine from there, exactly like you did with your website in Module 4.
Here are three classic app types that trainers, coaches, and consultants actually use - each one a single HTML file that works offline, with no server required.
App type 1: Quiz. Quizzes are the most common tool in training. A typical must-have list: 10 multiple-choice questions shown one at a time, a progress bar, correct and incorrect highlighting, a final score with a pass/fail message at 80%, and a retry button. To change content later, just tell Claude: "Replace question 3 with: What is the primary purpose of a SWOT analysis?" You never touch the code directly.
App type 2: Calculator or assessment tool. Many consultants use scoring tools. Example must-haves: 15 questions rated 1 to 5, grouped into 3 categories (People, Process, and Technology), a score per category and overall, and a results page with recommendations per score band (below 30 = Needs Improvement, 30-50 = Developing, above 50 = Ready). Claude builds the scoring logic, the results display, and even a PDF download button if your PRD asks for it.
App type 3: Lead capture app. Every professional needs leads. Example must-haves: a registration form (name, email, phone, company, and number of attendees), a confirmation message on submit, data saved to the browser's local storage, and a hidden admin page that lists all registrations in a table. Claude builds the form and the admin view - all in one file.
The single-file advantage. All three are self-contained HTML files. You can email them, host them anywhere, or open them directly in a browser. No installation, no database, no server setup - the fastest path from PRD to working tool.
Build in PRD order. Must-haves first, then test, then nice-to-haves. If Claude suggests extra features, check your out-of-scope list before saying yes. Scope discipline is what gets version 1 shipped.
Watch video: Build Your App with Claude Code
Key Insight: Build from your PRD: must-have features first, as a single HTML file. Quizzes, assessment calculators, and lead capture apps are the classic tools for trainers, coaches, and consultants - each self-contained and ready to use offline.
Real-World Example: A leadership trainer's PRD calls for a 15-question leadership style assessment with 4 options per question, scored into 4 categories: Directive, Coaching, Supporting, and Delegating. She tells Claude Code to read the PRD and build it. In minutes, she has a working assessment with a radar chart of the results and a paragraph explaining the dominant style - exactly as specified.
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 PRD to working tool.
Look at your PRD draft. Which of the three classic app types - quiz, assessment calculator, lead capture - is closest to your idea? What would your must-have list contain?
Adding AI Features with OpenRouter
Your app from the previous section works. Now we add the layer that makes it special:
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." The next section shows how Vercel makes this easy with serverless functions.
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 Live with Vercel
Your app works on your computer, and OpenRouter gives it AI features. Now deploy it so the world can use it. In Module 4 you used GitHub Pages, which is perfect for static websites. But an app with AI inside has a problem GitHub Pages cannot solve:
your OpenRouter API key must stay secret, and a static site sends everything - including the key - to the browser.
The answer is
Vercel - a free hosting platform that serves your app AND runs small pieces of server-side code called
serverless functions. Your API key lives safely on the server, never in the browser.
Step 1: Create your account. Sign up free at
vercel.com - the easiest way is "Continue with GitHub," which connects the two services in one step. The free Hobby plan is more than enough for this course.
Step 2: Prepare the project. Tell Claude Code: "Set up this project for Vercel deployment. Move the OpenRouter call into a serverless function that reads the API key from an environment variable, so the key is never exposed in the browser." Claude creates the function (a small file in an /api folder) and updates your app to call it.
Step 3: Push to GitHub. Put your project in a GitHub repository, exactly as you did in Module 4.
Step 4: Import to Vercel. On vercel.com, click "Add New → Project," select your repository, and click Deploy. In the project settings, add an environment variable named
OPENROUTER_API_KEY with your key as the value.
Step 5: Go live. In about a minute, your app is live at
https://your-project.vercel.app. Share the link - anyone can use your app, and nobody can see your API key.
Updating your app. This is the best part: push changes to your GitHub repository and Vercel automatically rebuilds and redeploys. The cycle is: edit with Claude Code → push to GitHub → live in a minute.
Custom domains. Like GitHub Pages, Vercel supports custom domains free of charge - add yours in the project settings and update your DNS records with your domain provider.
Which platform when? A simple rule: static website with no secrets → GitHub Pages. App with AI features or anything that needs a secret key → Vercel.
Watch video: Deploy Live with Vercel
Key Insight: Vercel hosts your app free and runs serverless functions that keep your OpenRouter API key secret on the server. Connect GitHub to Vercel once, and every push automatically redeploys your app at your-project.vercel.app.
Real-World Example: A trainer finishes her assessment app with an AI recommendation feature. She tells Claude Code to move the OpenRouter call into a serverless function, pushes the project to GitHub, and imports it on Vercel with her API key set as an environment variable. Two minutes later the app is live at readiness-checker.vercel.app. Prospects use the AI feature freely - and her key never appears in the browser.
Q: Why use Vercel instead of GitHub Pages for an app with AI features?
GitHub Pages serves static files only - anything it hosts, including an API key, is visible to the browser. Vercel adds serverless functions: your app calls the function, the function adds the secret key from an environment variable and forwards the request to OpenRouter.
What would you name your first deployed app? Imagine sharing your-app.vercel.app with a client this month. What reaction would tell you the app was worth building?
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 your changes to GitHub and Vercel redeploys 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 automate your work with Claude Skills, create designs with Claude Design, delegate tasks with Browser Use and Computer Use, build and publish websites with Claude Code, and plan, build, and deploy AI-powered apps with OpenRouter and Vercel.
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, redeploy with Vercel, 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.
