HarmonyOS 鸿蒙Next让 AI 更「懂」鸿蒙Next之我的实践
HarmonyOS 鸿蒙Next让 AI 更「懂」鸿蒙Next之我的实践 话不多说，先看实现效果(后期开发完善后会上线，现在只用来练习)：
可以关注我的微信公众号，时不时分享一些AI配合开发的知识
19 日参加华为开发者大会，上手鸿蒙 Next 的开发体验后心痒难耐，想写个原生应用却卡在两痛点：
❌ 无明确开发方向，不知做什么功能
❌ DevEco Studio 的 CodeGenie 生成代码杂乱，错误频发，而且不是自己想要的结果
试了 Trae+Claude4.0 组合后彻底改观 ——自定义规则 + 精准提示词，AI 能直接生成符合规范的 ArkTS 代码！
🚀 四步实现：AI 快乐开发鸿蒙 Next
第一步：给 AI 建「鸿蒙开发手册」（Trae 规则配置）
Trae 的核心优势是可自定义规则，需创建两个规则文件存于.trae/rules目录：
我一共生成了6个不同的规则，涵盖了UI、ArkTs语言、组件、状态管理、文本相关组件，都是基于官方文档让Agent自己去生成的。
规则的内容大概是这样（内容太多，也不太好分享，tokens消耗太多有待优化，大家可以参考自己去生成）：
第二步：写「AI 能听懂」的提示词（附模板）
参考提示词工程技巧，模板需包含目标 + 约束 + 示例：
拆分目标，将一个app应用分成多个目标去实现。
1、实现一个Tabs组件，包含首页、模板、心情、我的4个模块，主题色#8b5cf6
2、实现一个类似附件图片的UI界面，这是一个心情卡片应用的首页。我需要创建一个包含顶部文字渐变、功能卡片网格（创建卡片、模板库、心情日记、心情统计）、最近卡片列表和底部统计的界面。
3、。。。
当然了每一步都会有一些问题需要进一步调整，但这完全可以自己搞定，对自己也是一种成长。
第三步：迭代优化规则（避坑指南）
1、运行 AI 生成的代码后，大概率会遇到不少问题，这时候就需要重新优化提示词，让AI重新执行，并根据结果去补充规则
2、写完需求提示词先别急着执行，可以让AI先优化一下你的提示词，再修改，这样生成的效果更好
第四步：打开DevEco Studio进行调试
最后：
一开始生成的界面肯定没有这么好看，但也不查，经过两轮修改后就已经是现在的页面了，我觉得已经很不错了，基本就是AI生成->DevEco Studio调试->AI生成->DevEco Studio再调试。大概使用了10次的AI问答。但是生成规则消耗阿里太多的tokens，导致我这个月的MAX模式的tokens直接用没了，所以这块规则这块还得官方去实现比较好。
最后的最后：
可以关注我的微信公众号，时不时分享一些AI配合开发的知识
更多关于HarmonyOS 鸿蒙Next让 AI 更「懂」鸿蒙Next之我的实践的实战教程也可以访问 https://www.itying.com/category-93-b0.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>欢迎来到我的博客</h1>
<p>这是我的第一篇博客文章，我将分享一些关于技术的内容。</p>
<h2>文章目录</h2>
<ul>
<li>介绍</li>
<li>技术栈</li>
<li>总结</li>
</ul>
<h2>介绍</h2>
<p>在这个部分，我将介绍文章的背景和目的。</p>
<h2>技术栈</h2>
<p>我使用了以下技术：</p>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h2>总结</h2>
<p>通过这篇文章，我希望你能学到一些有用的知识。</p>
<p>谢谢阅读！</p>
</body>
</html>
感谢，已经收到！不过，请教.trae/rules目录下的所有md规则文件（比如你的截图中有6个）是同时自动生效的吗，还是除了project_rules.md之外的规则文件需要额外配置才能生效吗？
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
</head>
<body>
<h1>欢迎来到示例页面</h1>
<div class="info-section">
<h2>基本信息</h2>
<p>这是一个示例页面，用于演示HTML到Markdown的转换</p>
</div>
<div class="content-section">
<h3>主要内容</h3>
<p>这里包含了一些示例内容：</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<p>这是一段包含<strong>粗体</strong>和<em>斜体</em>的文本</p>
<div class="code-section">
<button class="copy-btn">复制代码</button>
<pre><code class="language-javascript dark-theme">
function helloWorld() {
console.log("Hello, World!");
}
</code></pre>
</div>
<p>下面是一个图片示例：</p>
<img src="https://example.com/sample.jpg" alt="示例图片">
<p>这是一个空图片标签，不应该显示：</p>
<img src="" alt="空图片">
<img alt="只有alt属性的图片">
</div>
<footer>
<p>页面结束</p>
</footer>
</body>
</html>
