PLAINFINCH learn by building

How AI assistants work

You will understand how an AI assistant writes its replies and how to check its CSS for properties that do not exist.

What is the assistant doing when it answers?

An AI chat tool is built on a language model: a program trained on a huge amount of text, including a lot of code. When you send a request, it writes a reply one small piece at a time, each time picking a likely next piece based on your request and on everything it has written so far. It does this very fast, which is why a whole HTML file appears in seconds.

There is no lookup step where it opens a CSS reference and copies the rule. It produces text that fits the patterns it learned. Most of the time those patterns are right, because correct CSS appears far more often in its training text than wrong CSS. When the patterns are thin or blurry, it still produces something that fits, and that something can be invented.

Some tools can also search the web or run code. Even then, the reply you read is written the same way, so the same habits apply: read it, test it, check anything you have not seen before.

FigureAn AI assistant reads your request and its reply so far, picks a likely next piece and repeats. For the bird club card it writes border-roundness, which sounds right but is invented, so the browser skips it.An AI assistant reads your request and its reply so far, picks a likely next piece and repeats. For the bird club card it writes border-roundness, which sounds right but is invented, so the browser skips it.
Each piece is chosen because it fits the pattern, not because it was checked. border-roundness looks like a real property, so the browser skips it without an error and the corners stay square.

Why does it sound so sure of itself?

The tone of a reply comes from the same prediction as the content. Helpful answers in its training text are written calmly and confidently, so its answers are too. The confidence tells you about the writing style. It tells you nothing about whether the code works.

Try it in the practice area. Ask for rounded corners on the **Next walk** card and read the reply. It explains that border-roundness is the newer, clearer name for rounded corners and works in every modern browser. That sentence is smooth, specific and wrong. The real property is border-radius. A person who invents a fact usually hesitates. The assistant has no such signal, so you have to supply the doubt yourself.

Why are made-up properties so believable?

Invented CSS is built from real parts. border is real, roundness is a real English word, and lots of real properties join two words with a hyphen. The result looks exactly like the properties around it, so your eye slides over it. The same happens with HTML: alt-text sounds like the right attribute because it describes what alt does.

Browsers make this worse in a quiet way. When CSS has a property or value the browser does not recognise, it skips that one line and carries on. Nothing turns red on the page and no error pops up. The card still shows its shadow and padding, so it looks almost right, and almost right is easy to miss.

The fix is a reading habit. When a reply uses a name you have never seen, treat it as unconfirmed until you have checked it.

How can you check a property in a minute?

Use the browser itself. Open the page, right-click the element, choose Inspect, and look at the Styles panel. A property the browser does not understand is shown crossed out, often with a small warning icon next to it. That is the fastest check there is, and it works for every reply you ever paste.

You can also look the name up in a CSS reference. If a search for the exact property returns nothing official, or only other people asking why it does not work, it is probably invented. In the practice area, the **Preview** gives you a quicker test: the corners stay square while border-roundness is there, and turn round the moment you write border-radius.

Make it a reflex to compare what the reply claims with what the page does. The reply said rounded corners. The Preview showed square ones. That gap is where the bug lives.

Does it know my page or remember my site?

No, unless you show it. The assistant sees the text of your request and, in a chat, the earlier messages in that chat. It cannot open your files, visit your site or see the Preview. When you ask for a card without sharing your code, it guesses a page, and its guess comes from common examples: a gradient, a display font loaded from another server, a button that says Learn more.

Send a request with a goal and no code, and the reply is a dark blue card for some other bird society. Add your code and the reply styles your own .walk-card in your own green. The difference comes entirely from what you typed. Later lessons go deeper into giving context and into how a chat carries earlier messages forward.

Will it give the same answer twice?

A real AI tool usually will not. A little randomness is part of how it picks each next piece of text, so the same request can produce different code, different wording and occasionally a different mistake. Asking again is a fair way to get a second attempt, and it is also a reminder that one answer is one sample, never the final word.

The pretend assistant here is different on purpose. It picks from replies written for this lesson, so the same kind of request always gets the same reply. That makes the exercise fair and checkable. Real tools also write longer answers, sometimes refuse a request, and may keep what you paste, so think before you share anything private.

What is it actually good at?

Plenty. It is quick at first drafts of HTML and CSS, at turning a plain list into a table, at explaining a line of code you do not understand and at suggesting why a layout is breaking. It rarely gets tired of follow-up questions, and it often knows a neater way to write something you already have working.

It is weakest where it has to be exactly right about details: property names, attribute names, browser support, version numbers, facts about your own project. Those are the places to slow down. A good working split is to let it draft and explain, and to keep the checking, testing and final decisions for yourself.

Being honest about both sides keeps you calm. The assistant is often helpful and sometimes confidently wrong. Neither of those makes it magic or useless.

How do you work with an assistant that predicts text?

Give it the information it cannot guess: what you want, your code and your limits. Then read the reply as a draft from a quick, well-read helper who never says “I am not sure”. Press **Use this code**, open the Preview and compare what you see with what the reply promised. Use the **Review** view to keep track of each line you change.

Finish the exercise that way. Ask for the card with your code included, use the good reply, find the property that does nothing and replace it with border-radius: 12px;. Then try the Break It challenge, where three more invented names are hiding in a sightings list that looks finished.

Field notes

  • An assistant writes replies by predicting likely text, piece by piece, from your request.
  • A confident tone comes from the writing style and says nothing about whether the code works.
  • Invented CSS looks real because it is built from real words and real property patterns.
  • In the browser's Styles panel, a property the browser does not understand appears crossed out.

Easy to get wrong

The explanation is generated the same way as the code. A fluent paragraph about border-roundness does not make it real, and the browser will ignore it without any error.

It only reads the text you send. Without your code it invents a page, with its own class names, fonts and colours.

Looking best and working are different tests. Several answers can share the same invented property.

Questions people ask

Is the assistant searching the internet for my answer?

Usually it is writing from patterns it learned during training. Some tools can search or run code, and they still write the final reply by prediction, so check it the same way.

Why doesn’t the browser warn me about a fake property?

CSS is designed to skip what it does not understand, so older browsers can ignore newer features without breaking pages. DevTools shows ignored lines crossed out, which is where to look.

Does it lie on purpose?

No. It has no intention either way. It produces likely text, and sometimes likely text is false. That is why you check results rather than motives.

Will newer tools stop making things up?

They improve, and they still make mistakes. Reading and testing every line stays useful however good the tools get.

Keep going