【Cursor+PromptCoder】利用AI智能编辑器快速实现设计稿（自动提示词版）

在现代前端开发中，将设计稿转化为可运行的代码是一项耗时的工作。然而，借助人工智能工具，这一过程可以变得更加高效和简单。本文将介绍如何结合 PromptCoder 和 Cursor，从设计截图生成页面和对应的路由，极大提升开发效率。

【Cursor】AI驱动的代码编辑器

Cursor 是一款基于 VS Code 构建的 AI 智能代码编辑器，集成了强大的AI功能，旨在优化开发者的编码体验。它不仅提供传统的代码补全，还能通过自然语言交互生成代码、理解项目上下文，并助力开发者快速实现复杂的开发任务。

Cursor 的核心特点

智能补全：通过 Tab 功能，Cursor 能根据上下文预测并提供多行代码建议。
聊天交互：内置聊天窗口，开发者可以直接与 AI 对话，请求生成特定代码或解决问题。
项目理解：Cursor 能够分析整个项目结构，确保生成的代码与现有代码无缝衔接。
多框架支持：支持多种语言和框架，如 React、Next.js、Vue 等，适应不同开发需求。
与传统编辑器相比，Cursor 的 AI 能力让开发者能够以更自然的方式与代码交互，显著减少手动编写的时间。

【PromptCoder】智能代码提示词生成

PromptCoder 是一款利用人工智能的代码生成工具，能够识别设计图或截图，并生成匹配的前端代码提示词。无论是复杂的交互组件还是简洁的页面布局，PromptCoder 都能帮助开发者快速复刻设计稿，提升效率并减少错误。

PromptCoder 的核心特点

交互简单易用：通过先进的图像识别技术，只需上传设计图即可生成精确的代码提示词。
从免费开始：提供免费注册体验，低门槛尝试其强大功能。
多框架支持：兼容 React、Vue、Flutter 等多种前端框架，轻松集成到现有项目。
多种模式选择：普通模式生成单页提示词，而 cascade 模式能分析潜在路由并生成多页面提示词。

实战案例：从 Dribbble 中复制一个 Dashboard 页面

下面，我们将通过一个实战案例，展示如何使用 PromptCoder 和 Cursor，从 Dribbble 的设计稿生成一个功能完整的 Dashboard 页面，并设置相关路由。

步骤 1：选择设计稿

首先，前往 Dribbble 寻找一个心仪的设计稿。例如，我们选择了一个简洁清新的 Dashboard 设计，只需截图即可。

步骤 2：使用 PromptCoder 生成提示词

将设计截图上传至 PromptCoder，选择 cascade 模式。工具会自动识别设计中的元素（如导航栏、主内容区等），分析潜在路由（如 ‘manage’、‘history’），并生成详细的代码提示词。

步骤 3：使用 Cursor 生成代码

启动 Cursor：打开 Cursor 编辑器，新建一个 Next.js 项目（本例使用 Next.js）。
输入提示词：在 Cursor 的聊天窗口中，粘贴 PromptCoder 生成的提示词部分。例如，输入：

Create a Next.js component for a dashboard layout with a fixed sidebar and main content area. The sidebar includes a logo and navigation menu. Use Tailwind CSS for styling.

生成代码：AI 会生成对应的代码片段，点击接受后插入到项目中。
逐一构建组件：继续通过聊天功能生成其他组件，如 WalletSummary、TransactionsSection 等。
智能补全：在手动调整代码时，使用 Tab 功能获取 AI 的上下文建议，加速编码。
配置路由：在聊天窗口询问：

How do I set up routes for '/manage' and '/history' in Next.js?

根据 AI 的建议，在 app 目录下创建对应页面。

完成项目：最终，我们不仅复刻了设计稿，还实现了路由跳转，如 ‘/manage’ 和 ‘/history’。

通过这种方式，我们利用 Cursor 的 AI 能力，将 PromptCoder 的提示词转化为功能完整的代码。

提示词示例

以下是 PromptCoder 生成的详细提示词示例，您可以在 Cursor 的聊天窗口中使用它来指导代码生成：


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

   Okay, here's a detailed description optimized for Next.js code generation, based on your UI analysis, and tailored for IDE tools like Cursor and Windsurf:

```
1. Layout Overview

- **Page Structure:**
    - The page utilizes a classic dashboard layout with a fixed-width sidebar on the left and a main content area that takes up the remaining space.  The main content area appears to use a grid or flexbox layout to arrange cards (dashboard widgets).  A top bar spans the entire width, above both the sidebar and main content.
    - The structure can be represented in Next.js using a combination of `<div>` elements for containers and semantic HTML5 elements where appropriate (e.g., `<nav>` for the sidebar, `<header>` for the top bar, `<main>` for the content area, `<aside>` could also be used).  A layout component (`Layout.tsx` or similar) is highly recommended to encapsulate the sidebar and top bar, providing a consistent structure across multiple pages.
    - Key structural components:
        -   `Layout` (wraps entire page, handles sidebar and top bar)
        -   `Sidebar`
        -   `TopBar`
        -   `MainContent` (holds the grid of cards)
        -   `DashboardCard` (a reusable component for each card)

- **Component Hierarchy:**
    - `App` (root component)
        - `Layout`
            - `Sidebar`
                - `Logo`
                - `SearchBar`
                - `NavItem` (repeated for each navigation item)
                - `DownloadSection`
            - `TopBar`
                - `Logo`
                - `DateDisplay`
                - `NotificationIcon`
                - `UserProfile`
            - `MainContent`
                - `DashboardCard` (repeated, with different content)
                    - `CardHeader`
                    - `CardContent` (content varies greatly - see below)
                        - *Water Card:* `WaterDisplay`
                        - *Calories Card:* `CalorieDisplay`
                        - *Step Goals Card:* `CircularProgress`
                        - *New Route Card:* `MapDisplay`
                        - *Meditation Class Card:* `ImageWithQRCode`
                        - *Today Plans Card:* `MealList`
                        - *Weight Card:* `WeightChart`
                        - *Workout Card:* `WorkoutTimer`
                - `WorkoutProgressSection`
                    -`ProgressBar`
                    -`IncreaseDurationButton`

- **Responsive Design Considerations:**
    - The layout should be responsive, adapting to different screen sizes.  This can be achieved using CSS media queries and a mobile-first approach.
    - **Sidebar:** On smaller screens, the sidebar could collapse into a hamburger menu or a bottom navigation bar.  This can be handled with a state variable (e.g., `isSidebarOpen`) and conditional rendering.
    - **Main Content:** The grid of cards should reflow.  On smaller screens, the cards should stack vertically (one card per row).  CSS Grid's `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));` (or similar) is ideal for this.  The `minmax()` value should be adjusted based on the desired minimum card width.
    - **Top Bar:**  Elements in the top bar might need to be rearranged or hidden on smaller screens.
    - Use of a CSS framework like Tailwind CSS (favored by Windsurf) or a component library like Material UI, Chakra UI, or Ant Design can significantly simplify responsive design implementation.  These frameworks provide pre-built responsive components and utilities.

2. Styling Specifications

- **Color Schemes:**
    - **Primary:** Teal/Turquoise (`#4FC8B9` - suggested).  Use CSS variables (e.g., `--primary-color: #4FC8B9;`) for easy modification and theming.  Apply this to active navigation items, progress bars, and potentially button hover states.
    - **Secondary:** Light Gray (`#F5F9FA`). Use as the background color for the main content area and some secondary text.  `--secondary-color: #F5F9FA;`
    - **Neutral:** White (`#FFFFFF`) for the main background.  Dark gray/black for text.  `--background-color: #FFFFFF;`, `--text-color: #333;` (or similar dark gray).
    - **Accent:** Green (`#69D196`) for completed progress bars. Red (`#C24242`) for the workout timer. `--accent-green: #69D196;`, `--accent-red: #C24242;`
    - **Icons:** Darker shade than surrounding backgrounds.  Consider using a consistent icon library (e.g., Font Awesome, Heroicons, React Icons) for easy management and styling.

- **Typography:**
    - Use a sans-serif font (e.g., Open Sans, Roboto, or a similar web-safe font).  Define font families in your CSS or Tailwind configuration.
    - **Headings:** Larger font sizes (e.g., `text-xl`, `text-2xl` in Tailwind) and semi-bold/bold weights (`font-semibold`, `font-bold`).
    - **Body Text:** Smaller font size (e.g., `text-base`, `text-sm`) and normal/medium weight (`font-normal`, `font-medium`).
    - **Emphasis:** Use `font-bold` and color (primary or accent colors) to highlight important information.
    - Define reusable text styles (e.g., using Tailwind's `@apply` directive or CSS classes) to maintain consistency.

- **Spacing and Alignment:**
    - Use a consistent spacing scale (e.g., 4px, 8px, 16px, 24px, 32px).  Tailwind's spacing scale (e.g., `p-4`, `mx-2`, `my-8`) is highly recommended.
    - Elements are generally left-aligned.  Use `text-left` (or the default left alignment) for most text.  Center some elements (e.g., progress indicators) using `text-center` or flexbox/grid centering techniques.
    - Use ample whitespace to create a clean and uncluttered layout.
    - Consistent margins and padding around elements and within cards.

- **Animations and Transitions:**
    - **Progress Bars:** Use CSS transitions or animations to smoothly update the progress bars.  Consider libraries like `framer-motion` or `react-spring` for more complex animations.
    - **Hover States:** Add subtle transitions (e.g., `transition-colors duration-200`) to button and navigation item hover states.  Change the background color or text color slightly on hover.
    - **Sidebar Collapse:** If implementing a collapsible sidebar, use a smooth transition (e.g., `transition-transform duration-300 ease-in-out`) to animate the opening and closing.

3. Interactive Elements

- **User Inputs:**
    - **Search Bar:**  Use an `<input type="text">` element.  Consider adding a clear button and handling the search input with a state variable and an `onChange` event handler.
    - **Workout Duration Increase:** Use a `<button>` element.  Increment a state variable (representing the workout duration) on click.
    - **Weight Kg Selector:** This could be a dropdown (`<select>`) or a custom component.

- **Navigation:**
    - **Sidebar:** Use a `<nav>` element containing a list (`<ul>`, `<li>`) of navigation items.  Each item should be a link (`<a>` or Next.js's `<Link>` component).  Use an `active` class (or a similar mechanism) to highlight the currently selected page.
    - **Top Bar:**  The date, notification icon, and user profile are likely links or buttons.

- **Loading States:**
    - While not shown, implement loading states for data-fetching operations.  Use spinners or skeleton loaders (e.g., from a component library) to indicate that data is being loaded.  Conditional rendering based on a loading state variable (e.g., `isLoading`) is key.

- **Micro-interactions:**
    - **Hover States:** As mentioned above, use subtle color changes or other visual cues on hover.
    - **Active States:** Clearly indicate the active navigation item.
    - **Button Clicks:** Provide visual feedback on button clicks (e.g., a slight change in background color or a ripple effect).

4. Routes

- `/` (Dashboard - Main page)
- `/workout`
- `/nutrition`
- `/health-stats`
- `/goals`
- `/analytics`
- `/settings`
- The search bar might trigger a search results page (e.g., `/search?q=...`) or update the current page dynamically.

These routes would correspond to files within the `pages` directory in a Next.js project (e.g., `pages/workout.tsx`, `pages/nutrition.tsx`, etc.). The `Layout` component would be used in each of these page components to maintain the consistent sidebar and top bar. The `_app.tsx` file would likely wrap the entire application to provide global styles and context.
```

您可以将上述提示词分段输入 Cursor 的聊天窗口，逐步生成代码。例如，先请求生成 DashboardLayout，再生成 Sidebar，以此类推。

总结

通过 PromptCoder 和 Cursor 的协作，开发者可以快速将设计稿转化为可运行的代码。PromptCoder 负责从截图生成详细提示词，而 Cursor 则通过其 AI 功能帮助实现代码编写和路由配置。相比传统开发，这种方式不仅高效，还赋予开发者更多控制权。

立即访问官网：PromptCoder，获取免费试用！您也可以前往 Cursor 官网下载这款强大的 AI 编辑器，开启智能编码之旅。