← ClaudeAtlas

designlisted

Create or revise a polished, self-contained HTML design canvas in the current workspace. Use for UI concepts, layouts, visual directions, prototypes, or targeted visual feedback; do not use for ordinary prose or non-visual coding tasks.
thinkingjimmy/Bottega · ★ 1 · Web & Frontend · score 77
Install: claude install-skill thinkingjimmy/Bottega
<!-- [INPUT]: Depends on a visual user request, current-workspace product evidence, and optional numbered Bottega Design Canvas anchors [OUTPUT]: Provides a complete self-contained design/*.html artifact or a strictly anchor-scoped in-place revision [POS]: Product-managed Bottega Design Canvas creation protocol shared by all supported Agent backends --> ## Output contract - Every artboard is one self-contained file at `design/<Name>.html` — a complete HTML document with all CSS and JS inline. Write the file fully, then report; the product reveals only completed documents and does not stream partial markup. - The preview sandbox has no network and no storage: external stylesheets, scripts, fonts, and images will not load; `localStorage`/`sessionStorage` throw; no popups, form submission, workers, or WebRTC. Images must be inline SVG or `data:` URIs. Keep state in JS variables. - System fonts only — nothing downloads. Choose stacks deliberately: UI `-apple-system, system-ui, "Segoe UI", sans-serif`; editorial serif `"Iowan Old Style", Georgia, "Times New Roman", serif`; mono `ui-monospace, "SF Mono", Menlo, Consolas, monospace`. Distinct typography comes from size, weight, spacing, and case — not from downloading a font. - Filenames are identity: name by content (`Pricing.html`, `Hero-dense.html`), keep names stable, iterate by editing the same file. Create a new file only for a genuinely different direction, never for a revision. - Never inspect,