Niklaus Gerber design system ยท web component
Agent figure
Every live figure from the Agents page, in all five modes, running on the standalone files. Copy the closest one and change its words.
agf-me
Measure
An agent checks something: a page is scanned, one element is flagged and filed. Live: Agents, Spot.
Illustration: Spot scans a product page on a phone-sized screen. It finds a headline that splits mid-word because the text overflows its box by 14 pixels, and files it as a high-severity issue with a cropped screenshot.
agf-app
App
A phone whose screens cover each other in order, beside a step list. Live: Agents, Hirsla.
Illustration of Hirsla in four steps. One: a restaurant page is shared into Hirsla from the share sheet. Two: it is kept in the library at once while the iPhone reads it. Three: the phone writes the card, Trattoria Rosenweg, Rosenweg 12, Old Town, with four facts. Four: asked where the place Marco mentioned was, Hirsla answers Trattoria Rosenweg, Rosenweg 12 in the Old Town, names the card it came from, and notes that it answered on this iPhone, from the cards only.
agf-ex
Exchange
A conversation between the person and the agent. Live: Agents, Hirsla (how it was built).
Illustration: Niklaus: Sync crashes. Plan first, then wait for my go. Agent: Six suspects checked, one cause found. Plan attached. Niklaus: Go. Agent: Fixed, tested, and logged in the decision log. Niklaus: App Review rejected build 4. Agent: One intent text named Apple. Rule added, all 17 languages checked.
agf-bd
Build
A brief becomes a page: its points are pulled out, then wireframe blocks arrive with real copy. Live: Agents, Briefing.
Illustration: a brief for a city bike subscription asks for sign-ups, says there is no minimum term, and rules out prices. The agent pulls out the goal, the must-say and the never, then builds the wireframe block by block: a hero, Ride all winter, stop any month, with one button, Start your subscription; a proof block, rated 4.8 by riders, marked VERIFY because the source is missing; three benefits; and a closing block with the same button. You can drag a block or rewrite a word, then export the page and a handover that lists what is in and what was left out.
agf-le
Ledger
Where the output lands: rows that pass, get fixed, or stay marked. Live: Agents, Briefing (the checks).
Illustration: a brief goes in and comes back as nine blocks, checked in code. The headline passes its copy limit. Two calls to action, where one is allowed, are fixed in a single repair pass. A test result marked VERIFY and a footnote marked LEGAL are left for a person to check. What fails goes back to the model once, with every error at once; what it does not know stays marked, never invented.
agf-ex
Exchange, two agents
The same mode with two agents talking. Live: Agents, Handshake.
Illustration of the two answers. Your assistant: Filter bags for the vacuum, please. We are nearly out. Shop agent: One pack fits your model, and it is in stock. Your assistant: Under your limit, so it is ordered. Your address goes over at checkout. Your assistant: They are also asking about the new kitchen machine. Shop agent: For that, a local advisor shows it at home first. It costs nothing and commits to nothing. Your assistant: Putting it to them. Nothing is booked without their tap.