# Button Wall

> A maker and checker for 88x31 web buttons - the tiny badges, often animated GIFs, that personal websites and the "small web" trade on their link pages. Give a site's name, a link, what it is about and a few vibe words, and draw a button in the free editor or ask for three designs. The page measures every line against its pixel fonts and the text's contrast at actual size; a metered read gives a verdict on your draft and designs three retro buttons that the page then draws and re-checks pixel by pixel.

URL: https://button-wall.skillsafe.ai/
API tutorial: https://button-wall.skillsafe.ai/api.html
Source skill: https://skillsafe.ai/skill/@bergside/retro (throwback design: vintage-inspired typography, high-contrast retro palettes, nostalgic visual elements)

## What is free, in the browser

- An 88x31 editor: one frame per line (up to 4 frames, "/" stacks lines), a 5x7 "tall" or 3x5 "tiny" bitmap font (capitals, digits and common marks), six fill styles (flat, raised bevel, sunken bevel, diagonal stripes, banded gradient, dithered fade), four colours, ten 9x9 icons and a frame time.
- The button at actual size on a light and a dark page, a 6x zoom with a pixel grid, and a still of every frame.
- A fit table: characters used per line against characters available (tall: 13, or 12 with an icon, up to 3 lines; tiny: 20, or 18 with an icon, up to 3 lines).
- Text contrast as a WCAG ratio against every colour the text sits on, and a reading-time hint (250 ms plus 40 ms per character, a rule of thumb).
- The page's verdict by five ordered rules: fresh (no words), rethink (the words never name the site or its topic - a simple word match), trim (a line too wide, too many lines or frames), recolor (contrast under 3:1), ship.
- Exports: an animated GIF and a PNG drawn at exactly 88x31, the HTML embed code, Markdown and JSON.

## What is metered

One task, `button`, on gpt-terra: the verdict plus exactly three button designs as drawable specs (frames, font, style, colours, icon, frame time), 3-5 notes on message, legibility, colour, motion and style, the changes made to the draft, alt text and a link title. Words come only from the brief and the draft - no invented claims. The page re-checks each design with the same fit and contrast tests and says where it disagrees.

## Samples

Five made-up sites, one per verdict: a stone-wall blog with no draft (fresh), a camp-stove recipe site whose button says only CLICK HERE (rethink), a mix show whose words overflow (trim), a fern journal with pale-on-pale text (recolor) and a zine club whose button already works (ship). Their replies replay free.