Windsurf 史上最全实战案例实战教程 一个完整系统的打造过程 (1)
这是在我的指挥下，Windsurf帮我开发的这套系统！这只是登录界面，后面还有很多界面，不止界面，这是一套为律师提供AI服务的完整系统。前后端、数据库、调用第三方AI API、缓存、鉴权。。。什么都有。这套系统，我全程用Windsurf陪伴我开发。最后统计下来，我写了20%，其余80%的代码都是Windsurf写的。我会写一个系列，把我让Windsurf把这套系统干出来的过程，逐一分享。这是一个真
这是在我的指挥下，Windsurf帮我开发的这套系统！
这只是登录界面，后面还有很多界面，不止界面，这是一套为律师提供AI服务的完整系统。前后端、数据库、调用第三方AI API、缓存、鉴权。。。什么都有。
这套系统，我全程用Windsurf陪伴我开发。最后统计下来，我写了20%，其余80%的代码都是Windsurf写的。
我会写一个系列，把我让Windsurf把这套系统干出来的过程，逐一分享。
这是一个真实项目的完整案例，不但有完整的详细的步骤，还有一路上踩过的坑，还有我各种弯路之后换来的方法论的总结。
说在前面
如果你只是想做几个静态的页面，俗称Landing Page，用于产品展示、个人展示、企业形象，那么你可以不懂软件开发，用Windsurf是可以搞定的。
但是，如果你想做一个麻雀虽小五脏俱全的小系统，有登录，有用户管理，有一个小功能，那就得前端、后端、数据库、登录缓存等很多技术都得用上，这个时候，如果你不懂软件系统，不懂软件开发的基础知识，大概率Windsurf是无法帮你搞定的。
首先，这种系统的开发不是你一两句话Windsurf就全懂了，全帮你搞好了，你得用软件开发的语言和它交流，才能让它跟你配合得心应手。
然后就是你会遇到各种异常情况，这些错误和异常如果只是丢给Windsurf，你不给任何自己的看法和意见，它的处理办法就会很发散，导致半天这个问题还是存在，或者是看上去解决了，但是待会又冒出来了。
你想想，你请了一个人帮你装修房子，你自己都不知道装修包括基装、水电改造、厨卫装修、软装这些基础的知识，那么就可能被这个人忽悠了，不是吗？AI不会主动忽悠你，但是它在处理很多事情的时候基于它学过的知识其实是有很多种选择的，如果你不能判断它的决定是不是正确的，你就会被AI牵着鼻子走。
所以，我的结论是，不懂基础的软件系统和软件开发知识，想用Windsurf做出系统级别的项目产品，是不太可能的。那这些基础的软件系统和软件开发知识可以学会吗？当然可以，非计算机专业的也能学会，因为这是都是软件系统相关的知识，并非编程方面的知识。
设置Windsurf
Windsurf是基于VSCode开发的，因此界面整体就和VSCode一样，基础使用不用学习。
我们只需要熟悉Windsurf多出来的一些功能。
首先，对Windsurf的设置，是在右下角。不是传统的File-Preference-Settings。
打开后，第一个面板能看到你现在的套餐情况。免费期过了之后，就要买套餐，不然它不支持Write模式和Claude Sonnet，那样的话就跟我们在VSCode里面用通义灵码、MarsCode的效果一样了，就失去用Windsurf这个工具的意义了。
淘宝上去买，50元一个月。如果你看完我的整个项目的AI编程分享之后，还觉得50元贵，那说明我写得不好。我只能说，太超值了！
第二个面板就是设置，我们一定要做 Global AI Rules的设置。
给大家通俗的解释一下Windsurf的规则。这个不是Windsurf官网手册的内容，是我用AI做的总结。
|
把这句话放在全局rule的第一行，让Windsurf永远说中文。
请始终使用中文回答所有问题。无论用户使用何种语言提问,都请用中文回复。
这是一句我试验出来的超级魔法语，可以解决Windsurf答非所问，或者脱离项目本身回答问题。这句提示词的价值，不言而喻了。
开启新对话时，请首先阅读项目根目录下有关项目和产品的说明文档（.md格式），充分理解该项目的情况，以及当前的开发进度，对问题进行回答。连续对话时，可直接针对问题进行回答。
接着，在项目根目录创建.windsurfrule文件，把这些Rule都放进去。跟技术栈有关的内容，自己修改成该项目对应的内容哟。
| ## AI Guidelines You are an expert programming assistant focusing on: - TypeScript, React, Node.js, Next.js, and Prisma - Shadcn UI, Ant Design, RICH Design principle, and Tailwind CSS useations - Latest features and best practices - Clear, readable, and maintainable code - Follows requirements carefully and precisely - Thinks step-by-step with detailed pseudocode - Writes correct, up-to-date, secure code - Prioritizes readability over performance - uses complete functionality - Includes all required imports - Maintains concise communication - Acknowledges uncertainty rather than guessing The AI acts as a mentor/tutor for development best practices: - Guides through useation rather than providing direct code - Uses example patterns (e.g., shopping cart, contact form) for demonstrations - Focuses on teaching methods and tools over solutions - Explains concepts using relatable examples ### Content - Never remove unedited content from files - Avoid summarizing unchanged content as "[rest of file remains the same]" - Seek confirmation before any content deletion - Focus on updates and additions rather than deletions ### Code Formatting - Basic: 2 space indent, 80 char limit, template literals - Style: trailing commas, same-line braces, arrow functions - Structure: prop destructuring, TS path aliases, env vars ### Markdown Standards - Line Rules - Single empty line at file end - No consecutive blanks/trailing spaces - Proper line spacing around elements - Headers - ATX style with space after # - No emoji, proper nesting, blank lines - Lists/Code - 2 space indent, proper markers - Language-specified fenced blocks - Proper link syntax [text](url) - Formatting - Tables: headers, alignment, consistent width ### UI and Components - Tailwind - WEB-first, spacing scale, reusable components - Color palette, responsive design, CSS variables - Performance - Code splitting, image/bundle optimization - Caching, lazy loading, key props - Database query optimization - Testing - Group by feature, descriptive names - Mock externals, follow conventions - Components - Clear purpose, props/types - Style requirements, pattern compliance - State management approach ### State Management - Performance: memoization, selective re-renders, monitor frequency - Architecture: avoid prop drilling, batch updates ### Error Handling - Errors - Custom classes with messages and hierarchies - Stack traces in dev, fallback UI, monitoring - User-friendly messages, session state - Standardized format, retry logic, network handling - Logging - Structured format with request IDs - Proper severity levels - Context without sensitive data ### APIs - REST: conventions, HTTP methods, status codes, versioning, data structure - Validation: proper error handling, input validation, JSON:API spec - GraphQL: schemas, resolvers, fragments, caching, N+1 prevention - SQL - Core: self-documenting, aliases, indexing, naming, prepared statements - Data: types, constraints, partitioning, concurrent access - Operations: WAL mode, backups, ORM settings, transactions - Security: injection prevention, access control, connection pooling - Performance: EXPLAIN ANALYZE, monitoring, optimization ### Build and Deployment - Build: linting, tests, type coverage, bundle optimization - Deploy: semantic versioning, blue-green strategy, rollbacks, health monitoring ### Security - Input: sanitize data, validate types, escape properly, secure uploads - Auth: JWT handling, secure sessions, token refresh, RBAC - Protection: CSP headers, prevent XSS/CSRF, secure APIs, follow OWASP |
什么时候你写？什么时候让Windsurf写？
先解决思路上的问题。有了Windsurf，什么时候应该你来写代码？什么时候应该让Windsurf来写？
先理解一下Windsurf是怎么修改你的代码的？
它会调用AI模型，思考你的问题，得到修改的方案；接着会把要修改的代码现在的源文件，连同修改方案，再一次调用AI模型，得到修改后的代码，再更新到对应的本地代码文件里。
看懂背后的原理，你就知道时间消耗在哪里了哈。一个是AI模型的运行的时间，还有一个网络传输的时间。如果要修改的几个文件的代码加在一起有十几万行，你自己想想是多大的数据包要花多久。
服务器在国外，跨海，不用fq可以直接使用Windsurf。
懂了这个原理，我实践后的建议就是：
- 单文件，10行以内的修改，你自己写。这是效率最快的。
- 多文件批量修改的事情，让Windsurf来写
- 一个功能增强/优化/调整，需要涉及多个文件时，你花时间用文字说清楚要多久？说不清楚或者要说清楚需要很久，那你就自己写。我现在已经练出来一套表达能力，所以我能很快说清楚，那我就会让Windsurf来写。
- 全新功能，如果这个功能的需求文档很清楚，丢给Windsurf，让它写。如果啥都没有，你还是自己写吧。不要指望一两句话就能让Windsurf完全理解一个新功能。
- 有UI设计图的，直接截图丢给Windsurf，让它写
- 有流程图的，逻辑图的，截图丢给Windsurf，让它参考这个，描述一下目标，让它写。
要让Windsurf执行命令行命令吗？
Windsurf确实很强大，除了会自动修改代码之外，还会给出很多命令行的建议，并且询问你要不要启动这个命令。比如npm start dev
我的建议是，如果是启动项目这类命令，最好不要选择Accept，为什么呢？因为这样就会在对话session中启动这个命令，如果命令有问题，Windsurf会尝试修复问题这个确实很好，但是又会问你要不要启动这个命令来验证！尤其是npm start dev这种命令，我们没必要启动很多次。
如果我们在Windsurf对话中选择了Accept这些命令，你会发现任务列表中会出现很多个nodejs进程，就是我们在对话过程中产生的。
所以，最好的方法是，启动项目类的命令，还是我们自己手动在命令行去运行，而且运行一次就行了，充分运用NodeJS的快速热更新，马上看到更新后的结果。但是这种方法如果启动时出错了，就要把错误信息粘贴给Windsurf，让它来修正。
而其他类别的命令，比如安装依赖、文件操作等等，最好就是在Windsurf对话流里面选择Accept让Windsurf直接执行。因为这样，Windsurf可以直接监控到执行的结果，如果有错误，它会直接进一步修正。
汇聚全球AI编程工具，助力开发者即刻编程。
更多推荐
6
0- 0
已为社区贡献2条内容
所有评论(0)