新一代开发工具如 Cursor 正悄然改变着前端开发的游戏规则。Cursor 不仅是一个代码编辑器，更是集成了 AI 智能提示、代码生成与错误修复的“开发助手”。

如何更好的拥抱 Cursor 成了前端工程师们最有争议的话题，如果有一款软件能够教会 Cursor 按照UI图片进行代码生成，那会是所有前端工程师“休闲摸鱼”的第一利器。

PromptCoder能帮你做什么？

PromptCoder 是一款专为前端开发者打造的智能代码生成工具，它与 Cursor 无缝适配，能够根据你的截图，快速生成高质量的 Cursor 提示词，生成前端代码。从而轻松复刻一个页面或者原型图。

PromptCoder的优势

• 交互简单易用： 只需一张截图即可得到想要的效果。
• 从免费开始： PromptCoder 只需注册即可免费体验全部内容。
• 多框架支持：PromptCoder 现在已经支持 Next，React，Vue ，Flutter 和Vanilla等框架。

示例（Youtube）

原版

生成版本

示例（spotify）

原版

生成版本

从截图到生成好完整代码只需一分钟， Cursor 在 PromptCoder 的加持下拥有极高的代码还原度。

提示词分享

以下是 PromptCoder 生成的提示词，用于还原Youtube：

Create detailed Next.js 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

   ```
1.  Layout Overview

-   **Page structure:**
    *   Main container: Centered horizontally, max-width for larger screens, responsive width. Uses a 12-column grid system.
    *   Top Navigation Bar: Full-width or contained within the main container's max-width, horizontally arranged elements using flexbox.  May collapse into a hamburger menu on smaller screens.
    *   Video Grid: Below the navigation bar, uses a responsive grid layout (likely `grid-template-columns: repeat(auto-fit, minmax(..., 1fr))`) to display video cards. The `minmax` value will determine the minimum width of each video card, allowing for responsive column count.
    *   Rows and Columns: Explicit rows are not strictly defined; the grid handles wrapping. The number of columns per row changes based on screen size.

-   **Component hierarchy:**
    ```
    <PageContainer>
      <TopNavigationBar>
        <NavItem /> {/* Repeated for each navigation item */}
      </TopNavigationBar>
      <VideoGrid>
        <VideoCard /> {/* Repeated for each video */}
      </VideoGrid>
    </PageContainer>
    ```

-   **Responsive design considerations:**
    *   Utilizes CSS media queries to adjust the number of columns in the `VideoGrid` based on screen width.  Breakpoints should be defined for common device sizes (e.g., mobile, tablet, desktop).
    *   Top Navigation Bar: Uses flexbox properties (`flex-wrap`, `justify-content`, `align-items`) to handle wrapping and alignment of navigation items on smaller screens.  Consider a hamburger menu implementation for very small screens.
    *   Video Card:  The width of the `VideoCard` component is handled by the grid layout.  Internal elements (thumbnail, title, etc.) should be styled to adapt to the card's changing width.  Consider using `object-fit: cover` for the thumbnail image.
    *   Font sizes may need to be adjusted using media queries for optimal readability on different screen sizes.

2.  Styling Specifications

-   **Color schemes:**
    *   `backgroundColor`: `#FFFFFF` (white) for the main background.
    *   `textColorPrimary`: `#000000` (black) for primary text (titles, etc.).
    *   `textColorSecondary`:  (A slightly lighter shade of black or dark gray, not specified in the analysis, but common practice) for less prominent text (channel name, view count).
    *   Dynamic colors for channel logos and potentially video-specific theming.  These could be passed as props to the `VideoCard` component.

-   **Typography:**
    *   `fontFamily`:  A sans-serif font (e.g., "Roboto", "Arial", "Helvetica", sans-serif). Use a web-safe font stack for cross-browser consistency.
    *   `videoTitle`:  { `fontSize`: '1.125rem', `fontWeight`: 'bold', `lineHeight`: '1.5' } // Example values
    *   `channelName`: { `fontSize`: '0.875rem', `fontWeight`: 'normal', `lineHeight`: '1.3' } // Example values
    *   `videoMeta`:  { `fontSize`: '0.75rem', `fontWeight`: 'normal', `lineHeight`: '1.2' } // Example values (view count, time ago)

-   **Spacing and alignment:**
    *   Consistent use of CSS variables (or a theme object in a styled-components/Emotion setup) for padding and margins.
    *   `--spacing-xs`: 4px;
    *   `--spacing-sm`: 8px;
    *   `--spacing-md`: 16px;
    *   `--spacing-lg`: 24px;
    *   `--spacing-xl`: 32px;
    *   Vertical spacing between video cards: `--spacing-md` or `--spacing-lg`.
    *   Horizontal spacing between video cards: Handled by the grid's `gap` property.
    *   Internal spacing within `VideoCard`: Use `--spacing-sm` and `--spacing-xs` to separate elements (thumbnail, title, channel name, etc.).
    *   Text alignment: Left-aligned for titles, channel names, and video metadata.

-   **Animations and transitions:**
    *   `transition`: `all 0.2s ease-in-out` (for hover effects and other subtle transitions).
    *   Hover effect on video cards:  Slight scale increase (e.g., `transform: scale(1.02)`) and/or a subtle box-shadow change.
    *   Fade-in animation for video cards on initial load (optional): Use CSS keyframes or a library like Framer Motion.

3.  Interactive Elements

-   **User inputs:**
    *   Navigation items in the `TopNavigationBar` are clickable links (likely `<a>` tags or Next.js `<Link>` components).
    *   Video thumbnails are clickable, triggering video playback (likely using an `onClick` handler that navigates to the video page).
    *   Ellipses menu: Clickable, opens a context menu (implementation details not provided in the analysis, but likely a custom component or a library like Headless UI).

-   **Navigation:**
    *   `TopNavigationBar`:  Uses Next.js `<Link>` components for client-side navigation between different sections/categories.
    *   Video playback:  Clicking a video thumbnail navigates to the video's detail page (again, using `<Link>`).

-   **Loading states:**
    *   Consider using a placeholder or skeleton loading state for the `VideoGrid` while fetching video data.  Libraries like `react-loading-skeleton` can be helpful.
    *   Display a loading indicator (spinner) while fetching data for the top navigation or video grid.

-   **Micro-interactions:**
    *   Hover state on video cards (as described above).
    *   Active/selected state for the currently selected navigation item in the `TopNavigationBar` (e.g., change background color or text color).
    *   Tooltip on hover for the ellipses menu (optional).

4.  Component Architecture

-   **Layout components:**
    *   `PageContainer`:  Handles the overall page layout (centering, max-width, etc.).
    *   `VideoGrid`:  Manages the responsive grid layout for displaying video cards.

-   **Feature components:**
    *   `TopNavigationBar`:  Renders the top navigation bar and its items.
    *   `VideoCard`:  Displays a single video thumbnail, title, channel information, etc.
    *   `EllipsesMenu`: (If implemented as a separate component) Handles the context menu for video actions.

-   **Shared components:**
    *   `NavItem`: (Could be part of `TopNavigationBar` or a separate shared component) Renders a single navigation item.
    *   `Image`: (Optional) A wrapper around the `<img>` tag to handle image loading, optimization, and placeholder states.
    *   `Typography`: (Optional) Components for different text styles (e.g., `Heading`, `Subtitle`, `BodyText`).

-   **Container components:**
    *   A container component (e.g., `HomePageContainer`) could be used to fetch data (video list, navigation items) and pass it down to the presentational components (`VideoGrid`, `TopNavigationBar`). This separates data fetching logic from UI rendering. This is especially useful with Next.js's `getStaticProps` or `getServerSideProps`.
```

点击 访问 PromptCoder官网，了解更多信息并开始免费试用！