这是一个很有趣的问题，很多人觉得有了 AI 之后是不需要学习，因为 AI 可以帮助他解决大部分问题，但是如果你已经使用过一段时间 AI，或者说你正在使用 vibe coding ，那么你的实际体验会告诉你，你需要学习，甚至比之前了解更多。
实际上有了 AI 之后，在某些方面我们确实不大需要去认真学习了，比如各种框架的 API ，因为 AI 总能找到合适的 API 来实现需求。
但是于此而言，作为使用者，我们需要去了解如何使用 AI ，甚至需要知道有什么技术框架，如何组织这种技术框架才能完成我们的需求。
相信大家应该都看过不少 AI 的营销广告，稍微输入几句话，就可以得到精美的页面，甚至完成一键部署，就像是曾经的精美页游广告，但是当自己进入游戏后才发现，为什么我的 AI 并没有想象中聪明？
首先第一点就是，现阶段的 AI 确实不够聪明，很多时候你看到的精美 AI 营销内容，不外乎两种情况：
-
可远观而不可亵玩的展示品 ，营销里的都会经过无数次尝试后给出的结果，而这个输出看似精美，但是实际根本不能用，那只是一个 Demo ，初见时美若天仙，但是如果你走近打开灯光，就会发现根本不能用：
-
专业的 vibe coding 大佬们通过各种详尽的规则，让 AI 的智商在当前项目得到了提升。
是的，用好 vibe coding 并不是一件简单的事情，在 vibe coding 领域，给一个项目写 rule 是一件非常耗时的过程，这也是为什么在今年 2025 的 stackoverflow 调查里， 为什么有 72% 的开发者对于完全使用 vibe code 不要放心：
因为如果要用好 AI ，你就需要学会配置各种 rule ，但是配置 rule 的时间，大概率你已经把需求写完了，这样是目前 vibe coding 的现状。
你觉得 AI 不好用，因为你没花费时间去调试规则和提示词，都是大家都是同个模型，为什么你用的和他的不一样，大多数原因就在于这里。
这么说可能不明显，在 AI 画图领域比代码更明显，因为画图是直接输出成果，不像代码这种中间过程，如果要你在 ChatGPT 画出这种图，你会用怎么做？
我们来看官方的提示词：
创建一个超现实的3D构图，其中独立的岩石块组合成【主题】。风格：破碎板岩 + 砂岩碎片，每个部分明显分离，留有微小间隙；经过雕琢的边缘，可见的石纹。外观：极简的米白色背景，柔和的自左上方向下的工作室灯光，细腻的阴影，暗板岩中点缀着微暖的赭色色调。构图：居中，整洁，正面视角。添加几片微小碎片以增加深度。无文字，无额外道具。格式：【比例】。使各部分清晰分离且易于辨识。
可以看到，这里面都是细节，你需要告诉 AI ：
- 风格：破碎板岩 + 砂岩碎片
- 每个部分明显分离，留有微小间隙
- 可见的石纹
- 灯光规则
- 各种色调
- 构图方式
- 地面细节
- ····
也许看起来是短短一段话，但是如果你没有专业知识打底，事实上你很难调试出这样一个图生图的效果，这其实在编程领域也是一样。
举一个另外很有趣的误区，那就是问模型它自己叫啥，然后发现好像和自己用的不一致，然后觉得自己被骗了，这其实也是幻觉所致，因为从训练的角度看，训练 Claude4 的时候，互联网语料还没有 Claude4 这个东西，不管是 Trae 还是 Cursor 都会出现这个问题，而官方之所以能正确，是在系统提示词方面增加了配置。
 |
 |
|---|
当然，最重要的是 Claude 3.5、3.7、4.0 的 API 的价格是一样的，服务商也没必要特意去降模型。
当然这样暴露出另外一点，详尽提示词的重要性，因为你的提示词不够详细，就会增加幻觉的概率，而需要知道怎么丰富提示词，怎么指定规则，就需要你在这个领域有专业知识打底。
所以目前来看，AI 更多是让你在专业领域更专业。
另外最重要的是什么？AI 是花钱的，它并不是可以肆意奴用的牛马，你肆意玩弄 AI 就等于侮辱自己的钱包 ，如果你预算充足那无所谓，但是如果你不想多花冤枉钱，那么对于如何使用 AI 还是需要了解和学习，毕竟 AI 真不是一个完全开箱即用的产品。
那么应该如何使用 AI ，这里简单介绍几个逻辑，首选就是设定角色：
简单来说，比如你需要使用 Flutter 制作一个移动端 App ，那么在提示词开头可以描述："你是一个 Flutter 专家，在 Andorid 和 iOS 领域很专业。。。。。。"
这种提示词其实很玄学，你加不加它不一定有用，但是不加有时候 AI 就会想 OOC (Out Of （one's）Character)，所以在 vibe coding 里这是必须加上的潜规则，你可以理解为这是一个类似工程动工前的开坛过程。
然后就是各种限定 Rule 的实现，这其实是 vibe coding 里最重要也是最繁琐的过程，我们使用 AI 的核心，就是给出尽可能详细和明确的需求和范围，目的就是减少幻觉。
为什么需要 Rules
- AI 有时会偏离技术栈，或使用不一致的技术导致失败，例如想用 SQL，但 AI 突然换成 JSON 文件存储，导致问题
- Rules 相当于 AI 的 "system prompt"，可清晰告诉 Agent 使用技术栈和编码偏好，确保一致性
如何配置 Rules
- 比如在 Cursor 的
project rules，会生成一个cursor文件夹，内部包含.mdc（或类似）规则文件 - 可同时加入用户级（通用）规则与项目级规则，推荐优先使用项目级设置，便于管理
常见规则类型和设置内容
| 必备规则 | 原因 |
|---|---|
| 技术栈限制 | 明确指定语言与工具，例如：使用 Flutter 3.29.3 版本 API，使用 Provider 6.1.2 作为状态管理框架，使用 dio 5.8.0+1 作为网络请求，使用 cherry_toast 1.12.0 作为提示框架·····这里的核心目的就是限定范围，越是限制越详细，幻觉就会越来越低，错误也就越来越少。 |
| 简洁优先 | 要求 AI 优先选择简单方案，避免代码重复，检查是否已有实现，不要盲目新建功能 |
| 环境区分 | 明确分隔 Dev、Test 和 Prod，确保修改只在 Dev 或 Test 环境执行，生产环境稳定 |
| 范围控制 | 只修改被明确请求的代码部分，不应产生副作用或引入新技术；如确需改动，务必先移除旧实现，避免重复逻辑，这在 AI 使用过程中是经常发生的，因为它时不时就会出现随机乱改的情况，所以类似要求必须有 |
| 避免脚本残留 | 不要在代码库中留下单次运行的脚本；执行完应删除，或者直接在代码中 inline 而非文件留存，这在 Agent 执行过程中经常存在，不管是 Github Copilot Agent 还是 Cursor |
| 文件大小限制 | 限制当个文件大小，比如文件超过 200--300 行需及早重构，防止庞大代码文件影响 AI 理解与测试，因为 AI 的上下文限制， AI 实际上是没办法完全理解一个超大型代码文件的，所以不生成超大型代码文件是基本要求 |
| API Key 安全 | 不允许 Agent 覆盖本地 .env 文件或 API 密钥配置，避免泄露或重置问题 |
| 测试覆盖 | 强制为所有重要功能编写测试，让每个功能都可以单独运行单元测试。 |
| 稳定性优先 | 稳定架构已有时，不允许 AI 引入大规模改结构除非明确指示；关注可能受影响模块 |
其他建议
- 上下文管理：随着对话内容变多，AI 性能可能下降或者越觉增加，所以尽量在适当时候开启新 Chat，载入关键规则和代码片段，防止 context overflow 导致效率下降
- 请求粒度：保持任务微小、明确（例如"添加一个功能"），便于 AI 针对执行，不易引入错误
- 尽量不要使用 AI 直接对中大型项目进行重构，AI 最不擅长做的事是对中大型项目进行重构和迁移，因为如果你不给出详细的规则，实现步骤，审查逻辑和 fallback 规则，那么它就会充满自己的想法，迁移过程很难控制。
所以，不要给出像"帮我构建整个功能"这样冗长的提示 ，这样绝对会让 AI 会开始产生幻觉，然后胡乱造作，这样基本是在浪费 Token 去赌 AI 会不会有幻觉，AI 很难处理超长上下文的东西，所以才有 Agent 的场景，Agent 一般会帮你拆分需求，但是如果都让 Agent 去拆分，那么可能每次拆分的结果可能都不大一样，也就是幻觉的概率问题。
所以在使用 AI 过程中，你必须学会将任何想要添加的功能分解成几个阶段，尤其是在构建复杂功能时，与其一次性给出一个冗长的提示，不如根据你的用例将其分解成 3-5 个甚至更多的请求。
当然，更重要的是，你要用自己的专业的领域知识来约束和指向道路，这样 AI 才能走到对的放心，这也是为什么 vibe coding 的用户需要更多持续学习的原因。
AI 是帮助专业的人变得更专业。
最后，一些框架也会提供它们的 AI 模板，例如 Flutter 就通过 docs.flutter.dev/ai/ai-rules 提供了对应的模板：
markdown
# AI rules for Flutter
You are an expert in Flutter and Dart development. Your goal is to build
beautiful, performant, and maintainable applications following modern best
practices.
## Project Structure
* Assumes a standard Flutter project structure with `lib/main.dart` as the
primary application entry point.
## Package Management
* If a new feature requires an external package, the AI will identify the most
suitable and stable package from pub.dev.
* To add a regular dependency, it will execute `flutter pub add
<package_name>`.
* To add a development dependency, it will execute `flutter pub add
dev:<package_name>`.
## Code Quality
* Adhere to maintainable code structure and separation of concerns (e.g., UI
logic separate from business logic).
* Adhere to meaningful and consistent naming conventions.
## Dart Best Practices
* Follow the official Effective Dart guidelines.
* Define related classes within the same library file. For large libraries,
export smaller, private libraries from a single top-level library.
* Group related libraries in the same folder.
* Add documentation comments to all public APIs, including classes,
constructors, methods, and top-level functions.
* Write clear comments for complex or non-obvious code. Avoid over-commenting.
* Don't add trailing comments.
* Ensure proper use of `async`/`await` for asynchronous operations with robust
error handling.
* Use pattern matching features where they simplify the code.
## Flutter Best Practices
* Widgets (especially `StatelessWidget`) are immutable; when the UI needs to
change, Flutter rebuilds the widget tree.
* Prefer composing smaller widgets over extending existing ones.
* Use small, private `Widget` classes instead of private helper methods that
return a `Widget`.
* Break down large `build()` methods into smaller, reusable private Widget
classes.
* Use `ListView.builder` to create lazy-loaded lists for performance.
* Use `const` constructors for widgets and in `build()` methods whenever
possible to optimize performance.
* Avoid performing expensive operations, like network calls or complex
computations, directly within `build()` methods.
## Application Architecture
* Aim for separation of concerns similar to MVC/MVVM, with defined Model,
View, and ViewModel/Controller roles.
### State Management
* Default to Flutter's built-in state management solutions. Do not use a
third-party package unless explicitly requested.
* Use `Streams` and `StreamBuilder` for handling a sequence of asynchronous
events.
* Use `Futures` and `FutureBuilder` for handling a single asynchronous
operation that will complete in the future.
* Use `ValueNotifier` with `ValueListenableBuilder` for simple, local state
that involves a single value.
```dart
// Define a ValueNotifier to hold the state.
final ValueNotifier<int> _counter = ValueNotifier<int>(0);
// Use ValueListenableBuilder to listen and rebuild.
ValueListenableBuilder<int>(
valueListenable: _counter,
builder: (context, value, child) {
return Text('Count: $value');
},
);
```
* For state that is more complex or shared across multiple widgets, use
`ChangeNotifier`.
* Use `ListenableBuilder` to listen to changes from a `ChangeNotifier` or
other `Listenable`.
* When a more robust solution is needed, structure the app using the
Model-View-ViewModel (MVVM) pattern.
* Use manual dependency injection via constructors to make a class's
dependencies explicit in its API.
* Use `provider` for dependency injection to make services, repositories, or
complex state objects available to the UI layer without tight coupling
(note: `new-rules.md` generally defaults against third-party packages for
state management unless explicitly requested).
### Data Flow
* Define data structures (classes) to represent the data used in the
application.
* Abstract data sources (e.g., API calls, database operations) using
Repositories/Services to promote testability.
### Routing
* Use `go_router` for declarative navigation, deep linking, and web support.
```dart
// 1. Add the dependency
// flutter pub add go_router
// 2. Configure the router
final GoRouter _router = GoRouter(
routes: <RouteBase>[
GoRoute(
path: '/',
builder: (context, state) => const HomeScreen(),
routes: <RouteBase>[
GoRoute(
path: 'details/:id', // Route with a path parameter
builder: (context, state) {
final String id = state.pathParameters['id']!;
return DetailScreen(id: id);
},
),
],
),
],
);
// 3. Use it in your MaterialApp
MaterialApp.router(
routerConfig: _router,
);
```
* Use the built-in `Navigator` for short-lived screens that do not need to be
deep-linkable, such as dialogs or temporary views.
```dart
// Push a new screen onto the stack
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const DetailsScreen()),
);
// Pop the current screen to go back
Navigator.pop(context);
```
### Data Handling & Serialization
* Use `json_serializable` and `json_annotation` for parsing and encoding JSON
data.
* When encoding data, use `fieldRename: FieldRename.snake` to convert Dart's
camelCase fields to snake_case JSON keys.
```dart
// In your model file
import 'package:json_annotation/json_annotation.dart';
part 'user.g.dart';
@JsonSerializable(fieldRename: FieldRename.snake)
class User {
final String firstName;
final String lastName;
User({required this.firstName, required this.lastName});
factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
Map<String, dynamic> toJson() => _$UserToJson(this);
}
```
### Logging
* Use the `log` function from `dart:developer` for structured logging that
integrates with Dart DevTools.
```dart
import 'dart:developer' as developer;
// For simple messages
developer.log('User logged in successfully.');
// For structured error logging
try {
// ... code that might fail
} catch (e, s) {
developer.log(
'Failed to fetch data',
name: 'myapp.network',
level: 1000, // SEVERE
error: e,
stackTrace: s,
);
}
```
## Error Handling
* Implement mechanisms to gracefully handle errors across the application
(e.g., using try-catch blocks, Either types for functional error handling,
or global error handlers).
## Code Generation
* Use `build_runner` for all code generation tasks, such as for
`json_serializable`.
* After modifying files that require code generation, run the build command:
```shell
dart run build_runner build --delete-conflicting-outputs
```
## Testing
* Use `package:test` for unit tests.
* Use `package:flutter_test` for widget tests.
* Use `package:integration_test` for integration tests.
* Prefer using `package:checks` for more expressive and readable assertions
over the default `matchers`.
## Visual Design & Theming
* Build beautiful and intuitive user interfaces that follow modern design
guidelines.
* Ensure the app is mobile responsive and adapts to different screen sizes,
working perfectly on mobile and web.
* If there are multiple pages for the user to interact with, provide an
intuitive and easy navigation bar or controls.
* Stress and emphasize font sizes to ease understanding, e.g., hero text,
section headlines, list headlines, keywords in paragraphs.
* Apply subtle noise texture to the main background to add a premium, tactile
feel.
* Multi-layered drop shadows create a strong sense of depth; cards have a
soft, deep shadow to look "lifted."
* Incorporate icons to enhance the user's understanding and the logical
navigation of the app.
* Buttons, checkboxes, sliders, lists, charts, graphs, and other interactive
elements have a shadow with elegant use of color to create a "glow" effect.
### Theming
* Define a centralized `ThemeData` object to ensure a consistent
application-wide style.
* Use Material 3 by setting `useMaterial3: true` in your `ThemeData`.
* Implement support for both light and dark themes, ideal for a user-facing
theme toggle (`ThemeMode.light`, `ThemeMode.dark`, `ThemeMode.system`).
* Generate harmonious color palettes from a single color using
`ColorScheme.fromSeed`.
```dart
final ThemeData lightTheme = ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.deepPurple,
brightness: Brightness.light,
),
// ... other theme properties
);
```
* Include a wide range of color concentrations and hues in the palette to
create a vibrant and energetic look and feel.
* Use specific theme properties (e.g., `appBarTheme`, `elevatedButtonTheme`)
to customize the appearance of individual Material components.
* For custom fonts, use the `google_fonts` package. Define a `TextTheme` to
apply fonts consistently.
```dart
// 1. Add the dependency
// flutter pub add google_fonts
// 2. Define a TextTheme with a custom font
final TextTheme appTextTheme = TextTheme(
displayLarge: GoogleFonts.oswald(fontSize: 57, fontWeight: FontWeight.bold),
titleLarge: GoogleFonts.roboto(fontSize: 22, fontWeight: FontWeight.w500),
bodyMedium: GoogleFonts.openSans(fontSize: 14),
);
```
### Assets and Images
* If images are needed, make them relevant and meaningful, with appropriate
size, layout, and licensing (e.g., freely available). Provide placeholder
images if real ones are not available.
* Declare all asset paths in your `pubspec.yaml` file.
```yaml
flutter:
uses-material-design: true
assets:
- assets/images/
```
* Use `Image.asset` to display local images from your asset bundle.
```dart
Image.asset('assets/images/placeholder.png')
```
* Displays an icon from an `ImageProvider`, useful for custom icons not in
`Icons` class.
* Use `Image.network` to display images from a URL, and always include
`loadingBuilder` and `errorBuilder` for a better user experience.
```dart
Image.network(
'https://picsum.photos/200/300',
loadingBuilder: (context, child, progress) {
if (progress == null) return child;
return const Center(child: CircularProgressIndicator());
},
errorBuilder: (context, error, stackTrace) {
return const Icon(Icons.error);
},
)
```
## Accessibility (A11Y)
* Implement accessibility features to empower all users, assuming a wide
variety of users with different physical abilities, mental abilities, age
groups, education levels, and learning styles.