Code · Claude Opus 5.5
The visual explainer for Topic.md, following the skill
The visual explainer for Topic.md, following the skill, with the wired cover picture. Reference (Topic.md): # Topic - **Question:** How does a card payment travel from the tap to the bank? - **For:** Engineers new to payments. They know how software systems and APIs work, but nothing about cards, banks or how money moves between them. - **They should understand:** A tap is only a fast yes or no. The money moves later, in a separate batch, through the same chain of parties. - **The parts:** Card, terminal, acquirer (the shop's bank), card network, issuing bank (the cardholder's bank). Explain each with an everyday analogy and no protocol names: the card is a key, the terminal a messenger, the acquirer the shop's bank, the card network a postal sorting hub, the issuing bank the keeper of the cardholder's money. - **The steps:** 1. The customer taps the card on the terminal. 2. The terminal reads the card and sends a request to the acquirer. 3. The acquirer passes it to the card network. 4. The network routes it to the issuing bank. 5. The issuing bank checks funds and risk, then answers yes or no. 6. The answer travels back through the network and acquirer to the terminal, which shows approved or declined. 7. Later, in a batch, the money is settled from the issuing bank to the shop's account. - **Compare:** Authorization vs settlement. Authorization is the instant approval that holds the amount and happens in seconds. Settlement is the batch that actually moves the money, usually a day or more later. Rows: when it happens, what it does, who is involved, what the shop sees. - **Numbers:** Under 2 seconds for an approval. About 2% in fees on a typical sale. 1 to 2 days for the money to arrive. 5 parties between the tap and the bank. - **Look:** Light and editorial: a calm white page with one deep blue accent, like a good technical magazine. One typeface family, generous space. - **Sources:** None. Draw only on the notes above. Reference (visual-explainer SKILL.md): --- name: visual-explainer description: Explains a system, a process or an idea as one rich, self-contained web page, the answer in plain words first, then diagrams, a step-by-step flow, a comparison and the key numbers, so it's understood in two minutes. Use for explainers, how-it-works pages, architecture overviews, onboarding docs and visual summaries of a document. --- # Visual explainer ## Read first Topic.md for the question, who it's for, what they should understand, the parts, the steps, the comparison and the numbers; the cover picture and anything else wired in. ## The page, in order 1. The answer first: the question as the title, the answer in one or two plain sentences, and the wired cover picture. 2. The big picture: one diagram of the whole system in inline SVG, the parts as labelled boxes, arrows for what flows between them, each arrow labelled with what moves (money, data, a request). Nine boxes at most. 3. Step by step: the steps from Topic.md as a numbered flow (a vertical timeline, or cards joined by arrows), each with a short title, one or two sentences and the part it happens in, in that part's colour from the diagram. 4. Compared: a table or side-by-side cards for the comparison in Topic.md. 5. The numbers: three or four key figures from Topic.md as large stats with one line each. 6. Words to know: each term the page uses, in one line. 7. A recap in one short paragraph, and where to read more if Topic.md has sources. ## Diagrams - Built by hand in inline SVG, never pictures of text or external libraries: rounded boxes, clear arrowheads, labels in the page's font at a readable size, one colour per kind of part, used the same way in every diagram and step. - One idea per diagram, read left to right or top to bottom, with no crossing arrows. - Hovering or tapping a part highlights it and its steps, with a small script; everything reads without it. ## Look - Calm and editorial: one typeface family, a clear scale (44 / 26 / 17), lines…
Meng To@shadownessguy0097- Model
- Claude Opus 5.5
- Made by
- Meng To
- Shared
- Likes
- 0
Use its prompt, turn it into a video or a 3D model, or find more like it in Fil. Fil is invite-only for now: without an invitation, Open in Fil shows the waitlist.
