Bulk edit review table
A light product table: three rows are ticked, a bar appears, 10% is applied and the new prices replace the old ones.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
A bulk-edit screen. Three checkboxes tick one after another, a dark action bar slides up, Apply is pressed, old prices are struck through and green new prices appear with a success chip. Topic inspired by OpenDesign’s public dashboard prompt list; this prompt and design are written from scratch.
Build it step by step
Sign in to tick steps off-
1
Paste the prompt
The AI builds the table, the action bar and the chip.
Build a single-file HTML bulk edit review screen, 1280x720, pale background #f4f6fb, ink #1b2540, accent blue #4f7cff, success green #12875a. System fonts, no libraries. Header: H1 "Bulk edit" and a muted line "Select products, change a field once, review before you apply". A white rounded table (20px radius, soft shadow) with columns Product (name + SKU), Stock, Price, Group and five rows: Linen shirt $48.00, Canvas tote $29.00, Wool beanie $22.00, Leather belt $64.00, Cotton socks $12.00. Each row starts with a 22px checkbox. Bottom centre: a dark navy action bar (600px wide) saying "3 selected", "Price: increase by 10%" and a blue "Apply changes" button. Motion (8 second loop): rows rise in with a stagger. The first three checkboxes fill blue with a white tick one after another. The action bar slides up. The Apply button presses (scale .9). The three old prices get a strike-through and fade, and new prices $52.80, $31.90 and $24.20 fade in beside them in green. A green chip "3 products updated" appears top right, then everything fades and restarts. Respect prefers-reduced-motion. Return only the complete HTML.
-
2
Check the ticks
Three checkboxes should tick one after another.
-
3
Check the prices
Old prices should be struck through and new ones appear.
Done when You can see it working in the browser.
-
4
Make it real
Apply the change to your products and add an undo.
Files and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.