codewave-openclaw-installer 1.0.0

package/skills/smart-customer-service/docs/codewave/25./346/231/272/350/203/275/345/274/200/345/217/221/005./346/231/272/350/203/275/350/256/276/350/256/241/347/224/237/346/210/220/351/241/265/351/235/242/040.D2C/346/217/222/344/273/266/344/275/277/347/224/250/346/211/213/345/206/214/010.D2C/350/256/276/350/256/241/347/250/277/346/217/222/344/273/266.md

@@ -0,0 +1,33 @@
+# D2C设计稿插件
+
+## 1. 插件介绍
+
+平台提供 “智能设计生成页面” 功能，即智能 D2C（Design to Code，简称 D2C）。设计稿工具插件则是支撑该功能实现的工具。目前提供三类设计稿MasterGo、Figma、Sketch插件，三类设计稿插件的功能有所不同，请按需选择安装及使用对应插件。
+
+- [MasterGo](../../005.智能设计生成页面/040.D2C插件使用手册/030.MasterGo.md)
+- [Figma](../../005.智能设计生成页面/040.D2C插件使用手册/040.Figma.md)
+- [Sketch](../../005.智能设计生成页面/040.D2C插件使用手册/050.Sketch.md)
+
+## 2. 注意事项
+
+1.  只有拥有设计稿编辑权限才会显示插件。
+
+    下图为Figma 插件入口：
+
+    <img src="../assets/D2Cshejigaochajian_202508291926_1.png" class="imgStyle" style="" />
+
+    如果没有编辑权限，可以采取以下措施：
+
+    - 找设计师开通编辑权限。
+    - 找设计师导出 fig/mg 文件，然后导入到自己的Figma/MasterGo中。
+    - 找设计师直接用CW设计稿插件导出 zip。
+
+1.  目前仅MasterGo插件支持 “C2D2C 标注和调试”、“AI 辅助在线创建资产”功能，若您使用其他设计软件且有相关需求，请联系客服咨询。
+
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">小白</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年08月29日</span>
+</div>

package/skills/smart-customer-service/docs/codewave/25./346/231/272/350/203/275/345/274/200/345/217/221/005./346/231/272/350/203/275/350/256/276/350/256/241/347/224/237/346/210/220/351/241/265/351/235/242/040.D2C/346/217/222/344/273/266/344/275/277/347/224/250/346/211/213/345/206/214/020.D2C/350/256/276/350/256/241/347/250/277/350/247/204/350/214/203.md

@@ -0,0 +1,167 @@
+# D2C设计稿规范
+
+D2C 设计稿规范涵盖了图片、编组、重叠、响应式、组件识别、图表类组件、图层等多个方面。遵循这些规范有助于确保设计稿在导入和后续处理过程中能够准确、高效地转化为所需的页面效果，减少因不符合规范而导致的各种问题。
+
+## 1. 图片
+
+### 合并图片场景需设置图片导出
+
+- 规范描述：当设计稿中存在大量图层重叠，并且期望将这些重叠的图层合并为一张图片时，请多选择这些图层，编组，并设置图片导出。
+
+  <img src="../assets/d2csjggfv02_202407091031_1.png" class="imgStyle" style="" />
+
+- 不符合规范的后果：
+  - 生成的页面中包含大量图片，影响导入速度和发布后页面加载速度。
+  - 不必要的多图片导致页面层级过多，增加维护难度。
+
+### 除合并图片场景外，其余场景禁止设置图片导出
+
+- 规范描述：在检查设计稿时，需要对其中的每一个元素进行检查，确保只有在图层需要合并为图片的场景中，设置了图片导出。
+- 不符合规范的后果：
+  - 本该是分块、文本的元素，被渲染成了图片，导致无法进行数据绑定和事件绑定。
+  - 组件将无法被识别。
+
+### 禁止使用经过转换的设计稿
+
+- 规范描述：如果设计稿是使用 Sketch 工具绘制的，那么正确的操作是直接在 Sketch 中导出。禁止先将其导入到 Figma 或 MasterGo 等其他设计工具中，然后再从这些工具里导出。
+- 不符合规范的后果：
+
+  - 本该是分块、文本的元素，被渲染成了 SVG，导致无法进行数据绑定。
+  - 组件将无法被识别。
+
+### 禁止在蒙版里放入非图片元素
+
+- 规范描述：在设计过程中，禁止将文本等非图片元素放置在蒙版内部。如果有使用需求，应当将非图片元素放置在蒙版的上方。
+- 不符合规范的后果：
+
+  - 非图片元素也会被渲染成图片。
+
+## 2. 编组
+
+### 禁止对循环项进行交叉编组
+
+- 规范描述：
+             
+  <table>
+    <tr>
+      <td>Bad Case 👎： </td>
+      <td>Good Case 👍： </td>
+    </tr>
+    <tr>
+      <td><img src="../assets/d2csjggfv02_202407091031_2.png" class="imgStyle" style="width:300px;" /></td>
+      <td><img src="../assets/d2csjggfv02_202407091031_3.png" class="imgStyle" style="width:300px;" /></td>
+    </tr>
+  </table>
+
+- 不符合规范的后果：
+
+  - 导入到IDE中后，不方便复制粘贴，且会影响后续绑定动态数据。
+  - 不方便导入到数据列表、数据网格等组件的插槽中。
+
+## 3. 重叠
+
+- 规范描述：系统支持将布局识别成线性布局和自由布局。线性布局的响应式效果更好，自由布局的二次修改成本更低。
+
+当系统识别到当前场景更适合线性布局时，会优先尝试转换成线性布局，但当图层之间存在重叠时，系统会通过自由布局来完成页面布局，如果不想在某些场景下将内容识别成自由布局，请尽可能避免非必要的元素重叠。
+
+- 不必要的重叠：
+
+  - 开启自动高度和自动宽度的文本元素，与其他元素发生重叠。
+
+    <img src="../assets/d2csjggfv02_202407091031_4.png" class="imgStyle" style="width:400px;" />
+
+  - 一些肉眼不可见的图层致使众多元素重叠。
+  - 用细长的矩形作为边框，由于难以精确控制，容易不小心重叠。
+  - 一些距离很近的矩形，可能会重叠 1px 。
+
+
+
+- 不符合规范的后果：
+
+  - 将会生成自由布局，而非线性布局。
+
+## 4. 响应式
+
+响应式描述了当页面宽度发生变化时，内部元素会如何变化。
+
+在传统的工作流程中，响应式效果由设计师口头和开发者沟通。当代设计工具都支持在设计稿中标注响应式信息。我们鼓励设计师在设计稿上对响应式做标注，以保证绝对的准确。当然，如果缺少这些信息，系统也会尽可能对响应式进行猜测。
+
+### 水平居中
+
+- 规范描述：推荐使用水平居中按钮或者辅助线进行水平居中。
+- 不符合规范的后果：
+
+  - 如果左右两边相差超过 2px，将无法命中水平居中响应式。
+
+## 5. 组件识别
+
+### 设计系统（组件库）
+
+- 规范描述：推荐使用 Element UI、Ant Design 市面上主流组件库的设计系统（组件库）进行设计，主题色、圆角等允许稍作修改。
+- 不符合规范的后果：
+
+  - 组件识别准确度可能会降低。
+
+### 组件的元素名推荐设置为组件名称
+
+- 规范描述：中英文不限制，使用 Element UI、Ant Design 等市面上主流组件库进行设计时，保留默认名称即可，不要修改。
+- 不符合规范的后果：
+
+  - 将会使用视觉特征猜测组件类别，组件识别准确度可能会降低。
+
+### 组件需设置为一个整体
+
+- 规范描述：在设计过程中，每个组件都应当被视为一个完整的整体。这个整体必须放置在一个明确的容器或者编组内部，并且组件要紧密贴合容器或编组的边缘，不能存在空隙或偏离。
+
+  <table>
+    <tr>
+      <td>Bad Case 👎： </td>
+      <td>Good Case 👍： </td>
+    </tr>
+    <tr>
+      <td>1、表头表身分离，不在一个容器或编组。</br>2、数据列表或数据网格的循环项分离，不在一个容器或编组。</br>3、步骤条的“条”和“文本”分离，不在一个容器或编组。</br>4、……</td>
+      <td>1、表头表身在一个容器或编组。</br>2、数据列表或数据网格的循环项在一个容器或编组。</br>3、步骤条在一个容器或编组内。</br>4、其他任意组件都必须在一个容器或编组内。</td>
+    </tr>
+  </table>
+
+- 不符合规范的后果：
+
+  - 组件将无法被识别。
+
+### 图表类组件
+
+由于图表类组件生成页面后可用性低，大概率要删除，建议将图表直接点击设置图片导出，生成页面后将其删除，自行修改成其他的图表组件。
+
+如下，将折线图设置图片导出：
+
+<img src="../assets/D2Cshejigaoguifan_202407311749_3.png" class="imgStyle" style="" />
+
+## 6. 图层
+
+### 不添加无用图层
+
+- 规范描述：在设计稿中，不建议存在无用的图层，例如用一个不透明图层遮挡不想要的图层、纯空白图层等。生成页面时，这些图层信息都会成为页面的一部分，影响后续页面维护。
+- 不符合规范的后果：
+
+  - 生成无用图层，影响后续维护。
+  - 由于图层重叠，被错误识别成自由布局。
+
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">小白</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2024年07月31日</span>
+</div>
+
+  <style>
+    table {
+      width: 100%;
+    }
+
+    th,
+    td {
+      width: 50%;
+    }
+  </style>
+                

package/skills/smart-customer-service/docs/codewave/25./346/231/272/350/203/275/345/274/200/345/217/221/005./346/231/272/350/203/275/350/256/276/350/256/241/347/224/237/346/210/220/351/241/265/351/235/242/040.D2C/346/217/222/344/273/266/344/275/277/347/224/250/346/211/213/345/206/214/030.MasterGo.md

@@ -0,0 +1,145 @@
+# MasterGo
+
+## 插件安装
+
+访问<https://mastergo.com/community/plugin/143259912474231>进入设计稿工具应用市场，安装CodeWave设计稿工具插件。
+
+<img src="../assets/MasterGo_202508291938_1.png" class="imgStyle" style="" />
+
+## 插件使用
+
+### 导出到CodeWave
+
+用于将设计稿转化为CodeWave可识别的文件并存储至本地。
+
+**操作示例**：
+
+**step1：打开设计稿工具或网页版**
+
+选中需要导出的设计稿，选择“**插件**”--“**CodeWave**”--“**导出到CodeWave**”
+
+<img src="../assets/MasterGo_202508291938_2.png" class="imgStyle" style="" />
+
+**step2：设计稿检测**
+
+在设计稿导入 IDE 转为应用页面结构前，设计稿插件会自动**检测影响页面结构转换的问题**明确图层转换方式及定位问题图层，并提供对应解决方案，设计师可基于检测结果调整优化，提高后续将设计稿导入至IDE的页面还原度。
+
+<img src="../assets/MasterGo_202508291938_3.png" class="imgStyle" style="" />
+
+该环节支持忽略检测结果直接将设计稿导出为CodeWave可识别的文件并存储至本地。
+
+<img src="../assets/MasterGo_202508291938_4.png" class="imgStyle" style="" />
+
+**step3：组件预识别**
+
+在经过设计稿检测后，支持提前AI识别CW组件适配度，设计师可基于检测结果调整优化未识别组件，提高后续将设计稿导入至IDE的组件识别准确率。
+
+1.  配置IDE服务器地址：该功能实现需预填IDE服务器地址。
+
+    <img src="../assets/MasterGo_202508291938_5.png" class="imgStyle" style="" />
+
+1.  账号授权：AI组件识别还需CW平台账号授权，在配置完IDE服务器地址后系统将自动发起账号鉴权，确认账号信息无误后点击“授权并登录”即可完成账号授权。
+
+    <img src="../assets/MasterGo_202508291938_6.png" class="imgStyle" style="" />
+
+1.  指定组件库：插件会基于选择的组件库来生成页面中的组件。
+
+    <img src="../assets/MasterGo_202508291938_7.png" class="imgStyle" style="" />
+
+1.  AI识别组件：支持通过AI辅助识别设计稿上的组件，识别结果支持预览和手动调整，以提升后续导入到CodeWave的组件识别率。
+
+    <img src="../assets/MasterGo_202508291938_8.gif" class="imgStyle" style="" />
+
+1.  手动指定组件：未被AI识别到的组件，可在画布中选中后在此手动指定组件。
+
+    <img src="../assets/MasterGo_202508291938_9.gif" class="imgStyle" style="" />
+
+1.  预览：支持查看页面还原效果，可通过尺寸调整或拖拽弹框边缘查看不同尺寸下的页面还原效果，另外可选中预览设计元素查看具体还原CW组件。
+
+    <img src="../assets/MasterGo_202508291938_10.gif" class="imgStyle" style="" />
+
+**导入CodeWave平台：**
+
+在通过D2C插件将设计稿导出为CW可识别的zip后，可将其导入至IDE生成页面，在导入设计稿后，系统会自动识别设计稿中的元素，生成页面结构。
+
+导入CodeWave平台的详细操作，可参见： [D2C 设计稿/截图转页面链路指南--设计稿转页面](../../005.智能设计生成页面/010.D2C设计稿或截图转页面链路指南.md)
+
+<img src="../assets/MasterGo_202508291938_11.gif" class="imgStyle" style="" />
+
+### C2D2C 标注和调试
+
+MasterGo 设计稿插件支持**C2D2C 标注和调试。**
+
+**使用场景**：当设计稿使用非官方提供 [Element Plus 组件设计系统](https://mastergo.com/goto/MgrVhLgZ?page_id=0:37115\&file=162200702175247) 邀请您进入《Element Plus 插槽版本》，点击链接开始协作。搭建时：可按需自行根据设计稿开发CW前端组件或借助“AI在线创建组件资产” ，完成后进行组件标注，确保组件与 CW 平台要求匹配。
+
+**操作示例**：
+
+**组件开发与调试**：
+
+1.  获取映射函数地址：执行命令，启动服务后获取地址：
+
+    ```bash
+    npx lcap-d2c-mg2comps create <project-name>
+    npm install
+    npm run dev
+    ```
+
+1.  开发 CodeWave 组件：可选“自行开发”（参考《[前端组件扩展开发](http://1111)》文档）或 “AI 在线创建”（参考《[MasterGo - AI 在线辅助创建资产](http://1111)》文档）。
+2.  编写组件映射函数，请参考步骤①所创建项目中的README.md文档
+
+    <img src="../assets/C2D2Cshejibiaozhunhualianlucaozuozhinan_202508291912_8.png" class="imgStyle" style="" />
+
+1.  组件标注与调试：打开设计稿工具插件→“CodeWave”→“C2D2C 标注和调试”：
+2.  输入步骤②操作获取的映射函数地址。
+3.  进行单组件调试：选中设计稿元素→点击 “调试导出”→在 IDE 选中目标组件标注；
+   
+    <video controls style="width:100%;">
+    <source src="https://community.codewave.163.com/upload/app/afaec238-82f5-4996-8fdd-0aae42f393de/%E5%8D%95%E7%BB%84%E4%BB%B6%E8%B0%83%E8%AF%95_be1c01df39294f3fa99b0fb74f20b60d_afaec238-82f5-4996-8fdd-0aae42f393de_efp0VUI6_20250829194509689.mp4">
+    </video>
+
+
+    **组件批量标注：**
+
+    进行批量组件标注：点击 “批量标注”，自动搜索所有页面组件并完成标注。
+    
+
+    <video controls style="width:100%;">
+    <source src="https://community.codewave.163.com/upload/app/afaec238-82f5-4996-8fdd-0aae42f393de/%E6%89%B9%E9%87%8F%E6%A0%87%E6%B3%A8_be1c01df39294f3fa99b0fb74f20b60d_afaec238-82f5-4996-8fdd-0aae42f393de_efp7QNP3_20250829194750345.mp4">
+    </video>
+
+### 设置默认资产组件库
+
+在导出CodeWave可识别的设计稿zip包，以及使用"[AI辅助在线创建资产](#ai-辅助在线创建资产)"功能时，需预先设置默认指定的组件库。
+
+<img src="../assets/MasterGo_202508291938_12.png" class="imgStyle" style="" />
+
+设置默认指定的组件库后，唤起“AI辅助在线创建资产”，系统会预填指定组件库信息，支持手动输入@修改。
+
+<img src="../assets/MasterGo_202508291938_13.png" class="imgStyle" style="" />
+
+### AI 辅助在线创建资产
+
+MasterGo 设计稿插件设有“**AI 辅助在线创建资产**”功能入口。可借助AI生成可CodeWave平台可复用的组件资产，确保资产沉淀的规范性与可复用性。
+
+**操作示例：**
+
+选中设计稿指定内容，选择“**插件**”--“**CodeWave**”--“**AI 辅助在线创建资产**”。
+
+<img src="../assets/MasterGo_202508291938_14.png" class="imgStyle" style="" />
+
+在借助AI在线创建组件资产时，建议填写提示词用于优化AI生成效果，例如可详述组件的功能及外观特征。同时也可借助AI优化提示词。有关“AI在线创建组件资产”的详细功能介绍，可参见[智能组件资产生成](../../090.智能组件资产生成/、)。
+
+<img src="../assets/MasterGo_202508291938_15.png" class="imgStyle" style="" />
+
+### 配置服务器地址
+
+导出CodeWave可识别zip时的“AI组件预识别”功能实现需预填IDE服务器地址，服务器地址来源于IDE应用地址前缀：
+
+<img src="../assets/MasterGo_202508291938_16.png" class="imgStyle" style="" />
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">小白</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年08月29日</span>
+</div>

package/skills/smart-customer-service/docs/codewave/25./346/231/272/350/203/275/345/274/200/345/217/221/005./346/231/272/350/203/275/350/256/276/350/256/241/347/224/237/346/210/220/351/241/265/351/235/242/040.D2C/346/217/222/344/273/266/344/275/277/347/224/250/346/211/213/345/206/214/040.Figma.md

@@ -0,0 +1,70 @@
+# Figma
+
+## 插件安装
+
+访问<https://www.figma.com/community/plugin/1329658046177933832/codewave>进入设计稿工具应用市场，通过CodeWave插件打开设计稿工具或网页版。
+
+<img src="../assets/Figma_202508292000_1.png" class="imgStyle" style="" />
+
+## 插件使用
+
+### 导出到CodeWave
+
+用于将设计稿转化为CodeWave可识别的文件并存储至本地。
+
+#### step1：打开设计稿工具或网页版
+
+选择需要导出的设计稿，在主菜单中选择“插件”--“CodeWave”--“导出到CodeWave”
+
+<img src="../assets/Figma_202508292000_2.png" class="imgStyle" style="" />
+
+#### step2：设计稿检测
+
+在设计稿导入 IDE 转为应用页面结构前，设计稿插件会自动**检测影响页面结构转换的问题**明确图层转换方式及定位问题图层，并提供对应解决方案，设计师可基于检测结果调整优化，提高后续将设计稿导入至IDE的页面还原度。
+
+<img src="../assets/Figma_202508292000_3.png" class="imgStyle" style="" />
+
+该环节支持忽略检测结果直接将设计稿导出为CodeWave可识别的文件并存储至本地。
+
+<img src="../assets/Figma_202508292000_4.png" class="imgStyle" style="" />
+
+#### step3：组件预识别
+
+在经过设计稿检测后，支持提前AI识别CodeWave组件适配度，设计师可基于检测结果调整优化未识别组件，提高后续将设计稿导入至IDE的组件识别准确率。
+
+1.  配置IDE服务器地址：该功能实现需预填IDE服务器地址。
+
+    <img src="../assets/Figma_202508292000_5.png" class="imgStyle" style="" />
+
+1.  账号授权：AI组件识别还需CodeWave平台账号授权，在配置完IDE服务器地址后系统将自动发起账号鉴权，确认账号信息无误后点击“授权并登录”即可完成账号授权。
+
+    <img src="../assets/Figma_202508292000_6.png" class="imgStyle" style="" />
+
+1.  指定组件库：插件会基于选择的组件库来生成页面中的组件。
+
+    <img src="../assets/Figma_202508292000_7.png" class="imgStyle" style="" />
+
+1.  AI识别组件：支持通过AI辅助识别设计稿上的组件，识别结果支持预览和手动调整，以提升后续导入到CodeWave的组件识别率。
+
+    <img src="../assets/Figma_202508292000_8.gif" class="imgStyle" style="" />
+
+1.  预览：支持查看页面还原效果，可通过尺寸调整或拖拽弹框边缘查看不同尺寸下的页面还原效果，另外可选中预览设计元素查看具体还原CodeWave组件。
+
+    <img src="../assets/Figma_202508292000_9.gif" class="imgStyle" style="" />
+
+### 导入CodeWave平台
+
+在通过D2C插件将设计稿导出为CodeWave可识别的zip后，可将其导入至IDE生成页面，在导入设计稿后，系统会自动识别设计稿中的元素，生成页面结构。
+
+导入CodeWave平台的详细操作，可参见：[D2C 设计稿/截图转页面链路指南--设计稿转页面](../../005.智能设计生成页面/010.D2C设计稿或截图转页面链路指南.md)
+
+<img src="../assets/Figma_202508292000_10.gif" class="imgStyle" style="" />
+
+
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">小白</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年08月29日</span>
+</div>

package/skills/smart-customer-service/docs/codewave/25./346/231/272/350/203/275/345/274/200/345/217/221/005./346/231/272/350/203/275/350/256/276/350/256/241/347/224/237/346/210/220/351/241/265/351/235/242/040.D2C/346/217/222/344/273/266/344/275/277/347/224/250/346/211/213/345/206/214/050.Sketch.md

@@ -0,0 +1,76 @@
+# Sketch
+
+## **插件安装**
+
+1.  下载[CodeWave插件](https://github.com/netease-lcap/sketch-plugin)，双击解压插件。
+
+    <img src="../assets/Sketch_202508292003_1.png" class="imgStyle" style="" />
+
+1.  打开Sketch，点击菜单栏-插件，选择“**管理插件**”。
+
+    <img src="../assets/Sketch_202508292003_2.png" class="imgStyle" style="" />
+
+1.  把解压后的文件拖拽至点击“**管理插件**”后打开的设置页面。
+
+    <img src="../assets/Sketch_202508292003_3.png" class="imgStyle" style="" />
+
+## **插件使用**
+
+### **导出到CodeWave**
+
+用于将设计稿转化为CodeWave可识别的文件并存储至本地。
+
+#### step1：打开设计稿工具或网页版
+
+选择需要导出的设计稿，选择“**插件**”--“**CodeWave**”--“**导出到CodeWave**”
+
+<img src="../assets/Sketch_202508292003_4.png" class="imgStyle" style="" />
+
+#### **step2：设计稿检测**
+
+在设计稿导入 IDE 转为应用页面结构前，设计稿插件会自动**检测影响页面结构转换的问题**明确图层转换方式及定位问题图层，并提供对应解决方案，设计师可基于检测结果调整优化，提高后续将设计稿导入至IDE的页面还原度。
+
+<img src="../assets/Sketch_202508292003_5.png" class="imgStyle" style="" />
+
+该环节支持忽略检测结果直接将设计稿导出为CodeWave可识别的文件并存储至本地。
+
+<img src="../assets/Sketch_202508292003_6.png" class="imgStyle" style="" />
+
+#### **step3：组件预识别**
+
+在经过设计稿检测后，支持提前AI识别CW组件适配度，设计师可基于检测结果调整优化未识别组件，提高后续将设计稿导入至IDE的组件识别准确率。
+
+1.  配置IDE服务器地址：
+
+    <img src="../assets/Sketch_202508292003_7.png" class="imgStyle" style="" />
+
+1.  账号授权：AI组件识别还需CW平台账号授权，在配置完IDE服务器地址后系统将自动发起账号鉴权，确认账号信息无误后点击“授权并登录”即可完成账号授权。
+
+    <img src="../assets/Sketch_202508292003_8.png" class="imgStyle" style="" />
+
+1.  指定组件库：插件会基于选择的组件库来生成页面中的组件。
+
+    <img src="../assets/Sketch_202508292003_9.png" class="imgStyle" style="" />
+
+1.  AI识别组件：支持通过AI辅助识别设计稿上的组件，识别结果支持预览和手动调整，以提升后续导入到CodeWave的组件识别率。
+
+    <img src="../assets/Sketch_202508292003_10.gif" class="imgStyle" style="" />
+
+1.  预览：支持查看页面还原效果，可通过尺寸调整或拖拽弹框边缘查看不同尺寸下的页面还原效果，另外可选中预览设计元素查看具体还原CW组件。
+
+    <img src="../assets/Sketch_202508292003_11.gif" class="imgStyle" style="" />
+
+### 导入CodeWave平台
+
+在通过D2C插件将设计稿导出为cw可识别的zip后，可将其导入至IDE生成页面，在导入设计稿后，系统会自动识别设计稿中的元素，生成页面结构。
+
+导入CodeWave平台的详细操作，可参见： [D2C 设计稿/截图转页面链路指南--设计稿转页面](../../005.智能设计生成页面/010.D2C设计稿或截图转页面链路指南.md)
+
+<img src="../assets/Sketch_202508292003_12.gif" class="imgStyle" style="" />
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">小白</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年08月29日</span>
+</div>

package/skills/smart-customer-service/docs/codewave/25./346/231/272/350/203/275/345/274/200/345/217/221/008./346/231/272/350/203/275/346/240/267/345/274/217/347/224/237/346/210/220.md

@@ -0,0 +1,100 @@
+# 智能样式生成
+
+## 1. 概念介绍
+
+**智能样式生成**是 CodeWave 智能开发平台提供的将**自然语言/截图转换为页面样式**的功能，它能够实现自然语言描述或截图到页面样式的高效转换，覆盖全局样式与单组件样式两大应用范围。其中，全局主题样式提供多套预设方案，方便用户操作与回溯；单组件样式生成则聚焦特定组件的个性化定制。所有生成的组件样式均支持一键复制粘贴进行复用，大幅提升开发效率，帮助开发者快速构建具有独特风格的应用界面。
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_1.png" class="imgStyle" style="" />
+
+## 2. 功能介绍
+
+### 2.1 功能入口
+
+在平台界面顶部找到 “**更多**” 按钮，点击后在下拉菜单中选择 “**自定义主题样式**”，即可进入主题样式设置界面。在此界面，用户可借助 AI 能力深度定制应用或组件的外观与色彩方案，自由调整文本颜色、背景色调、字体大小、样式等元素，赋予应用独一无二的视觉风格。
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_2.png" class="imgStyle" style="" />
+
+**特别提示**：PC 端与 H5 端的外观样式需分别独立设置。在主题样式设置界面左上角，可通过端切换按钮（PC/H5）进行切换操作。
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_3.png" class="imgStyle" style="" />
+
+### 2.2 全局主题样式生成​
+
+全局主题样式生成功能，可根据用户输入的风格描述及参考图片，生成统一协调的全局配色方案，塑造应用整体视觉基调。​
+
+#### 主题创建
+
+在界面右上角主题样式区域，点击 “**+ 创建主题**”（若需使用已有主题，可选择 “切换已有主题”）。
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_4.png" class="imgStyle" style="" />
+
+创建新主题时，需填写主题名称，并可选择 “**基于已有主题样式创建**”**（默认选项）**或 “**导入主题**”。​
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_5.png" class="imgStyle" style="" />
+
+#### 样式生成
+
+完成主题创建后，点击界面右下角 “**智能生成样式**” 按钮，在弹出的输入框中，输入主题风格描述，并可上传参考截图，支持自然语言与截图结合的输入方式。输入完成后，点击 “发送” 按钮，触发 AI 生成流程。​
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_6.png" class="imgStyle" style="" />
+
+#### 效果预览与优化
+
+生成的样式将实时应用至页面预览界面，用户可点击各组件查看样式细节。
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_7.png" class="imgStyle" style="" />
+
+待样式完全生成后，可根据实际生成效果，进行相关操作：
+
+- 若需局部调整，可在现有基础上补充描述或截图，进行多轮对话持续优化生成效果；
+- 若对效果不满意，可选择 “**重新生成**”（参考此前对话内容重新生成），或选择“**重新对话**”（清空当前对话窗口，修改描述后再次生成将不再参考此前生成结果）。
+- 若无需保留当前结果，可点击 “**撤销生成**” 放弃修改。
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_8.png" class="imgStyle" style="" />
+
+#### 多套样式切换
+
+生成的不同类型的样式主题支持**快捷切换**。
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_9.png" class="imgStyle" style="" />
+
+样式复用
+
+当其他应用需要复用该主题方案时，可以将该主题样式导出，再导入到具体应用中使用。
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_10.png" class="imgStyle" style="" />
+
+### 2.3 单组件样式生成​
+
+单组件样式生成功能专注于为单个组件定制专属风格，通过自然语言描述或参考截图，生成与全局风格协调的配色及样式方案。​
+
+#### 功能调用
+
+进入主题样式设置界面后，在组件主题配置模块选中目标组件，右键点击并选择 “**生成样式**”。
+
+​在输入框中输入自然语言描述，或上传参考截图，支持两种方式混合使用。点击 “**发送**” 按钮，系统将基于输入内容为当前组件生成专属样式。​
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_11.png" class="imgStyle" style="" />
+
+#### 效果预览与优化
+
+生成的样式将实时应用至组件预览界面，用户可点击查看样式细节。
+
+- 若需局部调整，可在现有基础上补充描述或截图，进行多轮对话持续优化生成效果；
+- 若对效果不满意，可选择 “**重新生成**”（参考此前对话内容重新生成），或选择“**重新对话**”（清空当前对话窗口，修改描述后再次生成将不再参考此前生成结果）。
+- 若无需保留当前结果，可点击 “**撤销生成**” 放弃修改。
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_12.png" class="imgStyle" style="" />
+
+#### 样式复用
+
+当其他应用的同类组件需要复用该组件的主题方案时，可以复制该组件样式，再粘贴至到具体组件配置中使用。
+
+<img src="../assets/zhinengyangshishengcheng_202505191820_13.png" class="imgStyle" style="" />
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">小白</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年05月19日</span>
+</div>

package/skills/smart-customer-service/docs/codewave/25./346/231/272/350/203/275/345/274/200/345/217/221/010./350/207/252/347/204/266/350/257/255/350/250/200/347/224/237/346/210/220UI.md

@@ -0,0 +1,52 @@
+# 自然语言生成UI
+
+## 1. 功能介绍
+
+平台3.7及以上版本IDE支持使用自然语言生成UI。编辑页面时，通过与AI智能助手对话，使用自然语言描述页面需求，AI解读后生成页面元素，可进行组件的创建/修改/删除（包含组件属性、样式与逻辑实现等）。
+
+## 2. 操作步骤
+
+1. 在页面编辑画布中，点击右下角图标“AI智能助手”。
+
+    <img src="../assets/ziranyuyanshengchengui_0313_1.png" alt="0" style="border: 1px solid #ccc;" />
+
+2. 在对话框中，使用自然语言描述需要生成的界面元素，点击“发送”图标。
+
+    > 对话框中使用Enter键换行，Ctrl+Enter键发送
+
+    <img src="../assets/ziranyuyanshengchengui_0313_2.png" alt="0" style="border: 1px solid #ccc;" />
+
+3. 等待AI智能助手回复，基于AI回复的内容对需求描述做进一步补充。
+
+    <img src="../assets/ziranyuyanshengchengui_0313_3.png" alt="0" style="border: 1px solid #ccc;" />
+
+4. 根据AI智能助手回复的完整需求描述，选择是否执行生成内容。
+
+    <img src="../assets/ziranyuyanshengchengui_0313_4.png" alt="0" style="border: 1px solid #ccc;" />
+
+    * 点击“确认执行”，等待生成页面元素，生成后在页面画布中显示。
+
+      <img src="../assets/ziranyuyanshengchengui_0313_5.png" alt="0" style="border: 1px solid #ccc;" />
+
+    * 点击“不执行”，可在该基础上继续进行对话。
+
+      <img src="../assets/ziranyuyanshengchengui_0313_6.png" alt="0" style="border: 1px solid #ccc;" />
+
+5. 开启新对话
+
+   * 确认执行生成UI后，本轮对话结束，不可继续对话，需开启新对话。
+   * 对话过程中，可手动选择“**重新对话**”。
+
+   <img src="../assets/ziranyuyanshengchengui_0313_7.png" alt="0" style="border: 1px solid #ccc;" />
+
+## 3. 补充说明
+
+* 使用自然语言描述需求时，应使用清晰明确的描述，避免模糊和歧义。
+* 每个页面编辑画布的AI智能助手是独立的，打开多个页面编辑画布时，“AI 智能助手”内容互不影响。
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">老王</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2024年03月13日</span>
+</div>