Widget maker

gen_widget · slug widget-maker · icon 🧩 · outputs html

A small living widget for your desktop: a countdown, a habit tracker, a quote of the hour, a live feed from an API, anything that fits in a glass panel. Produces a self-contained HTML snippet that drops straight into a custom widget.

Inputs

Field	Type	Notes
What the widget does	text	required, 8-800 chars
Data	text	optional — fixed values, a list, or a public JSON URL (must allow browser requests)
Size	pick	Small (~320×200) · Medium (~480×300) · Wide (~640×220)
Style	pick	Quiet glass (blend into the desktop) · Bold typographic · Playful · Data dense
Refresh every (seconds)	number	default 60, 5-3600, advanced — only relevant with a data URL or a clock
Title	string	optional, advanced — blank means no title bar

Pipeline

Step	Role	Skills	Tier	Depends on
design	designer	llm.generate	cheap	—
build	engineer	files.write, files.read	standard	design

Notably, build doesn’t use code.scaffold_react_node or any browser-automation skill — the engineer writes the HTML/CSS/JS snippet directly with files.write, since a widget is meant to be small enough to author by hand from the design step’s spec, not a whole scaffolded app.

Example run

{
  "generatorId": "gen_widget",
  "inputs": {
    "purpose": "Counts down to my next trip on 14 November and shows one packing reminder a day.",
    "dataSource": "Trip date 2026-11-14; reminders: passport, charger, walking shoes",
    "style": "Quiet glass (blend into the desktop)"
  }
}

The resulting HTML becomes the config of a custom-type Widget once you add it to your desktop.