Live Canvas — Post card demo

5 variations of a social post (likes, retweets, comments). Click Add Feedback bottom-right → click any element → leave a comment. Right-click the pill to submit.

This is an overlay-only demo. Feedback events transit through the Live channel (or JSON file, with ?json=1) so you can verify the UI works — but there are no .claude-design/lab/variants/ files behind these cards, so the Claude session receiving events cannot edit anything. For the full lifecycle, run /live-canvas in a real project.

Variant A

Classic layout — header row, body, actions in a row of icons

Ada Lovelace
@ada · 2h

Shipped a draft of the analytical engine today. Feedback welcome — especially on the punch-card UX.

Variant B

Metrics strip on top — data-forward, actions as buttons below

❤️ 1,204 likes
🔁 132 retweets
💬 48 replies
Ada Lovelace · @ada · 2h

Shipped a draft of the analytical engine today. Feedback welcome — especially on the punch-card UX.

Variant C

Compact / list-style — maximum density, small avatar, inline metrics

Ada Lovelace · @ada · 2h
Shipped a draft of the analytical engine today. Feedback welcome — especially on the punch-card UX.
💬 48 🔁 132 ❤️ 1.2k

Variant D

Spacious / premium — big body type, metrics as a stat block

Ada Lovelace · 2 hours ago

Shipped a draft of the analytical engine today. Feedback welcome — especially on the punch-card UX.

1,204Likes
132Retweets
48Replies

Variant E

Expressive / playful — rounded avatar, gradient bg, colored action chips

Ada Lovelace · 2h

Shipped a draft of the analytical engine today. Feedback welcome — especially on the punch-card UX.