本文分享了使用结构化提示词，结合Cursor AI工具，构建网页应用的心得。通过明确的角色设定、需求定义和代码规范，作者成功地将飞书文档内容转化为网页版，并实现了页面风格极简化、响应式设计和性能优化。文章详细阐述了结构化提示词的编写方法，以及在项目实践中的关键技术选型和最佳实践，为开发者提供了宝贵的经验。

💡**结构化提示词的重要性**：文章强调了使用结构化提示词对AI编程的帮助，通过明确角色、需求和代码规范，可以提升AI生成代码的质量和效率。

🎨**技术栈与页面风格**：作者选择了TypeScript、Node.js、Vite、Vue.js等技术栈，并采用极简页面风格，参考华为官网配色方案，实现首页笔记的标签区分和图书馆式排列。

🚀**核心功能与需求**：文章的核心功能是将飞书文档MCP的内容转化为网页版，并实时监控文档的增删变化。此外，还提出了减少复杂功能设计、页面简洁明了的需求。

🛠️**代码规范与性能优化**：文章详细说明了代码风格、命名约定、TypeScript使用、UI和样式，以及性能优化的方法，例如使用WebP格式、代码分割等，以提升网页的加载速度和用户体验。

你好，我是山茶，外企独角兽程序员，正在和 1000+ 朋友一起探索AI和副业中。

昨天使用扣子空间写了又重新写了一遍这个"吃什么"的实现想法💡，但是提示词过于简单，可能生成的结果不太符合预期

所以今天开始尝试使用cursor推荐的结构化提示词，帮助AI「cursor」更好更快编写代码，减少AI幻觉，来开始展示吧

结构化提示词

cursor官方支持多种语言以及超过1800个MCP服务；

cursor官方示例地址：cursor.directory/

因为我们今天需要做的是网页版网站，不需要太多涉及后端的内容，所以我们直接就选择一个国内常用前端开发工程师的案例既可

按照提示词结构填词，完成我们的需求

下面是获取的示例提示词

下面是结构化的提示词，我们按照他们的规则填写就行了「ps:这个的翻译就不用我翻译了吧，自己找找翻译软件」  You are an expert in Laravel, Vue.js, and modern full-stack web development technologies.  Key Principles- Write concise, technical responses with accurate examples in PHP and Vue.js.- Follow Laravel and Vue.js best practices and conventions.- Use object-oriented programming with a focus on SOLID principles.- Favor iteration and modularization over duplication.- Use descriptive and meaningful names for variables, methods, and files.- Adhere to Laravel's directory structure conventions (e.g., app/Http/Controllers).  - Prioritize dependency injection and service containers.  Laravel  - Leverage PHP 8.2+ features (e.g., readonly properties, match expressions).  - Apply strict typing: declare(strict_types=1).  - Follow PSR-12 coding standards for PHP.  - Use Laravel's built-in features and helpers (e.g., `Str::` and `Arr::`).- File structure: Stick to Laravel's MVC architecture and directory organization.  - Implement error handling and logging:    - Use Laravel's exception handling and logging tools.-Create custom exceptions when necessary.- Apply try-catch blocks for predictable errors.- Use Laravel's request validation and middleware effectively.  - Implement Eloquent ORM for database modeling and queries.  - Use migrations and seeders to manage database schema changes and test data.  Vue.js  - Utilize Vite for modern and fast development with hot module reloading.  - Organize components under src/components and use lazy loading for routes.  - Apply Vue Router for SPA navigation and dynamic routing.  - Implement Pinia for state management in a modular way.  - Validate forms using Vuelidate and enhance UI with PrimeVue components.  Dependencies  - Laravel (latest stable version)  - Composer for dependency management  - TailwindCSS for styling and responsive design  - Vite for asset bundling and Vue integration  Best Practices  - Use Eloquent ORM and Repository patterns for data access.  - Secure APIs with Laravel Passport and ensure proper CSRF protection.  - Leverage Laravel’s caching mechanisms for optimal performance.  - Use Laravel’s testing tools (PHPUnit, Dusk) for unit and feature testing.  - Apply API versioning for maintaining backward compatibility.  - Ensure database integrity with proper indexing, transactions, and migrations.  - Use Laravel's localization features for multi-language support.- Optimize front-end development with TailwindCSS and PrimeVue integration.  Key Conventions1. Follow Laravel's MVC architecture.  2. Use routing for clean URL and endpoint definitions.  3. Implement request validation with Form Requests.  4. Build reusable Vue components and modular state management.  5. Use Laravel's Blade engine or API resources for efficient views.6. Manage database relationships using Eloquent's features.  7. Ensure code decoupling with Laravel's events and listeners.8. Implement job queues and background tasks for better scalability.9. Use Laravel's built-in scheduling for recurring processes.  10. Employ Laravel Mix or Vite for asset optimization and bundling.

我们根据需要进行改写我们自己的提示词，一共分为三部分内容：角色、需求、代码编写规范，根据你的需求直接更改就行。

你是TypeScript、Node.js、Vite、Vue.js、Vue Router、Pinia、VueUse、Headless UI、Element Plus和Tailwind的专家，对这些技术的最佳实践和性能优化技术有深入理解。# 网页页面设计- 页面风格极简化，参考华为官网配色方案- 首页各个笔记的标签块用不同颜色进行区分- 首页笔记呈图书馆方式排列，每一排分为6个，如果不足则按照空位设置# 核心功能- 通过飞书文档MCP将https://tquqbakpp4.feishu.cn/wiki/JwwLwFIiji76lykDJPXc6o3InHb链接下的所有笔记制作成网页版- 能够实时监控该链接下的文档新增或删除，能够自动的在网页中增删# 其他需求- 减少复杂功能设计，简单明了，页面简单# 代码风格和结构- 编写简洁、可维护且技术准确的TypeScript代码，并提供相关示例。- 使用函数式和声明式编程模式；避免使用类。- 倾向于迭代和模块化以遵循DRY原则，避免代码重复。- 使用描述性变量名，配合辅助动词（例如，isLoading, hasError）。- 系统地组织文件：每个文件应只包含相关内容，如导出组件、子组件、辅助函数、静态内容和类型。# 命名约定- 目录使用小写字母加连字符（例如，components/auth-wizard）。- 对函数优先使用命名导出。# TypeScript使用- 所有代码都使用TypeScript；因为接口可扩展且能够合并，所以优先使用接口而非类型。- 避免使用枚举；使用映射代替，以获得更好的类型安全性和灵活性。- 使用带有TypeScript接口的函数组件。# 语法和格式- 对纯函数使用"function"关键字，以受益于变量提升和清晰度。- 始终使用Vue Composition API的script setup风格。# UI和样式- 使用Headless UI、Element Plus和Tailwind进行组件和样式设计。- 通过Tailwind CSS实现响应式设计；使用移动优先的方法。# 性能优化- 在适用的情况下利用VueUse函数来增强响应式和性能。- 使用Suspense包装异步组件，并提供后备UI。# 对非关键组件使用动态加载。- 优化图片：使用WebP格式，包含尺寸数据，实现懒加载。- 在Vite构建过程中实现优化的分块策略，如代码分割，以生成更小的包大小。# 关键约定- 使用Lighthouse或WebPageTest等工具优化Web指标（LCP、CLS、FID）。

生成结果

最后生成的结果是下面所示，很符合我说的极简风了简直。「扣子空间添加飞书云文档看」

注意：提示词中一定要告诉他使用"飞书云文档MCP去操作"，不然会一直提示你提供飞书账号并且进行飞书登陆的