WebAI: Build a Front-End Learning Coach

Build a local AI coach with reusable HTML and CSS lesson Skills.

Introduction

30 Second Summary

A quick website question can turn into a long search through tutorials. Even a clear answer can leave you unsure how to practise what you learned.

In this project, you will build a local Front-End Learning Coach Persona for learning HTML and CSS in the webAI App. A reusable Skill turns each topic into a five-part lesson you can study and practise.

What You'll Build

Picture asking why CSS specificity matters and receiving a compact five-part lesson you can study and practise immediately.

By the end of this project, you'll have:

A Front-End Learning Coach that answers beginner HTML or CSS questions with a concise paragraph.
A reusable Teach-Back Lesson Skill that transforms any topic into five visible teaching sections.
A clear scope comparison that reveals whether a Skill continues shaping later prompts in the same chat.
Secret Mission: Put your understanding of Skill scope to the test in an optional challenge.

Are there any prerequisites?

You'll need an Apple Silicon Mac running macOS Tahoe (26) or later with at least 1 GB of available video memory. You also need granted access through the private preview before you can download the webAI App.

Basic HTML and CSS knowledge is enough to complete the project.

Before We Start

Before the hands-on work begins, this is your moment to choose the HTML or CSS topic your coach will help you learn. A clear reason gives your finished coach a personal target.

Verify and Set Up webAI

Your learning topic is ready. The webAI App needs a compatible Mac before it can power your coach.

A compatibility check catches access or hardware blockers before setup. A working local model proves Chat can answer before you build anything on top of it.

In this step, get ready to:

Confirm that your Mac meets the hardware requirements.
Gain private-preview access to install webAI.
Prepare Chat for a completed local-model reply.

Confirm your Mac can run webAI

webAI runs on Apple Silicon with macOS Tahoe 26 or later. It also needs at least 1 GB of available video memory.

Click the Apple menu in the top left corner of your screen.
Select About This Mac.
Confirm that the window includes a Chip entry.
Confirm that the installed operating system is macOS Tahoe 26 or later.

✔️ I see Apple Silicon and macOS 26 or later

Your Mac has the required processor. Its operating system also meets the minimum version.

Continue to the available-memory check below.

ⓧ I see a Processor entry

A Processor entry identifies an Intel Mac. This project requires Apple Silicon.

Pause this project until you can use an Apple Silicon Mac.

ⓧ I see macOS earlier than 26

This macOS version is below the requirement for webAI.

Update the Mac to macOS Tahoe 26 or later through Apple's supported update process.
Repeat the compatibility check after the update finishes.

Available video memory determines which catalog model the Mac can load. A model with a larger requirement may not fit the available hardware.

Check About This Mac for a separate available video memory value.
Open System Report if that value is not displayed.
Review the available hardware details in System Report.
Confirm that the available video memory is at least 1 GB if a separate value appears.
Record the displayed value here if it is available: your available video memory.
Use the model catalog's memory-fit display later if no separate available value appears.

webAI access is provided through a private preview. Approval time sits outside this project's hands-on estimate.

Check whether you have a granted webAI private-preview invitation.

✔️ My access is granted

Your granted access unlocks the installer needed for this project.

Download the supplied DMG file from your granted-access materials.

ⓧ I'm still waiting for access

The wait can pause your progress for an unknown amount of time. That delay does not count toward the project estimate.

Join the private-preview waitlist from the official webAI introduction page.
Return to this step after access is granted.

Install webAI and complete onboarding

The supplied DMG contains the native webAI app. Moving the app into Applications keeps it available after the installer closes.

Open the supplied DMG file on your Mac.
Drag the webAI app into Applications.
Open the Applications folder on your Mac.
Open webAI from Applications.
Sign in with the account that received private-preview access.
Complete the onboarding flow.
Select Chat to open it.

The setup hurdle is cleared: your signed-in webAI workspace is ready in Applications. You'll see Chat open for your first model check.

Having trouble opening webAI?

Confirm that you dragged webAI into Applications before opening it.
Confirm that you are signing in with the account that received private-preview access.
Reopen webAI from Applications if the DMG window is still in front of it.
Help me troubleshoot the webAI installation or sign-in flow.

Load a model and verify Chat

The model applied under Model is the local model that Chat uses on this Mac. The catalog shows each model's memory requirement so you can choose one that fits.

Check whether Chat already has a loaded model.

✔️ Chat already has a loaded model

Your local model is already ready to receive a prompt.

Keep Chat open for the final verification.

ⓧ Chat has no loaded model

The first model download can take a while. Its duration varies with the model size plus your connection speed.

Click your name in webAI.
Click Settings.
Select Model.

How model fit works

Each catalog choice shows its memory requirement. The footer also shows the Mac's free disk space.

A laptop mark identifies a model already stored on the computer. A download mark identifies a model that still needs to be downloaded.

Compare each model's displayed memory requirement with your available video memory if you recorded a value.
Use the catalog's memory-fit display if your Mac did not expose a separate value.
Choose a catalog model whose displayed memory requirement fits the Mac.
Click Apply.
Wait until Downloading model completes if the model needs to be downloaded.
Wait until Loading model completes.

You'll see the progress percentage finish. Chat now has a loaded model.

Model not becoming available?

Return to Model if Chat still has no loaded model.
Select a smaller catalog model whose displayed memory requirement fits the Mac.
Keep webAI open while the progress percentage changes.
Help me troubleshoot a webAI model that is not loading.

Before you send the verification message, what exact reply do you expect the loaded model to return?

Enter Reply with: webAI is ready in Chat's message field.
Send the message.

You'll see a completed reply containing webAI is ready. The completed reply proves the model is loaded.

Reply not completing?

Return to Model to confirm that loading has completed.
Apply a catalog model with a smaller displayed memory requirement if the current choice does not fit.
Send the verification message again after Chat shows a loaded model.
Help me troubleshoot why Chat is not completing the verification reply.

You cleared the compatibility check plus the local-model test. Next, you'll turn this working Chat setup into your Front-End Learning Coach.

Create Your Learning Coach

Your local model has already proved that the webAI App can generate a reply on this Mac. Now it needs a saved specialist that focuses on front-end learning.

A Persona gives the model a stable role. You will create a focused coach before adding reusable teaching behavior.

In this step, get ready to:

Give the coach a clear front-end teaching identity.
Keep its first setup focused on saved instructions.
Verify its one-paragraph response.

Define the coach's identity

Your coach's identity controls the kind of help it offers. A specific name makes the specialist easy to find again.

Click Personas in the webAI sidebar.
Click Create a persona.

You should see the Persona creation flow with the Name field ready for your new coach.

Enter Front-End Learning Coach in the Name field.
Enter friendly, concise, and encouraging in the voice section.
Enter teaching beginner HTML and CSS concepts and diagnosing simple front-end mistakes in the What is it for? field.
Advance to the tools stage using the form's forward control.

You should now see the tools stage. The saved purpose ties this Persona to beginner front-end learning.

Set the coach's focused instructions

Tools let a Persona take actions outside the chat. Documents give it added reference material.

Saved instructions are enough for this focused first version. This keeps the coach's baseline easy to evaluate.

Leave Tools empty.
Advance to the documents stage using the form's forward control.

You should see the documents stage with no tools selected.

Leave Documents empty.
Advance to the Persona update choice using the form's forward control.

You should now see the choices for how the Persona learns from your work. Manual updates keep future changes under your control.

Select No, I'll update it manually.
Advance to the System prompt editor using the form's forward control.

A System prompt stores the response rules attached to the coach. The deliberate one-paragraph rule creates a clear baseline for later comparison.

Replace the existing System prompt with You are a front-end learning coach for a learner with basic HTML and CSS knowledge. Explain concepts accurately in one short paragraph unless an active Skill requests another format. Use simple language and do not assume JavaScript knowledge.

The editor should now contain the complete rule set. Its final sentence keeps the coach accessible to someone without JavaScript knowledge.

Click Create.

That is your first specialist saved. The new Persona now has a focused role with a consistent response style.

Open and verify the Persona

Opening the Persona starts a chat governed by its saved System prompt. Your first question checks whether those instructions shape the response.

Click the Front-End Learning Coach card in Personas.

You should see a new chat with Front-End Learning Coach shown as the active Persona.

Before you send the question, predict whether the coach will use one paragraph or several sections.

Enter What does CSS specificity decide? in the message box.
Send the message.

You should see one concise paragraph written for a learner with basic HTML and CSS knowledge. Your learning coach is now following the exact baseline you configured.

Response Not Staying Concise?

Wait for the model to finish generating before judging the response format.
Confirm that the chat header shows Front-End Learning Coach.
Compare the saved System prompt with the exact text in this step.
Help me troubleshoot my Persona's response format.

Your coach now has a working one-paragraph baseline. Next, you will test where that format falls short as a repeatable lesson.

Capture the Baseline Response

Your Front-End Learning Coach Persona already answers a focused CSS specificity question in one concise paragraph. Now you need a baseline that shows how that style handles a complete lesson request.

The current System prompt forces a short paragraph for normal responses. This format cannot reliably expose the full five-part lesson structure.

In this step, get ready to:

Ask the Front-End Learning Coach for a practice-ready CSS specificity lesson.
Score the answer against a five-part lesson rubric.
Keep the baseline reply in the chat thread for a later comparison.

Send the baseline lesson request

A baseline records how the coach behaves before you add a reusable teaching method. It gives you evidence that you can compare with a more structured response later.

Before you send the prompt, do you think the coach's one-paragraph rule can make five separate lesson parts easy to spot?

Enter Explain CSS specificity and give me a way to practise it. in the message box of the open Front-End Learning Coach chat.
Send the message.
Wait for the reply to finish.

The reply stays in the coach's one-paragraph style. This is the intended shortfall.

No Skill shaped this reply. You now have a clean comparison point.

Check the five-part lesson rubric

A lesson rubric turns a vague impression into a visible check. Each heading represents a different part of a useful mini lesson.

What does the rubric check?

Plain-language explanation explains the topic in simple terms.
Tiny example shows the smallest useful HTML or CSS snippet.
Common mistake identifies an error a beginner could make.
Try it yourself provides a short practice task.
Check your answer gives the learner a way to review the task.

Scan the baseline reply for each exact rubric heading.
Count the headings that are clearly visible.
Leave the baseline reply in the current Persona chat.

The reply remains one paragraph. It does not reliably show all five named sections.

That gap is useful evidence for the comparison you make later.

Your baseline is preserved in the thread. Next, you'll create a reusable teaching format that fills these gaps.

Create and Test the Lesson Skill

The baseline in your Front-End Learning Coach proves that the Persona can explain CSS specificity. Its one-paragraph limit leaves out the repeatable five-part structure your lessons need.

A reusable Skill stores that teaching method once. You will build Teach-Back Lesson before proving its five headings appear in the isolated test preview.

In this step, get ready to:

Create a Teach-Back Lesson Skill for the Front-End Learning Coach.
Configure the five-heading instructions with Whole session behavior.
Test the Skill in its preview and verify the five-part lesson format.

Create the Teach-Back Lesson Skill

The Persona sidebar keeps reusable teaching methods close to the coach that uses them. You can create the new Skill without disturbing the one-paragraph baseline in the current chat.

In the open Front-End Learning Coach chat, click Skills in the Persona sidebar.
Click Add more.
Click Create a new skill.

You'll see the Skill editor where you can define the saved teaching method.

Enter Teach-Back Lesson in the Name field.
Enter Turn an HTML or CSS topic into a short explanation, example, mistake check, and practice task. in the Description field.

Configure the teaching method

Skill Scope controls how long its instructions stay active after you apply it. Whole session carries the teaching method into later messages in the same chat.

Paste the following exact text into the Instructions field: For every HTML or CSS topic, respond under exactly these five headings: Plain-language explanation, Tiny example, Common mistake, Try it yourself, and Check your answer. Keep the explanation beginner-friendly. Put the smallest useful HTML or CSS snippet in Tiny example. Make the practice task answerable in five minutes. Put the answer after the task so the learner can attempt it first.
Confirm that Scope shows Whole session.
Click Create skill.

Good progress: Teach-Back Lesson now exists as a reusable teaching method for your coach.

How Does the Teaching Method Work?

The five required headings give every lesson the same visible structure.
The tiny example turns an explanation into something the learner can inspect.
The practice task comes before the answer so the learner gets a chance to try.
The five-minute limit keeps each exercise small enough for a focused study session.

Skill Not Listed?

Confirm that the Name field contains Teach-Back Lesson.
Confirm that you clicked Create skill after completing the required field.
Help me find my new Skill in webAI.

Test the five-part lesson

The Test it preview checks the Skill without adding messages to History. This keeps the one-paragraph baseline available for the comparison in the next step.

Open the options menu for Teach-Back Lesson in the Skills list.
Click Test it.

Before you send the prompt, which instruction do you expect to control the preview: the one-paragraph Persona instruction or the five-heading Skill instruction?

Send Explain CSS specificity and give me a way to practise it. in the preview.

You'll see a reply with Plain-language explanation, Tiny example, Common mistake, Try it yourself, and Check your answer as visible headings.

Compare the preview with the five required headings above.

That's the key behavior working: your saved teaching method now produces a consistent lesson structure.

Missing a Lesson Heading?

Open the options menu for Teach-Back Lesson.
Click Edit.
Compare the Instructions field with the exact text above.
Close the editor with Done editing.
Click Test it again.
Send Explain CSS specificity and give me a way to practise it. again.
Help me diagnose why my Skill is missing a lesson heading.

The new preview should display all five headings in the saved order.

Click Clear if you want to remove the preview messages after taking your screenshot.

The Teach-Back Lesson Skill remains saved with Whole session scope whether you keep or clear its test messages.

Your reusable five-part lesson now passes its preview test. Next, you'll apply it to the Front-End Learning Coach and compare the structured lesson with the baseline.

Apply and Compare the Skill

Your Front-End Learning Coach Persona already has a one-paragraph baseline. The Teach-Back Lesson Skill has also produced its five-part format in the test preview.

Now you will apply that saved method to the coach's real webAI App chat. The follow-up question tests whether Whole session preserves the structure without another Skill selection.

In this step, get ready to:

Apply Teach-Back Lesson to the Front-End Learning Coach chat.
Compare the baseline with the skilled CSS response.
Test whether Whole session keeps the lesson format active.

Apply the Skill in the Persona chat

A Persona defines the coach's expertise. An active Skill supplies the teaching method for the chat.

Switch back to the Front-End Learning Coach Persona chat from earlier.
In the Persona sidebar, click Teach-Back Lesson under Skills.

Before you send the same prompt again, do you expect the response to remain one paragraph or use the five-part lesson format?

Enter Explain CSS specificity and give me a way to practise it. in the message field.
Send the message to the coach.

When the reply completes, you'll see the topic arranged under all five required headings.

What Should You See?

The skilled response should display these five headings:

Plain-language explanation.
Tiny example.
Common mistake.
Try it yourself.
Check your answer.

Missing the Five Headings?

Confirm that Teach-Back Lesson is selected under Skills in the Persona sidebar.
Send the same CSS specificity prompt again after selecting the Skill.
Help me find out why Teach-Back Lesson is not adding its five headings.

Compare the two responses

A controlled comparison keeps the Persona unchanged. It also uses the same prompt for both responses.

Scroll up to the unskilled CSS specificity response from earlier.
Check whether the baseline visibly separates the five rubric sections.
Return to the new skilled response.
Check whether the skilled response visibly separates all five rubric sections.

The baseline remains one paragraph. The skilled response presents a repeatable lesson with five visible sections.

That comparison makes the change concrete. Your saved Skill now turns the coach's concise explanation into a lesson you can study and practise.

Test Whole session persistence

A Skill with Whole session scope stays active for later messages in the same chat. A second prompt reveals whether that teaching method carries forward.

Before you send the follow-up, do you expect the five-heading format to persist without selecting Teach-Back Lesson again?

Stay in the same Front-End Learning Coach chat.
Leave the current Skill selection untouched.
Enter Why does margin: auto center some elements but not others? in the message field.
Send the follow-up to the coach.

You'll see the prompt marked Session. The reply again uses all five lesson headings.

Did the Format Stop?

Confirm that you sent the follow-up in the same Front-End Learning Coach chat.
Return to the Skill's options from the previous step if the format disappears.
Confirm that Scope shows Whole session.
Help me work out why my Whole session Skill did not persist for the follow-up.

You have now proved the full workflow. Your coach combines a saved expert with a saved teaching method across the session.

Secret mission

Prove How Skill Scope Changes a Conversation

Change Teach-Back Lesson from Whole session to One turn. Then use two consecutive prompts to prove that the teaching format applies once without remaining active for the follow-up.

Clean Up Your Resources

This project introduces no additional paid services. Decide whether to keep your resources in the webAI App, pause your work, or delete the reusable resources.

Resources you used:

A Front-End Learning Coach Persona stored in webAI.
A Teach-Back Lesson Skill with One turn scope.
Any retained messages in the Test it preview for Teach-Back Lesson.
A downloaded local model cached on your Mac.

Keep everything running

No action needed. Choose this if you want to keep using your coach for HTML or CSS study sessions.

Keep the Front-End Learning Coach Persona for future questions.
Keep the Teach-Back Lesson Skill with One turn scope for lessons that affect one prompt.
Keep your comparison chats so you can revisit the one-paragraph baseline and the five-part lessons.
Keep the local model cached so webAI can use it in future sessions.

Pause - I'll come back to this later

Close webAI to pause your work. Your Persona, Skill, chats, and cached model remain available for your next session.

Close the webAI App.
Leave the Front-End Learning Coach Persona in place.
Leave the Teach-Back Lesson Skill in place.
Leave the local model cached on your Mac.

Delete - I don't want to use this again

Remove the reusable project resources from webAI. Deleting them is permanent, so check each name before confirming its removal.

Clear Test Preview Messages

Skip this group if you already cleared the Skill preview.
Return to the Front-End Learning Coach.
Select Teach-Back Lesson under Skills.
Open the Skill's options.
Click Test it.
Click Clear to remove the preview messages.

Delete the Teach-Back Lesson Skill

Return to the options for Teach-Back Lesson.
Click Remove.
Click Delete to permanently remove the Skill.

Delete the Front-End Learning Coach

Return to Personas in webAI.
Hover over the Front-End Learning Coach card.
Click the card's settings icon.
Click Delete to remove the Persona.

Delete an Unused Cached Model

Click your name in webAI.
Click Settings.
Select Data & Storage.
Switch to Models.
Open Cached models.
Choose the downloaded model you no longer need.
Click Delete.
Confirm the deletion.

Can't delete the cached model?

A model currently in use cannot be deleted. Leave that model cached if webAI prevents the deletion.

Ask for help with understanding why your cached model cannot be deleted.

Nice Work!

You did it! Your local Front-End Learning Coach in the webAI App now turns HTML and CSS questions into concise explanations or reusable five-part lessons.

You've learned how to:

Designed a focused Front-End Learning Coach Persona with a defined voice. Configured its purpose through a precise System prompt.
Captured a one-paragraph baseline against a five-part lesson rubric. Built a reusable Teach-Back Lesson Skill that consistently produces all five sections.
Applied Whole session scope to keep the teaching format active across consecutive prompts. Confirmed the follow-up prompt was marked Session without reselecting the Skill.
Completed the optional Secret Mission by changing the Skill to One turn. Proved that the next unselected prompt did not retain the Skill as an active session instruction.

Ready to quiz yourself?