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/001./346/231/272/350/203/275/345/274/200/345/217/221/350/203/275/345/212/233/344/273/213/347/273/215.md

@@ -0,0 +1,148 @@
+# 智能开发能力介绍
+
+## 1. 概念介绍
+
+平台通过融合自然语言生成SQL/逻辑/UI的自然语言编程能力，以及智能D2C能力、AI组件推荐和AI逻辑解读等多项技术，推出了一系列的 AI 能力：
+
+
+| 功能名称                   | 功能描述                                                                     |
+| :--------------------- | :----------------------------------------------------------------------- |
+| [智能设计生成页面](#智能设计生成页面)  | 设计稿或截图转页面：基于AI技术，自动识别（Sketch、Figma、MasterGo）设计稿或截图元素，将设计稿或截图自动转换页面布局和组件。 |
+| [智能样式生成](#智能样式生成)             | 基于AI技术，将用户的自然语言描述/截图转换为页面样式。                                             |
+| [自然语言生成UI](#自然语言生成ui或逻辑)  | 基于AI技术，将用户的自然语言描述转换成产品代码。用户可以通过文字描述，自动化生成可视化的UI界面。                       |
+| [自然语言生成逻辑](#自然语言生成ui或逻辑)  | 基于AI技术，将用户的自然语言描述转换成产品代码。用户可以通过文字描述，自动化生成逻辑、实体等。                         |
+| [自然语言生成局部逻辑](#自然语言生成局部逻辑)         | 基于AI技术，将用户输入自然语言描述逻辑需求，以及通过@添加的依赖（如依赖库、实体、接口等），生成服务端逻辑指定位置生成逻辑片段。        |
+| [自然语言生成SQL](#自然语言生成sql) | 基于AI技术，将用户的自然语言描述转换成SQL代码。                                               |
+| [智能组件推荐](#智能组件推荐)    | 基于AI技术，智能推荐用户可能需要的逻辑组件。                                                  |
+| [智能代码补全](#智能代码补全)    | 基于AI技术，智能补全用户可能需要的逻辑。                                                    |
+| [智能代码解读](#智能代码解读)    | 基于AI技术，对逻辑进行自然语言解读。                                                      |
+| [智能代码分析](#智能代码分析)    | 基于AI技术，提供对制品应用性能、安全、架构等方面的智能分析，帮助用户改善通过CodeWave平台制作的产品的质量。               |
+| [智能依赖库资产生成](#智能依赖库资产生成)  | 基于AI技术，将用户的自然语言描述转化成依赖库资产源码，资产类型包含前端组件和服务端逻辑。                                              |
+| [智能生成应用](#智能生成应用)    | 基于AI技术，将用户的自然语言描述转化成CodeWave应用。                                                      |
+| [设计中心](#设计中心)    | 基于AI技术，将用户的自然语言描述按步骤串行输出产品蓝图、竞品分析、需求设计文档及产品原型，形成完整的产品设计方案。                                                   |
+
+## 2. 功能介绍
+
+### 智能设计生成页面
+
+详情请参见：[智能设计生成页面](../25.智能开发/005.智能设计生成页面/005.智能设计生成页面.md)。
+
+#### 设计稿转页面
+
+在平台中，用户可以将矢量设计稿，导入到页面IDE中，系统会自动识别设计稿元素，经过智能分析可以实现设计稿到页面的转换。同时采用大模型技术实现了“智能识别”功能，用户可以选择是否开启“智能识别”，若开启，则系统会自动识别设计稿中的组件并显示可转换使用的CodeWave组件；若不开启，则秒级生成偏展示形态的页面。
+
+生成的页面，可以通过页面编辑器的强大编辑能力进行人工干预，将页面调整到理想的状态，可以减少用户从零搭建页面的工作量，提高开发效率。
+
+设计稿工具支持Figma、MasterGo、Sketch。
+
+<img src="../assets/zhinengkaifanenglijieshao_202408141130_1.png" class="imgStyle" style="" />
+
+在开启"智能识别"后，再导入设计稿生成页面时，系统会提示AI识别出可替换的组件，可根据实际情况选择“替换”或“取消”，“替换”后会对应组件UI会被自动转换为CodeWave相应的内置组件。
+
+<img src="../assets/zhinengkaifanenglijieshao_202408141130_2.png" class="imgStyle" style="" />
+
+#### 图片转页面
+
+在平台中，用户可以将设计稿截图或者手绘稿图片，导入CodeWave页面IDE中，系统会自动识别图片中的元素，生成页面；生成页面后，可自由调整组件及布局，为组件绑定数据源或事件。
+
+<img src="../assets/zhinengkaifanenglijieshao_202408141130_3.png" class="imgStyle" style="" />
+
+导入截图默认开启了“智能识别”，系统会自动识别截图中的元素并替换为的CodeWave组件。
+
+<img src="../assets/zhinengkaifanenglijieshao_202408141130_4.png" class="imgStyle" style="" />
+
+### 智能样式生成
+
+智能样式生成是 CodeWave 智能开发平台提供的将自然语言/截图转换为页面样式的功能，它能够实现自然语言描述或截图到页面样式的高效转换，覆盖全局样式与单组件样式两大应用范围。其中，全局主题样式提供多套预设方案，方便用户操作与回溯；单组件样式生成则聚焦特定组件的个性化定制。所有生成的组件样式均支持一键复制粘贴进行复用，大幅提升开发效率，帮助开发者快速构建具有独特风格的应用界面。
+
+样式生成，详情请参见：[智能样式生成](../25.智能开发/008.智能样式生成.md)。
+
+<img src="../assets/zhinengkaifanenglijieshao_202505291831_1.png" class="imgStyle" style="" />
+
+
+### 自然语言生成UI或逻辑
+
+在平台中可以通过自然语言描述意图，利用AI智能生成页面/逻辑。该方法极大地提高了逻辑编写的效率，降低了逻辑编写的技术门槛。
+
+自然语言生成页面/逻辑采用对话式操作流程，允许用户在编写逻辑的过程中通过多轮对话详细描述意图，并获得AI助手的分析反馈。确认后生成对应的页面/逻辑实现。
+
+该方法不仅简化了简单重复页面/逻辑的编写，还使得复杂页面/逻辑的生成变得更为简单。用户只需通过自然语言描述意图即可快速生成所需页面/逻辑，并在生成后进行必要的修改。
+
+生成UI，详情请参见：[自然语言生成UI](../25.智能开发/010.自然语言生成UI.md)。
+
+<img src="../assets/zhinengkaifanenglijieshao_202408141130_5.png" class="imgStyle" style="" />
+
+生成逻辑，详情请参见：[自然语言生成逻辑](../25.智能开发/030.自然语言生成逻辑.md)。
+
+<img src="../assets/zhinengkaifanenglijieshao_202408141130_6.png" class="imgStyle" style="" />
+
+### 自然语言生成局部逻辑
+
+在平台中支持自然语言生成服务端局部逻辑，用户输入自然语言描述逻辑需求，并通过@添加依赖（如依赖库、实体、接口等），系统利用智能算法生成局部逻辑，并以可视化形式回显在逻辑画布上。AI生成的逻辑在用户采纳前，支持编辑、预览，确保逻辑符合业务需求，该功能有效降低开发门槛，提高逻辑构建的效率与准确性。详情请参见：[自然语言生成局部逻辑](../25.智能开发/032.自然语言生成局部逻辑.md)。
+
+<img src="../assets/zhinengkaifanenglijieshao_202505291831_2.png" class="imgStyle" style="" />
+
+
+### 自然语言生成SQL
+
+在平台中可以通过简单的自然语言描述意图，利用AI智能生成所需的SQL语句。生成的SQL语句支持单表查询和多表关联查询，并且还可以根据需要进行调整。自然语言生成SQL有助于降低用户编写SQL的技术门槛，尤其是对于缺乏传统代码开发经验的用户，这项功能极大地简化了逻辑开发流程，提高了开发效率。详情请参见：[自然语言生成SQL](../25.智能开发/020.自然语言生成SQL.md)。
+
+<img src="../assets/zhinengkaifanenglijieshao_202408141130_7.png" class="imgStyle" style="" />
+
+### 智能组件推荐
+
+在平台中编写逻辑时，点击逻辑线或组件插槽，AI会根据上下文推测用户可能需要添加的组件，选择后可直接添加到逻辑或组件插槽中。详情请参见：[智能组件推荐](../25.智能开发/035.智能编程助手/035.智能组件推荐.md)。
+
+<img src="../assets/zhinengkaifanenglijieshao_202408141130_8.png" class="imgStyle" style="" />
+
+### 智能代码补全
+
+在平台中编写逻辑时，当用户点击逻辑线或组件插槽时，AI 会依据上下文推测用户可能需要添加的逻辑，并提供相应选项，供用户直接将其添加到逻辑或组件插槽中。
+
+在此过程中，用户可对 AI 的推荐进行**判断**，若认为推荐符合需求，则可**采纳**，通过特定操作（如点击确认按钮或按 Tab 键）将推荐的逻辑添加到相应位置；若觉得推荐不合适，可选择取消，比如进行非采纳的任意操作（如点击取消按钮、鼠标移动或键盘输入等），继续手动编辑。
+
+<img src="../assets/xitongpianhaoshezhi_202409241657_5.png" class="imgStyle" style="" />
+
+### 智能代码解读
+
+在平台中逻辑中可以通过AI智能助手快速而准确地转化为易于理解的自然语言。这种功能可以帮助其他用户快速理解现有的逻辑。详情请参见：[智能代码解读](../25.智能开发/040.智能代码解读.md)。
+
+<img src="../assets/zhinengkaifanenglijieshao_202408141130_9.png" class="imgStyle" style="" />
+
+### 智能代码分析
+
+平台支持AI代码分析功能，用户可针对应用性能问题进行智能分析检测。CodeWave通过会智能分析，提供编程优化建议。详情请参见：[智能分析](../25.智能开发/060.智能代码分析.md)。
+
+<img src="../assets/zhinengkaifanenglijieshao_202408141130_10.png" class="imgStyle" style="" />
+
+### 智能依赖库资产生成
+
+平台支持AI生成依赖库资产功能，用户可以通过自然语言和截图表达资产需求，资产类型可选前端组件和服务端逻辑。完成资产生成后，即可将资产发布为依赖库并引入应用中使用。该功能降低了依赖库以往高代码开发模式的技术门槛。详情请参考：[智能生成依赖库资产概述](../25.智能开发/090.智能依赖库资产生成/010.智能依赖库资产生成概述.md)。
+
+- 对于前端组件资产，AI将基于前端开发脚手架工具智能生成组件源码。创建过程中，不仅支持上传本地组件资产作为附件，也支持引用官方组件资产，满足二次开发组件的场景。详情请参考：[智能前端组件资产生成](../25.智能开发/090.智能依赖库资产生成/012.智能前端组件资产生成.md)。
+- 对于服务端逻辑资产，AI将基于后端开发脚手架工具智能生成服务端逻辑源码。详情请参考：[智能服务端逻辑资产生成](../25.智能开发/090.智能依赖库资产生成/015.智能服务端逻辑资产生成.md)。
+
+<img src="../assets/AI_202511241351_1.png" class="imgStyle" style="" />
+
+
+### 智能生成应用
+
+平台支持AI生成应用功能，用户可以通过自然语言和截图表达应用需求，AI将自动生成全栈 NASL 代码并支持一键导入 CodeWave 平台，直接转化为可交互的可视化应用。详情请参考：[智能生成应用操作手册](../25.智能开发/100.智能生成应用/010.智能生成应用操作手册.md)。
+
+<img src="../assets/zhinengyingyong_202509081549_2.png" class="imgStyle" style="" />
+
+### 设计中心
+
+平台支持AI生成产品设计方案功能，用户可以通过输入自然语言描述，按步骤串行输出产品蓝图、竞品分析、需求设计文档及产品原型四大关键设计成果，并且每个环节均支持人工干预。
+
+其次，平台提供了独立于应用开发流程的“设计中心”模块，专注于产品设计方案的全流程生成与管理，支持产品设计方案的创建、编辑、删除、授权和创建副本等操作。详情请参考：[设计中心](110.设计中心.md)。
+
+<img src="../assets/AI_202511241351_2.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);">2024年08月14日</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/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.md

@@ -0,0 +1,53 @@
+# 智能设计生成页面
+
+## 简介
+
+智能D2C（Design to Code，简称D2C）是CodeWave 智能开发平台提供的将设计稿/截图转换为页面的功能，旨在变革传统前端开发流程、显著提升开发效率。其作为**开发与设计人员的高效辅助工具**，可大幅加速设计稿还原速度，**降低人工还原UI成本，让“从设计构思到可用页面”的转化更高效、更便捷**。
+
+该功能融合深度学习、计算机视觉与自研多态大模型等前沿技术，支持**一键识别**设计稿/截图的**布局层级关系**，并自动替换为CodeWave平台组件及页面结构，实现**设计到页面的秒级转换**；生成页面后，还可通过编辑器进行**人工干预优化**，兼顾智能效率与人工精准度。
+
+<img src="../assets/zhinengshejishengchengyemian_202412232041_1.png" class="imgStyle" style="" />
+
+## 设计工具
+
+全面覆盖主流设计生态，可适配以下三类工具的设计文件：
+
+- [MasterGo](../../25.智能开发/005.智能设计生成页面/040.D2C插件使用手册/030.MasterGo.md)
+- [Figma](../../25.智能开发/005.智能设计生成页面/040.D2C插件使用手册/040.Figma.md)
+- [Sketch](../../25.智能开发/005.智能设计生成页面/040.D2C插件使用手册/050.Sketch.md)
+
+## 核心能力
+
+智能设计生成页面包含[D2C](../../25.智能开发/005.智能设计生成页面/010.D2C设计稿或截图转页面链路指南.md)和[C2D2C](../../25.智能开发/005.智能设计生成页面/030.C2D2C设计标准化链路指南.md)两条核心链路，辅以两大关键能力支撑：
+
+### 1. 两大核心链路
+
+| 链路类型  | 核心逻辑                                   | 适用场景与能力描述       |
+| :---- | :------------------------------------- | :-------------- |
+| D2C   | 设计 → 页面                                | 非设计系统的设计稿/截图还原： |
+| C2D2C | 组件资产 → 设计资产 → 页面Code to Design to Code | 标准化设计稿 UI 还原：   |
+
+### 2. 两大能力支撑
+
+- **组件智能识别**：支持**一键识别**设计稿/截图的 **CodeWave 组件**并推荐相似组件供开发者自行选择替换。
+
+    <img src="../assets/zhinengshejishengchengyemian_202412232041_21.png" class="imgStyle" />
+
+- **布局还原：支持**一键识别设计稿/截图的**布局层级关系**，快速还原页面布局，**无需从零开发**。
+
+    <img src="../assets/zhinengshejishengchengyemian_202412232041_26.png" class="imgStyle" />
+
+## 适用场景
+
+| 生成方式    | 适用场景                       | 推荐指数  |
+| :------ | :------------------------- | :---- |
+| 设计稿生成页面 | 1. PC 端中后台常规 / 设计类页面       | ⭐⭐⭐⭐⭐ |
+| 截图生成页面  | 1. 表单、表格、图表等中后台原型稿 / 设计稿截图 | ⭐⭐⭐   |
+
+
+<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/010.D2C/350/256/276/350/256/241/347/250/277/346/210/226/346/210/252/345/233/276/350/275/254/351/241/265/351/235/242/351/223/276/350/267/257/346/214/207/345/215/227.md

@@ -0,0 +1,308 @@
+# D2C设计稿 / 截图转页面链路指南
+
+## 1. 链路简介
+D2C（Design to Code 智能设计生成页面）即 “设计稿 / 截图转页面”：支持将非设计系统设计稿、静态截图快速导入，通过系统自动识别（可开启 AI 智能匹配）生成页面结构，后续可灵活调整组件、绑定数据源及事件，最终高效落地页面开发，无需从零开始手动还原UI。
+
+## 2. 导入方式
+
+
+在 CodeWave 智能开发平台中，可在任意支持新建子页面的位置，或允许放置子元素的节点处，通过右键操作选择导入设计稿。以下为具体功能入口及操作步骤：
+
+### 局部导入【推荐】
+
+局部导入支持在指定组件 / 节点下精准导入设计稿，操作灵活度更高，能更好适配局部界面开发需求，包含两种操作路径：
+
+#### 方式一：通过组件快捷按钮导入
+
+1. 进入页面 IDE 界面，在画布中选中可放置子元素的目标组件（如布局容器、卡片等）；
+2. 选中后，组件上方会自动显示 “导入设计稿” 快捷按钮，点击该按钮；
+3. 在弹出的选项列表中选择 “导入设计稿 / 截图”，上传目标文件即可完成局部导入。
+
+<img src="../assets/zhinengshejishengchengyemian_202412232041_4.png" class="imgStyle" style="" />
+
+#### 方式二：通过结构树节点操作导入
+
+1. 进入页面 IDE 界面，找到左侧的页面结构树；
+2. 右键点击结构树中可放置子元素的目标节点，或单击该节点右侧的功能按钮；
+3. 在弹出的菜单中选择 “导入设计稿 / 截图”，上传文件后即可完成局部导入。
+4. 在页面IDE中，右键点击结构树中可以放置子元素的节点或者单击可以放置子元素的节点右侧的按钮，选择通过“导入设计稿/截图”。
+
+<img src="../assets/zhinengshejishengchengyemian_202412232041_5.png" class="imgStyle" style="" />
+
+### 整页面导入
+
+**适用场景**：需通过设计稿 / 截图直接生成完整子页面时，可选择此方式（例如一次性创建 “用户详情页”“订单列表页” 等独立子页面）。
+**操作前提**：父页面必须提前添加 “子页面容器组件” —— 该组件是触发整页面导入的核心条件，若父页面未包含此组件，将无法完成导入操作。
+
+<img src="../assets/zhinengshejishengchengyemian_202412232041_3.png" class="imgStyle" style="" />
+
+**操作步骤**：
+
+1. 进入页面 IDE 界面，定位到已添加 “子页面容器组件” 的目标父页面；
+2. 右键点击页面目录，或单击页面目录旁的功能按钮；
+3. 在弹出的菜单中选择 “导入设计稿 / 截图”，上传文件后即可生成对应的子页面。
+
+<img src="../assets/zhinengshejishengchengyemian_202412232041_2.png" class="imgStyle" style="" />
+
+## 3. 核心能力 
+
+### 3.1 设计稿转页面
+
+
+CodeWave 智能开发平台支持通过D2C[设计稿插件工具](../../25.智能开发/005.智能设计生成页面/040.D2C插件使用手册/010.D2C设计稿插件.md)，将外部设计稿快速导入至 IDE 并自动生成页面。导入完成后，系统会识别设计稿中的视觉元素与结构逻辑，自动生成对应的页面框架；后续可根据开发需求，灵活调整组件样式、优化页面布局，或为组件绑定数据源与交互事件，高效衔接设计与开发流程。
+
+<img src="../assets/zhinengshejishengchengyemian_202412232041_6.gif" class="imgStyle" style="" />
+
+#### **核心特性**
+
+<table>
+  <thead>
+    <tr>
+      <th>特性</th>
+      <th>详细说明</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>支持设计工具</td>
+      <td>兼容主流 UI 设计工具，包括 Figma、MasterGo、Sketch，无需格式转换即可直接导入</td>
+    </tr>
+    <tr>
+      <td>自动布局生成</td>
+      <td>系统会依据设计稿的图层结构与元素排布，自行匹配适配布局类型：<br>
+        • 线性布局：大部分无图层重叠的常规设计场景，元素按顺序规整排列，生成线性布局<br>
+        • 自由布局：针对存在图层重叠（如悬浮元素、叠加组件）的场景，保留设计稿原始层级关系，生成自由布局</td>
+    </tr>
+    <tr>
+      <td>智能组件识别</td>
+      <td>可根据设计稿内容灵活选择是否开启，精准匹配不同设计需求：<br>
+        1. 无需开启的场景：<br>
+        • 设计稿基于<a href="https://mastergo.com/goto/MgrVhLgZ?page_id=0:37115\&file=162200702175247 邀请您进入《Element Plus 插槽版本》，点击链接开始协作">官方 Element Plus 组件系统</a>搭建：系统会自动提取组件特征，直接映射为对应的 CodeWave 组件，无需手动开启智能识别<br>
+        • 设计稿内容简单，以静态展示（如纯文本、基础图片）为主，无需复杂组件转换<br>
+        2. 建议开启的场景：<br>
+        • 设计稿内容丰富多元，包含多类交互组件（如表单、导航）</td>
+    </tr>
+  </tbody>
+</table>
+
+#### 适用场景
+
+<table id="D2C">
+    <tr style="background-color: #eff8ff;">
+        <th style="width:350px;">场景</th>
+        <th style="width:250px;">推荐指数</th>
+    </tr>
+    <tr>
+        <td>PC端中后台常规页面</td>
+        <td>⭐⭐⭐⭐⭐ 强烈推荐</td>
+    </tr>
+    <tr>
+        <td>PC端中后台设计类页面</td>
+        <td>⭐⭐⭐⭐⭐ 强烈推荐</td>
+    </tr>
+    <tr>
+        <td>PC端官网、营销活动页面</td>
+        <td>⭐⭐⭐ 推荐</td>
+    </tr>
+    <tr>
+        <td>移动端官网、营销活动页面</td>
+        <td>⭐⭐⭐⭐ 非常推荐</td>
+    </tr>
+    <tr>
+        <td>移动端功能型页面</td>
+        <td>⭐⭐⭐ 推荐</td>
+    </tr>
+</table>
+
+#### 操作步骤
+
+##### 安装使用 D2C 插件
+
+目前平台提供三类设计稿插件（MasterGo、Figma、Sketch），请按需选择安装及使用对应插件**导出CodeWave可识别的设计稿zip包**。
+
+- [MasterGo](../../25.智能开发/005.智能设计生成页面/040.D2C插件使用手册/030.MasterGo.md)
+- [Figma](../../25.智能开发/005.智能设计生成页面/040.D2C插件使用手册/040.Figma.md)
+- [Sketch](../../25.智能开发/005.智能设计生成页面/040.D2C插件使用手册/050.Sketch.md)
+
+
+##### 导入CodeWave生成页面
+
+1.  登录CodeWave智能开发平台，进入页面IDE，点击页面结构树需插入组件的节点右侧按钮，选择“导入设计稿/截图”。
+
+    <img src="../assets/zhinengshejishengchengyemian_202412232041_18.png" class="imgStyle" style="width:90%;" />
+
+1.  智能识别：导入设计稿时，可以根据具体设计稿的内容决定是否开启“智能识别”，开启“智能识别”后，系统可自动识别设计稿中的组件并显示可转换使用的CodeWave组件。
+
+    <img src="../assets/zhinengshejishengchengyemian_202412232041_19.png" class="imgStyle" style="width:90%;" />
+
+1.  选择导入设计稿，上传已经下载好的zip文件，当前支持Figma、MasterGo及Sketch设计稿zip文件。
+
+    <img src="../assets/zhinengshejishengchengyemian_202412232041_20.gif" class="imgStyle" style="width:90%;" />
+
+1.  生成页面时，平台会提示由人工智能（AI）识别出的可替换组件，在默认情况下会选择平台通过“智能识别”所确定的最佳选项，并且支持选择替换为其他组件或者选择不进行替换操作。
+
+    - 更改替换组件：点击生成结果行定位组件，更改替换组件。可选 “智能推荐” （平台算法推荐组件）和 “其他”（平台全量组件），默认为平台算法推荐的最佳组件。
+    - 不替换组件：点击生成结果行，定位查看组件所在位置，将组件标记为“不替换”，即不执替换操作。已标记的可再次点击右侧选择器恢复可替换状态。
+
+    当决定应用“智能识别”的组件时，可点击组件快捷替换模块下方的 “替换” 按钮进行组件替换。“替换”成功后，对应组件的UI将自动转换为 CodeWave 相应的内置组件。
+
+    <img src="../assets/zhinengshejishengchengyemian_202412232041_21.png" class="imgStyle" style="width:90%;" />
+
+#### 注意事项
+
+1.  请勿使用在多个设计工具之间转换的设计稿，比如不要使用从Sketch转换而来的MasterGo文件，或者从Figma转换而来的Sketch文件等。
+2.  在进行设计稿转换之前，务必保证设计稿符合规范要求。若设计稿不符合规范，会不同程度影响生成页面的效果，建议依照 [D2C设计稿规范](../../25.智能开发/005.智能设计生成页面/040.D2C插件使用手册/020.D2C设计稿规范.md) 对设计稿进行相应的调整和优化后再导入平台投入使用。
+
+#### 常见问题
+
+- [页面结构树只有一张图，未识别到组件](../../94.常见问题解答/20.应用开发/50.智能D2C/010.页面结构树只有一张图，未识别到组件.md)；
+- [导入设计稿后页面超出画布](../../94.常见问题解答/20.应用开发/50.智能D2C/020.导入设计稿后页面超出画布.md)；
+- [D2C导入设计稿生成的界面页面结构嵌套太深；](../../94.常见问题解答/20.应用开发/50.智能D2C/030.D2C导入设计稿生成的界面页面结构嵌套太深.md)
+
+- [导入设计稿后，有很多不符合预期的图片；](../../94.常见问题解答/20.应用开发/50.智能D2C/040.导入设计稿后，有很多不符合预期的图片.md)
+- [不习惯使用自由布局；](../../94.常见问题解答/20.应用开发/50.智能D2C/050.不习惯使用自由布局.md)
+- [无法选中局部模块或导出一片空白；](../../94.常见问题解答/20.应用开发/50.智能D2C/060.无法选中局部模块或导出一片空白.md)
+- [导出的字体样式和大小与设计稿不一致；](../../94.常见问题解答/20.应用开发/50.智能D2C/070.导出的字体样式和大小与设计稿不一致.md)
+
+### 3.2 静态图转页面
+
+CodeWave智能开发平台支持导入图片生成页面，在导入图片后，系统会自动识别图片中的元素，生成页面结构。在生成页面后，可自由调整组件及布局，以及为组件绑定数据源或事件。
+
+<img src="../assets/zhinengshejishengchengyemian_202412232041_22.gif" class="imgStyle" style="" />
+
+#### 适用场景
+
+<table id="D2C">
+    <tr style="background-color: #eff8ff;">
+        <th style="width:350px;">场景</th>
+        <th style="width:250px;">推荐指数</th>
+    </tr>
+    <tr>
+        <td>表单、表格、图表等中后台原型稿的截图</td>
+        <td>⭐⭐⭐ 推荐</td>
+    </tr>
+    <tr>
+        <td>表单、表格、图表等中后台设计稿的截图</td>
+        <td>⭐⭐⭐ 推荐</td>
+    </tr>
+    <tr>
+        <td>表单、表格、图表等中后台手绘稿的截图</td>
+        <td>⭐ 不推荐</td>
+    </tr>
+    <tr>
+        <td>切图较多的、需要像素级还原的页面截图</td>
+        <td>⭐ 不推荐</td>
+    </tr>
+</table>
+
+#### 操作步骤
+
+1.  登录CodeWave智能开发平台，进入页面IDE，点击页面结构树需插入组件的节点右侧按钮，选择“导入设计稿/截图”。
+
+    <img src="../assets/zhinengshejishengchengyemian_202412232041_23.png" class="imgStyle" style="width:90%;" />
+
+2.  选择导入截图，选择本地图片或直接粘贴剪贴板中的图片。
+
+    <img src="../assets/zhinengshejishengchengyemian_202412232041_24.png" class="imgStyle" style="width:90%;" />
+
+3.  等待系统自动识别和转换图片中的元素，生成页面结构。
+
+    <img src="../assets/zhinengshejishengchengyemian_202412232041_25.png" class="imgStyle" style="width:90%;" />
+
+    <img src="../assets/zhinengshejishengchengyemian_202412232041_26.png" class="imgStyle" style="width:90%;" />
+
+#### 注意事项
+
+1.  导入的截图时，请上传清晰、无噪的图片，避免图片中存在干扰元素。
+2.  导入截图后，生成的页面结构，支持人工干预，例如手动修改文字。
+3.  导入的手绘稿，请使用正楷书写中文，避免使用草书等不方便系统识别的字体。
+
+### 3.3 体验示例
+
+CodeWave智能开发平提供了部分设计稿/截图示例模板，可以直接导入生成页面使用。
+
+<img src="../assets/zhinengshejishengchengyemian_202412232041_27.png" class="imgStyle" style="" />
+
+## 4. 操作示例
+
+### 4.1 设计稿生成页面
+
+官网首页-导入整页：
+
+<video controls style="width:90%;">
+  <source src="https://static-vusion.nos-eastchina1.126.net/tutorial/%E6%96%87%E6%A1%A3%E4%B8%AD%E5%BF%83%E9%99%84%E4%BB%B6/%E6%99%BA%E8%83%BDD2C/%E5%AE%98%E7%BD%91%E9%A6%96%E9%A1%B5.mp4">
+</video>
+
+### 4.2 截图生成页面
+
+中后台-导入局部模块截图：
+
+<video controls style="width:90%;">
+  <source src="https://static-vusion.nos-eastchina1.126.net/tutorial/%E6%96%87%E6%A1%A3%E4%B8%AD%E5%BF%83%E9%99%84%E4%BB%B6/%E6%99%BA%E8%83%BDD2C/%E5%B1%80%E9%83%A8%E6%A8%A1%E5%9D%97.mp4">
+</video>
+
+## 5. 其他说明
+
+1.  设计稿或截图可以导入生成子页面，也可选择一部分设计内容导入至页面结构树组件插槽中。
+2.  建议使用D2C功能时，配合使用“全局缩放”功能。使用"全局缩放"功能，是为了确保图像或内容在不同设备上可以保持内容的比例不变，避免出现拉伸或扭曲的情况，从而提供更加一致和美观的用户体验。
+
+    <details>
+    <summary title="什么是NASL">
+     点击查看：如何开启“全局缩放”功能？
+    </summary>
+
+      1. 在页面IDE中点击上方“更多”按钮，在下拉框中选择“自定义主题样式”。
+
+         <img src="../assets/zhinengshejishengchengyemian_202412232041_28.png" class="imgStyle" style="width:85%;" />
+
+     1. 打开“自定义主题样式”界面后，先选择应用端（PC端或H5端），然后点击左侧导航栏“画布尺寸及缩放”，开启“等比缩放”，最后关闭“自定义主题样式”界面前需要点击“保存并应用”按钮（保存当前设置信息）。
+
+         <img src="../assets/zhinengshejishengchengyemian_202412232041_29.png" class="imgStyle" style="width:85%;" />
+    </details>
+
+
+3.  D2C相关的常见问题可参考：[常见问题解答-智能D2C](../../25.智能开发/005.智能设计生成页面/040.D2C插件使用手册/020.D2C设计稿规范.md)。
+4.  D2C相关的典型案例详见：[常见场景案例-智能D2C使用场景](../../80.常见场景案例/85.智能D2C使用场景/040.设计稿转页面：局部模块还原.md)。
+
+
+<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年12月23日</span>
+</div>
+
+<style>
+ .highlight {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 20px 10px 20px;
+      margin-bottom:20px;
+      margin-top:20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+ #D2C tr:nth-child(2n) {
+background: rgba(255, 255, 255, 0.5);
+}
+</style>
+
+<style>
+/* 折叠块加边框、背景色、边距 */
+  details {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 40px 10px 40px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  /* 折叠块标题不需要内边距 */
+  details summary {  
+    margin: 0 0 0 -20px;
+    font-weight: bold;
+    color: #679CF8;
+    cursor: pointer;
+  }
+  </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/030.C2D2C/350/256/276/350/256/241/346/240/207/345/207/206/345/214/226/351/223/276/350/267/257/346/214/207/345/215/227.md

@@ -0,0 +1,129 @@
+# C2D2C 设计标准化链路操作指南
+
+## 1. 链路简介
+
+C2D2C 即 “Code to Design to Code”，是通过代码与设计双向转化，实现设计到 页面的高质量还原 。其中，C2D（代码转设计稿）让设计稿包含组件标注信息，D2C（设计稿转代码）可精准生成 CodeWave 页面，CodeWave 组件的转化率可达100%。
+
+需注意，目前，仅 [MasterGo插件](../../25.智能开发/005.智能设计生成页面/040.D2C插件使用手册/030.MasterGo.md) 支持C2D2C 设计标准化链路。
+
+## 2. 核心优势
+
+- **开箱即用资源支持**：官方文档提供一套已标注完成的 Element Plus 组件设计系统，设计师可直接用于页面搭建，或按需改造，快速启动项目。
+- **自有设计系统适配**：支持识别企业自有设计系统，适配个性化组件需求。
+- **100%精准组件识别**：基于设计系统搭建页面时，D2C 自动提取组件信息并映射为 CodeWave 组件，节省沟通与调整时间。
+
+## 3. 操作流程
+
+按 “**设计工具内准备→CodeWave 平台内落地**” 两大阶段执行，明确设计师与 CodeWave 开发人员的分工的操作步骤。
+
+### 设计工具内操作（核心：完成设计与组件标注）
+
+#### 场景 1：使用官方 Element Plus 组件设计系统
+
+适合无自有设计系统、需快速启动的项目：
+
+<img src="../assets/C2D2Cshejibiaozhunhualianlucaozuozhinan_202508291912_1.png" class="imgStyle" style="" />
+
+##### 设计师操作
+
+设计师基于<a href="https://mastergo.com/goto/MgrVhLgZ?page_id=0:37115\&file=162200702175247 邀请您进入《Element Plus 插槽版本》，点击链接开始协作">官方 Element Plus 组件设计系统</a>搭建页面：参考官方设计规范（含组件、视觉），从 Element Plus 组件库拖取组件，完成页面布局、样式调整（如按钮颜色、文本框边距）。
+
+操作示例：
+
+1.  基于<a href="https://mastergo.com/goto/MgrVhLgZ?page_id=0:37115\&file=162200702175247 邀请您进入《Element Plus 插槽版本》，点击链接开始协作">官方 Element Plus 组件设计系统</a>创建副本。
+
+    <img src="../assets/C2D2Cshejibiaozhunhualianlucaozuozhinan_202508291912_2.png" class="imgStyle" style="" />
+
+1.  从 Element Plus 组件库拖取组件，完成页面布局、样式调整（如按钮颜色、文本框边距）。
+
+    <img src="../assets/C2D2Cshejibiaozhunhualianlucaozuozhinan_202508291912_3.png" class="imgStyle" style="" />
+
+##### CodeWave 开发人员操作
+
+以下操作示例设计稿以官方组件库提供模板为例。
+
+1.  选择组件库 Element Plus。
+
+    <img src="../assets/C2D2Cshejibiaozhunhualianlucaozuozhinan_202508291912_4.png" class="imgStyle" style="" />
+
+1.  导出设计稿 Zip 包：打开设计工具插件，选择 “CodeWave”→“导出到 CodeWave”，生成 Zip 文件（用于后续导入 CodeWave）。
+
+    <img src="../assets/C2D2Cshejibiaozhunhualianlucaozuozhinan_202508291912_5.png" class="imgStyle" style="" />
+
+1.  导出CodeWave可识别设计稿zip包。
+
+    可选是否设计稿检测优化：通过插件检测 “影响转换的图层问题”，明确解决方案，调整后可提升导入 CodeWave 的页面还原度；
+
+    该环节支持忽略检测结果直接将设计稿导出为CodeWave可识别的文件并存储至本地。
+
+    <img src="../assets/C2D2Cshejibiaozhunhualianlucaozuozhinan_202508291912_6.png" class="imgStyle" style="" />
+
+#### 场景 2：使用企业自有设计系统
+
+适合需适配个性化组件的项目，**需设计师与 CodeWave 开发协作**：
+
+<img src="../assets/C2D2Cshejibiaozhunhualianlucaozuozhinan_202508291912_7.png" class="imgStyle" style="" />
+
+##### CodeWave 开发人员操作
+
+**组件开发与调试**：
+
+1.  获取映射函数地址：执行命令，启动服务后获取地址：
+
+    ```bash
+    npx lcap-d2c-mg2comps create <project-name>
+    npm install
+    npm run dev
+    ```
+
+1.  开发 CodeWave 组件：可选“自行开发”（参考《[前端组件扩展开发](../../40.扩展与集成/10.扩展开发方式/20.前端扩展开发/10.前端扩展开发概述.md)》文档）或 “AI 在线创建”（参考《[MasterGo - AI 在线辅助创建资产](../../25.智能开发/005.智能设计生成页面/040.D2C插件使用手册/030.MasterGo.md)》文档）。
+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>
+   
+
+##### 设计师操作
+
+基于标注后的组件集进行设计稿编辑。后续进行D2C操作（设计稿转代码），CodeWave 组件的转化率仍可达100%。
+
+### CodeWave 平台内操作（核心：导入设计稿并生成页面）
+
+此阶段由 CodeWave 开发人员执行，无需设计师参与，步骤如下：
+
+1.  登录与进入 IDE：登录 CodeWave 平台，进入页面 IDE，在页面结构树中找到需插入组件的节点，点击右侧按钮→“导入设计稿 / 截图”。
+2.  上传设计稿文件：选择 “导入设计稿”，上传在设计工具中导出的 Zip 包（**无需开启智能识别**，系统会自动读取标注信息）。
+3.  自动生成 CodeWave 页面：导入设计稿zip后，系统将基于标注信息，将设计稿中的组件映射为 CodeWave 组件，同时自动转化页面布局。
+4.  确认结果：检查组件识别与布局转化是否正确，无误后即可进入后续开发（如编写业务逻辑）。
+
+<img src="../assets/C2D2Cshejibiaozhunhualianlucaozuozhinan_202508291912_9.gif" class="imgStyle" style="" />
+
+## 4. 注意事项
+
+1.  新增组件资产时，需严格按照 CodeWave 平台组件开发规范进行，确保标注信息完整准确，保障后续映射和转化顺利。
+2.  在 CodeWave 平台确认组件识别结果时，要仔细检查，避免因组件识别错误导致后续开发逻辑编写和页面发布出现问题。
+
+
+<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>