【Cursor + PromptCoder】前端轻松复刻任何页面
【Cursor + PromptCoder】前端轻松复刻任何页面你是否正在利用 Cursor 举行前端开发，却苦于繁琐的代码天生和原型图的还原？你是否渴望一个更高效、更智能的工具来提升你的开发服从？那么，你肯定不能错过 PromptCoder！
PromptCoder 是什么？
PromptCoder 是一款专为前端开发者打造的智能代码天生工具，它与 Cursor 无缝适配，可以或许根据你的截图，快速天生高质量的 Cursor 提示词，天生前端代码。从而轻松复刻一个页面大概原型图。
PromptCoder 的优势：
[*] 交互简单易用： 只需一张截图即可得到想要的效果。
[*] 从免费开始： PromptCoder 只需注册即可免费体验全部内容。
[*] 多框架支持：PromptCoder 现在已经支持 Next，React，Vue 和 Flutter 等框架。
示例 （油管主页）
原版
https://i-blog.csdnimg.cn/direct/323f62f9fe384382a0e1b5126056ff41.png
天生版本
https://i-blog.csdnimg.cn/direct/77792ee04e0241099073c8f3de339a00.png
从截图到天生好完备代码只需一分钟， Cursor 在 PromptCoder 的加持下拥有极高的代码还原度。
提示词分享
以下是 PromptCoder 天生的提示词，用于还原油管主页：
Create detailed components with these requirements:
1. Use 'use client' directive for client-side components
2. Style with Tailwind CSS utility classes for responsive design
3. Use Lucide React for icons (from lucide-react package). Do NOT use other UI libraries unless requested
4. Use stock photos from picsum.photos where appropriate, only valid URLs you know exist
5. Configure next.config.js image remotePatterns to enable stock photos from picsum.photos
6. Avoid duplicate components
7. Automatically source and display logos from a CDN in design placeholders
8. Follow proper import practices:
- Use @/ path aliases
- Keep component imports organized
- Update current src/app/page.tsx with new comprehensive code
- Don't forget root route (page.tsx) handling
- You MUST complete the entire prompt before stopping
**Layout Overview**
* **Page Structure**: The page will be divided into a single main section containing a grid layout of video cards.
* **Component Hierarchy**:
+ `VideoGrid` (container component)
- `VideoCard` (repeated component for each video)
- `Thumbnail` (image component)
- `VideoTitle` (text component)
* **Responsive Design Considerations**:
+ The grid layout will be responsive, adapting to different screen sizes and devices.
+ On smaller screens, the grid will collapse into a single column, with each video card taking up the full width of the screen.
+ On larger screens, the grid will expand to display multiple columns, with each video card taking up a portion of the screen width.
**Component Details**
* **VideoGrid**:
+ Will receive an array of video data as a prop.
+ Will render a grid of `VideoCard` components, with each card representing a single video.
+ Will handle responsive layout and grid item sizing.
* **VideoCard**:
+ Will receive a single video object as a prop.
+ Will render a `Thumbnail` component and a `VideoTitle` component.
+ Will handle hover and click events for video playback.
* **Thumbnail**:
+ Will receive an image URL as a prop.
+ Will render an `img` element with the provided URL.
* **VideoTitle**:
+ Will receive a title string as a prop.
+ Will render a `p` element with the provided title.
* **State Management Needs**:
+ The `VideoGrid` component will need to manage the state of the video data array.
+ The `VideoCard` component will need to manage the state of the video playback (e.g., play/pause, current time).
* **Props and Data Flow**:
+ The `VideoGrid` component will receive the video data array as a prop from a parent component.
+ The `VideoCard` component will receive the video object as a prop from the `VideoGrid` component.
**Styling Specifications**
* **Color Schemes**:
+ Primary color: #FF0000 (YouTube red)
+ Secondary color: #FFFFFF (white)
+ Background color: #F7F7F7 (light gray)
* **Typography**:
+ Font family: Open Sans
+ Font sizes:
- Video title: 16px
- Video description: 14px
* **Spacing and Alignment**:
+ Grid item spacing: 16px
+ Video title padding: 8px
+ Video description padding: 16px
* **Animations and Transitions**:
+ Video card hover effect: scale up by 10% and change background color to #CCCCCC (dark gray)
+ Video playback transition: fade in/out over 0.5 seconds
**Interactive Elements**
* **User Inputs**:
+ Video playback controls (play/pause, seek)
+ Video title click event (opens video in new tab)
* **Navigation**:
+ Grid navigation (scrolling, pagination)
* **Loading States**:
+ Video grid loading state (spinner or skeleton UI)
+ Video playback loading state (spinner or buffering animation)
* **Micro-interactions**:
+ Video card hover effect
+ Video playback transition
+ Grid item animation on scroll
点击 访问 PromptCoder官网，相识更多信息并开始免费试用。让 PromptCoder 成为你前端开发的得力助手，助你轻松应对各种挑衅，打造更精彩的前端应用！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]