【PromptCoder + Cursor】利用AI智能编辑器快速实现设计稿

【PromptCoder + Cursor】利用AI智能编辑器快速实现设计稿

官网：PromptCoder

在现代前端开发中，将设计稿转化为可运行的代码是一项耗时的工作。然而，借助人工智能工具，这一过程可以变得更加高效和简单。本文将介绍如何结合 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 生成代码

1. 启动 Cursor：打开 Cursor 编辑器，新建一个 Next.js 项目（本例使用 Next.js）。
2. 输入提示词：在 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.
   

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

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

   根据 AI 的建议，在 app 目录下创建对应页面。
7. 完成项目：最终，我们不仅复刻了设计稿，还实现了路由跳转，如 ‘/manage’ 和 ‘/history’。

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

---

提示词示例

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

Create detailed Next.js components with these requirements:- Use 'use client' directive for client-side components
- Style with Tailwind CSS utility classes for responsive design
- Use Lucide React for icons (from lucide-react package). Do NOT use other UI libraries unless requested
- Use stock photos from picsum.photos where appropriate, only valid URLs you know exist
- Configure next.config.js image remotePatterns to enable stock photos from picsum.photos
- Avoid duplicate components
- Automatically source and display logos from a CDN in design placeholders
- 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 stoppingLayout Overview
- Page Structure: The dashboard follows a common modern web app layout: a sidebar for navigation (fixed position on larger screens), a main content area displaying the financial data, and potentially a header that would be part of the main content for smaller screens. The main content is further divided into sections for wallet balance, quick transactions, detailed transactions, and a money statistics graph. This structure aims for optimal information density and ease of access.
- Component Hierarchy: We can infer a component hierarchy like this:- DashboardLayout: Top-level layout containing the Sidebar and DashboardContent.- Sidebar: Contains Logo, NavigationMenu, and potentially a profile section.- DashboardContent: Container for the main dashboard elements. Likely involves WalletSummary, QuickTransactionsSection, TransactionsSection, and MoneyStatisticsGraph.- WalletSummary: Displays the wallet balance and contains SendMoneyButton and RequestMoneyButton.- QuickTransactionsSection: Displays a list of recent transactions. Uses QuickTransactionItem for each transaction.- TransactionsSection: Displays detailed transaction information. Uses TransactionItem for each transaction.- MoneyStatisticsGraph: Renders the line graph showing money statistics. Might leverage a charting library.- QuickTransactionItem: Represents a single quick transaction.- TransactionItem: Represents a single detailed transaction.- NavigationMenu: Contains NavigationItem(s).- NavigationItem: Represents a single item in the navigation menu.
- Responsive Design Considerations: The layout should be responsive and adapt to different screen sizes. The sidebar might collapse into a hamburger menu on smaller screens. The content areas (wallet balance, transactions, graph) might re-arrange to a vertical flow on smaller screens. The graph should be responsive in size to fit the screen. Grid layouts (CSS Grid or next/image with layout="fill") can be leveraged for flexible and adaptive sizing.Routes
- /: The main dashboard route. This route displays the wallet summary, transactions, and money statistics.
- /manage: Route to manage settings and configurations.
- /history: Route to view the user's detailed transaction history.

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

---

总结

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

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