# Data import mapping

> A light import wizard: columns from a CSV are matched to our fields with drawn connector lines, then Import is pressed.

- Kind: Plan
- Page: https://ownlyplans.com/bhaskar/data-import-mapping/
- Licence: CC BY 4.0 (reuse with credit)

## 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.

## Files

- prompt.md: https://ownlyplans.com/bhaskar/data-import-mapping/prompt/ (The full prompt.)
- index.html.md: https://ownlyplans.com/bhaskar/data-import-mapping/index-html/ (Complete code of the result in the video.)

## About

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.

---
Also available as JSON: https://ownlyplans.com/bhaskar/data-import-mapping/?format=json
MCP server: https://ownlyplans.com/mcp