# Data import mapping
> A light import wizard: columns from a CSV are matched to our fields with drawn connector lines, then Import is pressed.
- Category: Developer tools
- Version: 1.0
- Source: https://ownlyplans.com/bhaskar/data-import-mapping/
## 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.
## Tech stack
- CSS
- Dashboard
- HTML
## Build steps
### 1. Paste the prompt
The AI builds both cards and the connector lines.
Prompt:
```text
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.
## Assets
### prompt.md — The full prompt.
~~~~
# Data import mapping
Copy this prompt into Claude, Cursor or Lovable.
```text
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.
```
~~~~
### index.html.md — Complete code of the result in the video.
~~~~
# index.html
The finished result as one file. Save it as index.html and open it.
```html
Data import mapping
Import contacts
Match the columns from your CSV to our fields
Your file - contacts.csv
Full NameDana Whitfield, Marco Bellini...
E-mail Addressdana@orbit.co, marco@tidal.io...
Company / OrgOrbit Retail, Tidal Foods...
Phone #+1 555 0132, +39 06 5550...
NotesMet at SaaStr, prefers email...
Our fields
Namerequired
Companyoptional
Emailrequired - used to dedupe
Phoneoptional - skipped
3 columns matched - 248 contacts ready
Import 248 contacts
```
~~~~
## Build instructions by tool
### Claude Code
Open a terminal in an empty folder, run `claude`, then paste the prompt.
```text
Build the "Data import mapping" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/data-import-mapping/.
Stack: CSS, Dashboard, HTML.
Follow the plan's steps in order: Paste the prompt → Check the lines → Check the matches → Make it real.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Claude Code.)
```
### Cursor
Open an empty folder in Cursor, start an Agent chat, then paste the prompt.
```text
Build the "Data import mapping" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/data-import-mapping/.
Stack: CSS, Dashboard, HTML.
Follow the plan's steps in order: Paste the prompt → Check the lines → Check the matches → Make it real.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Cursor.)
```
### Lovable
Start a new Lovable project and paste the prompt as your first message.
```text
Build the "Data import mapping" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/data-import-mapping/.
Stack: CSS, Dashboard, HTML.
Follow the plan's steps in order: Paste the prompt → Check the lines → Check the matches → Make it real.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Lovable.)
```
## Definition of done
- Every build step is complete and the app runs locally.
- The main user flow works end to end.
- Share your build on OwnlyPlans with a demo link, build time and tool.