This is the system developed by Windsurf under my direction!
This is just the login interface; there are many more interfaces to come. This is a complete system providing AI services for lawyers, including front-end, back-end, database, calling third-party AI APIs, caching, authentication… everything.
I developed this system with the full assistance of Windsurf. In the end, I wrote 20% of the code, while 80% was written by Windsurf.
I will write a series to share the process of how I got Windsurf to create this system step by step.
This is a complete case study of a real project, with detailed steps and pitfalls encountered along the way, along with summaries of methodologies learned through various detours.
| Preliminary Remarks
If you only want to create a few static pages, commonly known as a landing page, for product display, personal showcase, or corporate image, you can use Windsurf without knowing software development.
However, if you want to create a small system that is fully functional, with login, user management, and some features, you will need to use various technologies such as front-end, back-end, database, login caching, etc. In this case, if you don’t understand software systems or the basics of software development, it is very likely that Windsurf will not be able to help you.
First of all, the development of such a system is not something that Windsurf will fully understand and complete just from a couple of your sentences. You need to communicate with it using the language of software development to ensure it collaborates effectively with you.
Then, you will encounter various exceptions. If you just throw these errors and exceptions at Windsurf without providing any of your own insights or opinions, its handling methods will become very scattered, leading to persistent issues or seemingly resolved problems that reappear later.
Think about it: if you hire someone to renovate your house but you don’t even understand the basics of renovation, such as foundational work, plumbing, kitchen and bathroom renovation, and soft decoration, you could easily be misled by that person, right? AI won’t actively mislead you, but when handling many situations, it has many choices based on what it has learned. If you cannot judge whether its decisions are correct, you will be led by the AI.
Therefore, my conclusion is that without a basic understanding of software systems and software development knowledge, it is unlikely that you can use Windsurf to create system-level project products. But can this foundational software system and software development knowledge be learned? Absolutely, even non-computer majors can learn it because this knowledge is related to software systems, not programming.
| Setting Up Windsurf
Windsurf is developed based on VSCode, so the overall interface is similar to VSCode, and basic usage does not require learning.
We only need to familiarize ourselves with some additional features of Windsurf.
First, the settings for Windsurf are located in the bottom right corner, not in the traditional File-Preference-Settings.
After opening it, you will see your current package status in the first panel. After the free period, you will need to purchase a package; otherwise, it will not support Write mode and Claude Sonnet, which would make using Windsurf pointless.
You can buy it on Taobao for 50 yuan a month. If after reading my entire project’s AI programming sharing, you still think 50 yuan is expensive, it means I didn’t write it well. I can only say it’s incredibly valuable!
The second panel is the settings; we must configure the Global AI Rules.
|
Put this sentence at the top of the global rule to make Windsurf always respond in Chinese.
Please always respond to all questions in Chinese. Regardless of the language the user asks in, please reply in Chinese.
This is a super magic phrase I discovered that can solve the issue of Windsurf answering off-topic or responding to questions unrelated to the project. The value of this prompt is self-evident.
When starting a new conversation, please first read the project description document (.md format) in the project’s root directory to fully understand the project’s situation and current development progress, and then answer questions. In continuous conversations, you can directly respond to the questions.
Next, create a .windsurfrule file in the project root directory and put all these rules in it.Modify the content related to the tech stack to correspond to the project.
|
## 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 usages – 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 usage 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 | When do you write? When do you let Windsurf write? First, solve the conceptual issues. With Windsurf, when should you write code yourself? When should you let Windsurf write? First, understand how Windsurf modifies your code. It will call the AI model, think about your problem, get a modification plan; then it will take the code to be modified in the current source file, along with the modification plan, call the AI model again, get the modified code, and update it in the corresponding local code file. Understanding the underlying principles, you will know where the time consumption lies. One is the time for the AI model to run, and the other is the time for network transmission. If the code in a few files adds up to hundreds of thousands of lines, think about how large the data packet is and how long it will take. The server is abroad, across the sea, and you can use Windsurf directly without a VPN. Understanding this principle, my practical suggestion is:
| Should you let Windsurf execute command line commands? Windsurf is indeed powerful; in addition to automatically modifying code, it also provides many command line suggestions and asks if you want to execute this command, such as npm start dev. My suggestion is, for commands like starting a project, it’s best not to choose Accept. Why? Because this will start the command in the dialogue session; if there’s an issue with the command, Windsurf will try to fix the problem, which is great, but it will also ask if you want to start this command to verify! Especially for commands like npm start dev, we don’t need to start many times. If we choose Accept for these commands in the Windsurf dialogue, you will find many nodejs processes in the task list, which were generated during our conversation. So, the best approach is to run project-related commands manually in the command line, and run it just once to fully utilize NodeJS’s fast hot reload to see the updated results immediately. However, if an error occurs during startup, you need to paste the error message to Windsurf for it to correct. For other types of commands, such as installing dependencies, file operations, etc., it’s best to select Accept in the Windsurf dialogue to let Windsurf execute directly. This way, Windsurf can monitor the execution results directly, and if there’s an error, it will correct it immediately.  |