3天时间，我使用 Cursor 开发了一个提示词生成器

先介绍一下自己，人工智能专业研究生，之前对于 Web 开发只会前端，了解大模型的原理和调用，之前从来没有完整构建过一个产品的经历。但现在有Claude和GPT加持的AI编程工具（Cursor），让大多数第一次有机会去真正完成一个由自己构建的产品。毕竟，在此之前，不管你是程序员还是产品经理，绝大多数人在此之前都没有完整做过一个产品。在AI的加持下，只要别有害怕、恐惧的情绪，你将第一次获得真真正正的

正宗咸豆花

1716人浏览 · 2024-11-25 13:38:20

正宗咸豆花 · 2024-11-25 13:38:20 发布

3天时间，我使用 Cursor 开发了一个提示词生成器

工具地址：https://www.promptate.xyz
请添加图片描述

在AI的加持下，只要别有害怕、恐惧的情绪，你将第一次获得真真正正的去实现自己的想法的权利。

如果你需要产品经理，Claude和ChatGPT可以胜任。
如果你需要设计师，Claude、ChatGPT、Ideogram、Midjourney、Flux.1、v0.dev都可以成为你的设计师。
如果你需要程序员，那就更不用说了，Claude和ChatGPT精通所有编程语言。

Cursor使用

相信能读到这篇文章的朋友们或多或少都听过 cursor，这是今年非常出圈的 AI 编程产品，作为 VSCode 套壳，它实现了对 VSCode 用户的无缝衔接，加上目前最好的模型和 Apply 功能，让 Cursor 成为了目前地表最强的 AI Copilot。

使用指南：https://cursor101.com/

想法

我们几乎每天都在和提示词打交道，如何让 AI 准确地理解用户的意图成了最关键的事。于是就产生了开发一个通用的提示词生成优化器的想法。在看了一些类似产品后（如promptperfect），逐渐明确了产品的思路：
两种生成方式：

标准模式：优化用户本身的简单提示词
结构化模式：把用户的提示词变成结构化的内容

此外，必要的 prompt 测试功能也是有的。

验证

有了产品最基本功能的想法，就可以把这些想法输出为提示词给 Curosr，让它帮忙开发了。不过在此之前，最好先确定技术栈。这次开发选用的是 Next.js，一方面是自己比较熟悉，其次是 Next 的生态和对 AI 产品的适用性都很高，也很好做 SEO。初始化好项目后，剩下就是 cursor 的事了。

这里分享几个在 cursor 开发中的实践tips：

Prompt- 用专门的文件保存相关的Prompt。Prompt尽量写的简洁明确。不啰嗦但是也不要缺少必要的信息。你越明确，Cursor就越不会过度自由发挥。如果Prompt过长，cursor不可能一次完成你所有的需求。毕竟会有大模型context window的限制。所以，你可以反复通过提问大模型，是否完成了你文件中prompt提示的全部需求。Cursor会自动进行检查。你甚至还可以让他自己给出清单，告诉你哪些已经完成了，哪些还没有完成。基于这些信息再给出新的指令。
Composer - 即便你给出了你要求的目录结构，Cursor有时候也会在最开始的时候使用错误的路径。在这个时候，你哪怕告诉cursor，他也没有办法对已经创建的目录和文件进行删除。请记得通过命令及时自行删除，否则相同的文件名字，有可能会造成大模型的误判。每一次和Composer进行交互，都要认真查看相关的返回信息，如果有错误请及时修正，而不是无脑的accept-all。Accept-all以后也请做必要的测试，并通过git提交。
Cursorfules - 可以将一些对话中需要一直强调的话，加入cursorrules中，例如要求必须用中文回答，一些具体的规则模版可以参考-cursor.directory

有了提示词，后面只需要让 cursor 不断修改，就能得到一个可用的demo。

提示词分享

关于 cursor 的提示词，我认为在项目初始化时就需要做到准确，尽量描写清楚你想做的每一个点，包括UI，功能和交互，这样生成出来的项目在后续迭代中会少很多问题；此外，一个清晰明了的目录结构也很重要。

下面是一个针对 cursor，生成页面的提示词案例：

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

<summary_title>
AI-Powered UI Design Prompt Generator Dashboard
</summary_title>

<image_analysis>

1. Navigation Elements:
- Top header with: Logo and user email
- Framework icons with: Flutter, React, and Next.js


2. Layout Components:
- Main container: 100vw x 100vh
- Content area: 60% left, 40% right split
- Upload box: ~400px x 300px
- Padding: 24px for main sections


3. Content Sections:
- Hero heading section
- Description text block
- Framework selection area
- Upload/drag-drop zone
- Analysis focus dropdown
- Generate prompt button
- Progress counter


4. Interactive Controls:
- "Choose files" button
- Dropdown menu for analysis focus
- Generate prompt button with loading state
- Drag and drop zone
- Framework selection icons


5. Colors:
- Background: #000D18
- Primary: #0066FF
- Secondary: #1E2A35
- Text: #FFFFFF
- Accent: #2B95FF
- Border: rgba(255,255,255,0.1)


6. Grid/Layout Structure:
- Two-column layout for desktop
- Single column for mobile (<768px)
- 24px grid spacing
- Flexible container width: 1140px max
</image_analysis>

<development_planning>

1. Project Structure:

src/
├── components/
│   ├── layout/
│   │   ├── Header
│   │   └── MainLayout
│   ├── features/
│   │   ├── FileUpload
│   │   ├── PromptGenerator
│   │   └── FrameworkSelector
│   └── shared/
├── assets/
├── styles/
├── hooks/
└── utils/


2. Key Features:
- Drag and drop file upload
- Framework selection
- Analysis focus selection
- Prompt generation
- Progress tracking


3. State Management:
interface AppState {
├── upload: {
│   ├── file: File | null
│   ├── status: 'idle' | 'uploading' | 'complete'
│   └── error: string | null
├── }
├── generator: {
│   ├── framework: 'flutter' | 'react' | 'nextjs'
│   ├── analysisType: string
│   ├── promptCount: number
│   └── isGenerating: boolean
├── }
}


4. Routes:
const routes = [
├── '/',
├── '/dashboard',
├── '/history',
└── '/settings'
]



5. Component Architecture:
- MainLayout (container)
- FileUploadZone (drag & drop)
- FrameworkSelector (icons)
- AnalysisDropdown (select)
- GenerateButton (action)


6. Responsive Breakpoints:

$breakpoints: (
├── 'mobile': 320px,
├── 'tablet': 768px,
├── 'desktop': 1024px,
└── 'wide': 1440px
);

</development_planning>