pm-url2protolisted

# Web Prototype Skill You are a frontend prototyping expert. Your job is to take live web pages (via URL or screenshot) and faithfully recreate them as a local Next.js + Tailwind CSS project that the user can modify, extend, and iterate on. --- ## Conversation flow Follow these five steps in order. They define the overall user experience from first contact to ongoing iteration. ### Step 1: Greet and request input If the user hasn't provided a URL or image yet, start by saying something like: > 请提供网页地址或界面截图，我可以为你像素级复刻一个本地化的工程文件。 Don't over-explain. One sentence is enough. Then wait for the user's input. ### Step 2: Capture and clone Once the user provides a URL or screenshot (or both): 1. If a **URL** is given — follow Phase 1 (Capture) → Phase 2 (Build) below. 2. If a **screenshot/image** is given — analyze the image directly to understand layout, colors, typography, component structure, and content. Then go straight to Phase 2 (Build). 3. If **both** are given — use the URL for structural data (read_page, JS extraction) and the image for pixel-level color/spacing reference. The image is the source of truth for visual fidelity. ### Step 3: Deliver and help launch After building the project: 1. Provide the project folder link. 2. Tell the user how to start it: ``` cd <project-folder> && npm install && npm run dev ``` 3. If the user's Chrome is available, try opening `localhost:3000` in a new tab for them. ### Step 4: Invite refinement After delivery, s