体验过Claude的Artifacts和ChatGPT 4o的canva的人都非常喜欢这种可视化的开发功能。而且还能辅助写代码
比如prompt大神李继刚前段时间爆火的 汉语新解就是在Claude上实现的
我一直在期待国产AI能有这样的应用出来。现在，通义上新的代码模式体验基本上能实现这个功能了。从使用功能上来说，通义做的更像canva一点
先来看几个效果，这些都是通过输入文字得到的应用。而不是直接写代码
emoji碰撞器
太阳系运行图
五子棋
是不是觉得很有意思，下面来看如何制作
01
通义代码模式
打开通义。在输入框上方有代码模式的快捷按钮。上方的介绍中也有
点击进来，可以看到通义官方提供了很多的模版。我们可以根据这些模版来做第二次原创修改
比如我来做个英文卡片，下面是文字描述
文字描述
创建一个HTML页面，用于介绍英语单词“abandon”的词源、含义及用法。页面应该包括以下部分：
– **标题区域**：展示单词“abandon”及其音标 [??b?nd?n] 和基本含义“遗弃，放弃”。字体颜色为深绿色。
– **词源解释区域**：解释单词“abandon”的构成：前缀“ab-”（表示“离开”、“远离”或“去除”，中文显示）和词根“-bannire”（源自古法语的“ban”或“bannir”，意味着“命令”、“宣布”或“驱逐”，中文显示）。分别换行显示“ab-”+“-bannire”，以及其对应的解释。字体颜色为深灰色。
– **图片带链接区域**：包含一张与单词相关的图片，图片链接为 https://img.alicdn.com/imgextra/i2/O1CN01uvTkm71Zcyko06JcG_!!6000000003216-2-tps-1232-928.png。
– **例句区域**：提供一个使用单词“abandon”的例句：“She decided to abandon her old ways and start anew.” 其中“abandon”一词被高亮显示为深绿色，其他颜色为深灰色。英文显示。请确保页面布局美观，易于阅读，所有的内容居中对齐，背景颜色为浅色，边框颜色为深绿色。
上面的描述中，首先给出了卡片的基本功能。然后详细描述了各个区域需要呈现的。
输入后，就开始了自动生成代码。代码完成后，一个完整功能的HTML网页就生成了好了。如果你想更改格式，比如改成svg的或者效果，在描述中说明就好了
再来看一个制作答案之书的
请输入标题
帮我实现一个可预览的HTML网页，实现【答案之书】，要求如下:
1 画布380*700，填充图片（https://img.alicdn.com/imgextra/i3/O1CN01FSw38T1Ne6L2mg3Mb_!!6000000001594-2-tps-936-1200.png）,图片居中显示。
2.距离顶部44px,居左32px的位置放置答案之书的【答案】，宽度300px，注意保持文字长度需要显示2行，第一行5字以内，第二行也是5个字以内，60px字号，65px行高，整体高度190px，颜色F9DBB3，粗宋体，两行后缩略
3.【答案】下方22px显示对答案的【解释】（“遇到问题、犹豫不决时，试试拿走这个简单的答案或暗示。”），距离左边32px 边距，16px字号26px行高，白色，普通宋体；
4.【答案】的内容请你根据【答案之书】的语料风格去生成，保持是两段式的文案，如“当下困难、即将解决”，“心中的她、即将出现”，每段5个字以内，你需要至少得储备50个并且不重复；
5.页面的最开始有一个按钮，注意此时【答案】和【解释】都不要出现，16px圆角，32px高，背景1C1C1C，里面文字【默念问题、寻找答案】，点击之后开始随机生成答案；
6.按钮的位置在画布下方16px
写在最后
通义的代码模型功能可以做到不会写代码，也产出应用。并且还提供了生成的源代码。
这些源代码插入到自己网站中去就可以实现应用植入。
AI真的是在打破很多专业的门槛，在这个时代，只要你有想法，借助AI，你就可以做出对应的产品。
给大家说一个福利:
三天AI免费体验营。进去听三天AI课，让你知道AI的最新玩法，早日踏上AI之路
更多AI有趣的玩法关注公众号,可领取一份大礼包，包含AI/python/副业 资料
你好，我是江枫，本硕电子信息工程，主业程序员。AI时代，开启自己自媒体IP之路。国内最大AI社群:AI破局俱乐部成员。毕业至今，换过一次工作，呆过2个公司。下一份工作：数字游民。
