Artifactbin / Product design plan / 15 September 2026

From books to a wall of work.

A homepage that helps visitors recognize what they can make, open a real example, and start their own artifact. This working plan uses the redesign itself to demonstrate spatial JSX wireframes, a Mermaid journey, and a delivery ledger.

Status: Implemented locally · release review pending

1. The journey comes first

Arrive at the workshop → scan what artifactbin can do → open an example or enter the gallery → make something of your own.

Audience

First-time visitors, especially people turning questions and data into shareable work with an agent.

Scope

The homepage example wall, its print treatment, and the shared presentation on the Examples page.

Constraint

Keep real titles and links, theme pairings, accessible link names, and reduced-motion support.

2. Give the work the wall

S1 / Homepage. Replace curved pages and a book spine with independent prints. Two examples support each theme; a final gallery invitation completes the grid.

artifactbinExamples · Setup

The artifactbin workshop

Illustrated hero / existing page context

Create Artifact ↗

With artifactbin you can ...

$7.52B

Dashboard / SF City Payroll

The best language for coding agents

EDA / The best language for coding agents

follow the evidence

The OpenAI–Hugging Face incident

Evidence → timeline → findings

Report / The OpenAI–Hugging Face incident

Built something cool?
Show HN.

Data story / Vol 1: Built something cool? Show HN.

tell compelling data stories

A little way from home.

△

Animation / A little way from home

San Francisco

╱ ╲ │ ╱
─ ╱ ┼ ╲
╱ │ ╲ ─

Maps / SF road network

put ideas into action

$7.52B

Dashboard / SF City Payroll

Built something cool?
Show HN.

Data story / Vol 1: Built something cool? Show HN.

build micro-apps with friends

A little way from home.

△

Animation / A little way from home

San Francisco

╱ ╲ │ ╱
─ ╱ ┼ ╲
╱ │ ╲ ─

Maps / SF road network

create beautiful visuals

There’s more on the wallEnter the gallery ↗Find something worth sharing

Agent-ready infrastructure. Out of the box.Benefit choices + illustration

S1-D / Desktop wireframe in static JSX. Preview drawings are schematic; the implementation uses real artifact thumbnails. Labels and mock controls are part of the drawing.

artifactbinMenu

With artifactbin you can ...

$7.52B

Dashboard / SF City Payroll

The best language for coding agents

EDA / The best language for coding agents

follow the evidence

Remaining themes stack below

Enter the gallery ↗

S1-M / Mobile: one theme per row; two prints stay paired. Hero and benefit sections omitted here for clarity.

What changed in review

The book shape felt awkward. The Examples page already offered a stronger visual vocabulary: paper, tape, and pins.

Move the category and title onto the paper. Replace the numbered ARTIFACTBIN footer with “DASHBOARD / SF CITY PAYROLL.” Keep the original tiny, all-caps monospace treatment.

Use a stable visual mix so attachments do not jump when the page rerenders. The same artifact can have a different fastener in another theme.

Four ways to hang a print

$7.52B

Dashboard / SF City Payroll

Single tape

The best language for coding agents

EDA / The best language for coding agents

Single pin

The OpenAI–Hugging Face incident

Evidence → timeline → findings

Report / The OpenAI–Hugging Face incident

Two corner tapes

Built something cool?
Show HN.

Data story / Vol 1: Built something cool? Show HN.

Two corner pins

3. From inspiration to a first artifact

The journey above separates the two browsing paths from creation. Preview failure preserves the useful part: a named link to the work.

Screen / state	Visible behavior	Next action
S1 / normal	Five paired themes, on-paper labels, four fastener variants.	Open a print or enter S2.
S1 / slow preview	Text link remains available while the image loads.	Open the artifact without waiting.
S1 / failed preview	Named links survive. A deliberate thumbnail fallback still needs design and implementation.	Open the title link; proposed fallback keeps the paper geometry.
S2 / empty filter	Proposed: a short empty-state message with All work recovery.	Reset the category.
S1–S2 / keyboard or reduced motion	Named links, visible focus, and suppressed decorative movement.	Navigate and open with the keyboard.

4. Decisions that keep the design coherent

Decision	Reason	Acceptance
Reuse one print presentation	The homepage and gallery should feel like the same place.	Shared component and fastener styles; layout remains page-owned.
Keep type small and on the paper	The artwork leads; its identity travels with it.	Uppercase category / title, wide tracking; review readability at narrow widths.
Keep all four mounts in the mix	A collected wall benefits from small variations.	Single tape, single pin, two tapes, two pins; stable across rerenders.
Preserve the five theme pairings	The examples explain capabilities, not just formats.	Each theme has two named links and the gallery remains easy to find.

5. Delivery ledger

Completed items reflect this working session. Roles below describe responsibility, not named assignments. No production release or conversion improvement is claimed.

Work	Owner role	Depends on	Status / evidence
~~Replace book geometry with paired prints~~	Design + frontend	Existing Examples treatment	Done locally. Desktop and mobile layout checked.
~~Add four mounts and on-paper labels~~	Frontend	Shared print boundary	Done locally. Two-corner pin positions verified in browser.
~~Run affected checks~~	Engineering	Final implementation	Validation passed; 297 tests across 40 files passed.
Review loaded thumbnails and smallest labels	Design QA	Reliable preview loading	Pending. A final full-preview check timed out; corner-pin screenshot also had an unloaded thumbnail.
Define preview-error and empty-filter recovery	Design + frontend	State review	Proposed follow-up, not part of the completed styling change.
Review CI and release	Maintainer	Visual sign-off + selected CI checks	Pending. Local checks are not branch-wide CI evidence.

Next decision: confirm label readability with real thumbnails, then approve the wall treatment for release review.