引言

在人工智能快速发展的当下，编程不再是技术专家的专属领域。在Claude 的 Artifacts 这几个月大火之后，阿里巴巴不久前也推出了类似的轻应用生成工具——通义千问代码模式。该工具采用 AI 编程常用的自然语言交互方式，让普通用户也能轻松创建简单的应用程序。本文将深入分析这一创新工具的功能特点，评测其能力边界，并和Claude的Artifacts进行一个简单的对比。

产品定位与核心优势

无门槛编程理念

• 用户只需使用日常语言描述需求
• 系统自动将自然语言转换为可执行代码
• 适合完全没有编程基础的用户群体

技术支持

• 基于通义千问大模型，具备强大的代码处理能力
• 支持自然语言处理和生成式人工智能技术
• 应该是采用了Qwen2-72B或者是更新的Qwen2.5-Coder-32B-Instruct开源模型，确保代码生成质量

用户体验优化

• 简单高效的页面渲染技术
• 支持实时预览功能
• 配备一定数量的预设应用供用户熟悉指令的书写方式

多语言支持

• 支持Python、Java、JavaScript等主流编程语言
• 提供不同语言之间的代码转换功能

下图是通义千问代码模式的界面，下方需求输入区的对话框给出一句话的需求，就可以调用代码模式的功能。如果对需求描述不熟悉，还可以点击模板应用区的例子，复制快捷指令进行二次创作。

代码模式的使用方法

1. 需求描述

• 使用日常自然语言描述想要实现的功能和需求
• 可以参考模板应用区的示例进行描述
• 尽可能详细地说明功能细节和页面样式要求
• 建议说明期望使用的编程语言和技术框架

2. 代码生成

• 系统会根据需求自动生成相应的代码
• 支持HTML、CSS、JavaScript等前端技术
• 可以生成Python、Java等后端语言代码
• 代码会自动添加适当的注释说明

3. 实时预览

• 对于网页相关代码可以即时查看运行效果
• 支持实时交互和功能测试
• 可以预览页面布局和样式效果
• 方便快速发现和定位问题

4. 调整优化

• 可以与通义千问进行多轮对话
• 根据预览效果提出修改建议
• 要求添加新功能或改进现有功能
• 优化代码结构和性能表现
• 完善错误处理和异常情况
• 添加更多注释提高代码可读性

比如我常用的测试案例扫雷游戏，一句话需求：设计一个网页版的扫雷游戏，地雷和标记都要使用emoji，通义千问就生成了如下图的网页版扫雷游戏，试了一下，基本功能都完成了，还不错 ！

这里给大家分享两个代码模式下代码窗口的有趣功能。如下图所示，一个是给代码添加注释。点击该功能后，代码会重新生成并加上注释，方便用户学习理解。另一个是语言转换，能够在 Python、Java 等语言之间进行转换，类似 ChatGPT 的 Canvas 所提供的功能。不过要注意，预览只支持网页相关的编程语言，像 Python 这种则需要复制到本机 IDE 才能运行。这两个功能有点像代码编辑器。此外，代码窗口还支持手动修改代码，这是 Claude 的 Artifacts 所不支持的功能，所以代码模式很像 Artifacts 和 Canvas 的混合版。

应用案例实测

为了进一步探索通义千问代码模式的能力，我把应用广场内的例子大致看了一遍，分享几个有代表性的案例和特性给大家。

五子棋游戏开发

首先是网页游戏类的应用。下面是官网提供的一个简单的五子棋游戏提示词，显然不是一句话需求哈！功能和页面样式都写的很详细，而且开头结尾都指明要生成HTML页面，似乎写这样的需求还是建议懂点前端的基础知识。

生成一个五子棋游戏的HTML页面

包含以下功能：
游戏区域为400*400像素的画布。
玩家通过点击画布下棋，黑棋先行。
绘制棋子时，你需要通过arc方法绘制一个圆形，使用Math.round来确保棋子落在棋盘的交界处。
当一方连成五个相同的棋子时，游戏结束并显示获胜信息。

页面样式要求：
背景颜色为#f0f0f0。
画布背景颜色为#f3d2b5，并带有轻微阴影效果，阴影的透明度不超过0.2
提示信息字体大小为20px，居中显示。

请根据上述要求生成完整的HTML代码。

下面是通义千问给的五子棋HTML版本，大家可以看到，不是每次都会严格遵循提示词，很明显的一个错误就是棋子没有落在棋盘的交界处。

另一个发现是通义千问对React 组件的支持不太稳定，自己生成的React代码预览却很容易出错。我估计这就是为什么看到的提示词例子都明确说了要HTML代码。相比之下，Claude、Monica 和 Sider 都很轻松的支持 React 组件，所以在前端设计中方案选择会比较多。如果只有纯 HTML，在有限的代码输出下，稍微复杂一点的交互式效果可能就无法实现。这点还需要改进一下！

太阳系运行图展示

然后看看教学展示类的应用。下面是官网给出的一个太阳系模型动态展示的提示词，相当复杂。主要亮点是使用了外部的 CDN 图像资源，这个特性不错，尤其在教学素材利用方面。很多场景下，可以把教学素材传到网上图床，然后在代码模式的网页应用设计中引用。另外，这个提示词连函数名称和代码结构都定义了，个人觉得有点违反自然语言输入的习惯，或许是为了让生成的结果更精确。另一方面，也许这个提示词是和大模型多次迭代交互的结果，然后一次性总结放在一起。我觉得这也是 AI 辅助设计应用常见的过程。

创建一个动态的太阳系模型，展示太阳和围绕它运行的行星，包括水星、金星、地球、火星、木星、土星、天王星和海王星。每个行星应有自己的轨道和自转动画。地球应有一个围绕它运行的月球。背景为一个包含星星的深色空间，星星应具有不同的透明度和大小。

要求：

使用 <canvas> 元素绘制太阳系模型，画布大小为 600px 宽、1200px 高，居中显示。
背景使用一个椭圆形径向渐变，渐变从深蓝色（#1C2837）到黑色（#050608）。
在背景中添加 200 个星星，随机生成，星星大小介于 0.5px 到 1px 之间，透明度随机，范围从 0.5 到 1。
太阳及行星的图像将通过 CDN 加载，使用以下图像资源：
太阳：https://img.alicdn.com/imgextra/i1/O1CN01oVLbLx22VlN34KDQs_!!6000000007126-2-tps-800-800.png
水星：https://img.alicdn.com/imgextra/i2/O1CN01UjgqIB1SrRxQfrflh_!!6000000002300-2-tps-800-800.png
金星：https://img.alicdn.com/imgextra/i3/O1CN01JGEgLU1dfxnVvp91R_!!6000000003764-2-tps-800-800.png
地球：https://img.alicdn.com/imgextra/i4/O1CN01R6wlzD1IhhMlBcGLg_!!6000000000925-2-tps-800-800.png
月球：https://img.alicdn.com/imgextra/i4/O1CN01Ad5SeB20tv1nfRoA2_!!6000000006908-2-tps-800-800.png
火星：https://img.alicdn.com/imgextra/i1/O1CN01OlZAk81OVEHJ0pazq_!!6000000001710-2-tps-800-800.png
木星：https://img.alicdn.com/imgextra/i2/O1CN01MA3Mk51bAhWxWxHim_!!6000000003425-2-tps-800-800.png
土星：https://img.alicdn.com/imgextra/i2/O1CN01NG2FjS1XDDEofNNhg_!!6000000002889-2-tps-800-800.png
天王星：https://img.alicdn.com/imgextra/i1/O1CN01wnxTX51xIPkTHqPBr_!!6000000006420-2-tps-800-800.png
海王星：https://img.alicdn.com/imgextra/i1/O1CN01LTf0rT25zwJWsIDkD_!!6000000007598-2-tps-800-800.png
每个行星和太阳的图像尺寸应根据实际行星的大小进行缩放。太阳大小为 60px，其他行星的图像按比例缩放：
水星：5px
金星：8px
地球：10px
火星：7px
木星：12px
土星：24px
天王星：9px
海王星：8px
每个行星和月球的运动应该平滑，并在它们的轨道上旋转。使用 requestAnimationFrame 来平滑动画。
每个行星应该沿着椭圆轨道围绕太阳运行，轨道半径如下：
水星：60px
金星：90px
地球：120px
火星：150px
木星：180px
土星：210px
天王星：240px
海王星：270px
地球的轨道上还应绘制一个月球，月球围绕地球旋转。月球的半径为 10px，围绕地球的轨道半径为 10px。
每个行星的旋转速度不同，根据其轨道半径和 Math.cos、Math.sin 方法来计算行星的位置，模拟行星的运动轨迹。确保每个行星的运动是不同的周期性：
水星：速度快，周期最短，使用 angle * 4 计算。
金星：中速，周期稍长，使用 angle * 3 计算。
地球：周期较长，使用 angle * 2 计算。
火星：使用 angle * 1.5 计算。
木星：使用 angle * 1 计算。
土星：使用 angle * 0.8 计算。
天王星：使用 angle * 0.5 计算。
海王星：使用 angle * 0.4 计算。
绘制行星时，应使用 ctx.drawImage() 方法，将图像绘制在轨道的合适位置，行星图像的大小可以按比例调整。
使用 ctx.beginPath() 和 ctx.arc() 方法绘制每个行星的轨道，轨道应为虚线，并且透明度为 0.2。
代码结构：

HTML 部分：

使用 canvas 元素并为其设置宽高：600px × 1200px。
添加内联样式以设置背景、字体等。
JavaScript 部分：

加载所有行星和太阳的图片，确保所有图片加载完成后开始绘制。
使用数组 stars 来存储随机生成的星星，并绘制它们。
使用 drawSolarSystem() 方法绘制所有的元素，包括太阳、行星、轨道和月球。
requestAnimationFrame() 方法用来实现平滑动画。

不过出来的效果还不错！如下图。之后天文地理之类的课程，如果需要动态展示的，都可以使用代码模式来尝试完成。

销售图表展示

最后就是常见的商业数据分析可视化的例子。官网给了一个例子，展示月度销售业绩统计，提示词如下。

创建一个HTML页面，用于展示月度销售业绩统计。请包括以下部分：

- **标题区域**：
  - 小标题“月度销售业绩统计”，字体颜色为深灰色。

- **分割线**：
  - 一条水平分割线，线条颜色为浅灰色。

- **副标题区域**：
  - 小副标题“你今年的月均销售额为”，字体颜色为深灰色。
  - 大副标题“30,0000”，字体颜色为黑色。

- **图表区域**：
  - 图表类型为柱状图，柱状图排列在底部对齐。柱状图的高度和每个月的销售额高低进行绑定。一共十二个月，颜色为蓝色系，间距均匀分布且不要过大。
  - 每个柱状图下方会显示月份缩写。
  - 当鼠标悬停在柱状图上时，柱状图的颜色饱和度会变高，同时在其上方显示月份名称和销售额数值。

    
- **注释和可读性**：代码需要包含详细的注释，解释各部分的功能，便于理解和维护。

请确保页面布局美观，所有的内容都保持合理间距，同时易于阅读。

效果如下图。大家可以看到，提示词里还是明确说了HTML页面，然后没有注入数据，所以图表的数据是虚拟的，主要就是代码模式目前还不支持上传数据集文件，比如excel文件之类的，也还没有数据分析功能，这个功能希望赶紧补全，不然和ChatGPT还有Claude就还不是同一级别，只有一半的能力。另一个问题是对常用的绘图库chart.js支持的不好，代码没有禁止调用chart.js，但是预览就是无法显示。我尝试了多次都报错，AI自身也无法修复，只能使用基本的SVG格式来画图，图表绘制能力明显减分！期待改进！

通义千问和Claude功能对比

我把测试过程中的发现总结在了如下的功能对比表格中，希望可以帮助大家更好地理解这两个AI驱动的轻应用生成工具。下表列出了它们在多个方面的支持情况，包括预览、手动修改代码、换语言、外部图片资源链接等。通过对比，我们可以看到通义千问和Claude在不同的功能方面有所不同，选择哪一个工具取决于具体的需求和应用场景。

功能	通义千问代码模式	Claude
单页HTML预览	支持✔️	支持✔️
手动修改代码	支持✔️	不支持❌
多语言转换	支持✔️	不支持❌
外部图片资源链接	支持✔️	不支持❌
数据分析	不支持❌	支持✔️
React组件	不支持❌	支持✔️
chart.js图表库	不支持❌	支持✔️
多模态输入	不支持❌	支持✔️
可缩放矢量图形 (SVG) 图像	支持✔️	支持✔️
Mermaid图表渲染	支持✔️	支持✔️

未来展望

通义千问代码模式的推出无疑为国内用户提供了又一种AI驱动的轻应用生成工具。通过降低技术门槛、提供直观的用户体验，它不仅让编程变得更加平民化，还为未来的软件开发方式提供了新的可能。从目前的应用场景来看，该工具在多个领域都展现出巨大的发展潜力。在网页游戏开发方面，普通用户也能轻松创建具有竞技性的休闲游戏。在教学展示类应用方面，增强的交互式教学功能，无疑会提升教学效果。在数据可视化领域，通过支持实时数据接入、提供更丰富的图表库、加强数据分析能力，将显著降低商业智能应用的开发门槛，让更多企业能够便捷地进行数据驱动决策。这种革命性的变革将推动编程教育的普及，促进创新创业的发展，最终实现"人人都是程序员"的愿景。随着AI技术的不断进步，我们有理由相信，未来的应用开发将变得更加简单、高效，让更多人能够将创意转化为现实。

如对AI智能体相关信息感兴趣，或需进一步交流，请关注微信公众号【AI智能体研究】