Data import mapping
A light import wizard: columns from a CSV are matched to our fields with drawn connector lines, then Import is pressed.
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
Two cards face each other, your file columns on the left and the product fields on the right. Blue lines draw between matching columns, matched fields turn green, a confirmation shows 248 contacts ready and the Import button is pressed. 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 both cards and the connector lines.
Create a single-file HTML data import mapping screen, 1280x720, pale slate background #f1f5f9, ink #0f172a, accent blue #2563eb, success green #16a34a. System fonts, no libraries. Header: title "Import contacts" and subtitle "Match the columns from your CSV to our fields". Left white card "Your file - contacts.csv" with five field boxes (60px tall, 1.5px border, 14px radius): Full Name, E-mail Address, Company / Org, Phone #, Notes, each with a muted sample line. Right white card "Our fields" with Name (required), Company (optional), Email (required - used to dedupe), Phone (optional - skipped). Between the cards place an inline SVG with three connector paths (Full Name to Name, E-mail Address to Email, Company / Org to Company), drawn with stroke-dasharray and animated with stroke-dashoffset one after another (blue, 3px, round caps, the paths can cross). Motion (8 second loop): boxes rise in; each connector draws and, when it reaches its target, the target box turns green (border and tint). Then a green confirmation chip "3 columns matched - 248 contacts ready" slides up bottom left, and the blue "Import 248 contacts" button bottom right presses (scale .92). Reset at the end. Respect prefers-reduced-motion. Return only the complete HTML.
-
2
Check the lines
Three lines should draw one after another.
-
3
Check the matches
Matched fields should turn green and the chip should appear.
Done when You can see it working in the browser.
-
4
Make it real
Let people drag a column onto a field and save the mapping.
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.