AI辅助编程已成为当下热点，各大平台纷纷集成DeepSeek。字节跳动旗下的MarsCode也不例外，在2月20日便迅速接入，体验后值得探讨这一组合带来的全新变革。

当前众多应用都在拥抱DeepSeek，编程工具自然也不甘落后。MarsCode早在2月20日就已接入DeepSeek，现在是亲身体验的最佳时机。

安装MarsCode

首先，如果你是初次接触MarsCode，安装过程极为简便。以Visual Studio Code为例，只需在扩展面板中搜索MarsCode，点击安装并登录即可。侧边栏的MarsCode图标会呼出聊天窗口，让你直接与AI对话。

VSCode官方下载地址：https://code.visualstudio.com/Download
JetBrains官方下载地址：https://www.jetbrains.com.cn/

挑战生成Canvas动画

平时浏览网页时，常被精美的Canvas动画所吸引，但一直没时间深入研究。如今借助AI辅助编程，终于有机会尝试更有趣的创作。

本次挑战目标是用Canvas绘制一个旋转的3D魔方，选择魔方的原因是其6个面恰好对应最近研究的AI应用卓越架构框架的6个维度。借助MarsCode接入的DeepSeek R1，我们来看看效果能有多震撼。

让我们先看看最终效果，再逐步实现它。

生成代码之前先写需求文档

打开Visual Studio Code，若已安装MarsCode插件，可在右下角切换支持的模型，目前支持DeepSeek R1和V3两个版本。

按照惯例，先将需求写入r.md文档，以便MarsCode全面理解需求，生成准确的代码。

若项目较大，建议拆分需求文档：一个主框架文档描述整体项目（类似索引），每个模块单独编写需求文档，按模块生成代码，便于调试。

// r.md
## 页面说明
1. 参考AWS Well-Architected Framework，提炼出企业级AI应用的卓越架构框架，并生成动态介绍网站。
2. 页面使用Canvas绘制一个三阶魔方，魔方6个面分别代表不同的架构维度，并且可交互展示信息。
3. 3D魔方需要能转动扭转，并且每个面点开后有详细信息。
4. 6个架构维度为：合理部署、业务持续、性能效率、安全合规、成本优化、持续运营。

## 技术栈
1. 使用HTML+JQuery。
2. 数据保存在本地即可，暂时不需要数据库。

## 风格说明
1. 使用tailwind CSS样式。
2. 增强互动交互能力。

这段需求文字就是给AI的完整指令，写清楚需求是后续生成高质量代码的基础。

指定上下文，MarsCode支持这3种

在Visual Studio Code中可以选择根据不同文档来生成代码，这是一个很贴心的小细节，这样我们可以选择Code、Files、Workspace等多种上下文数据了，自行选择代码片段或者多个文件，也可以把整个工作空间丢过来作为上下文，不需要移动鼠标就直接选择文件，太方便了。

深度思考过程，AI做到了授人以渔

这个思考过程是真的惊艳。对开发者来说，除了最终代码，更想知道AI是怎么思考的。DeepSeek-R1在输出代码的同时，把解题思路也一并展示出来了。

也就是说，我们除了让AI帮我们写代码，AI还可以成为我们的老师，教我们思路，把AI强大的思考能力用于编程逻辑思考，这比很多付费课程要有用的多。

第一版Canvas效果

话说回来，我本人对Canvas其实一窍不通，连代码都看不懂，更别提自己写了。之前不敢想的内容，现在也敢尝试了，丢给MarsCode，不一会生成了出来。

效果怎么样？哈哈，还真生成了一个魔方，每个面都配了文字。丑不丑先放一边，先有了再说——能看到页面跑起来，就已经是很大的突破了。

小步快跑方式让MarsCode继续修改

继续让MarsCode修改代码，我们把魔方和具体架构维度左右分开展示。

// 向MarsCode发送需求
左边为魔方，右边为6个模块，并且魔方自动可以旋转

很快，左右两栏效果都改好了。这个时候觉得魔方还可以再优化，于是继续提需求。增加透明质感、增加多个维度，并且鼠标点击魔方的一个面时右侧显示选中状态。左侧魔方自动旋转，也支持鼠标拖拽——这个拖拽旋转的功能可是MarsCode自动帮忙加的，直接Accept就行。

// 向MarsCode发送需求
魔方颜色实现部分透明，实现质感、冰块感，鼠标点击魔方不显示文字、改为鼠标移动到魔方上显示文字

生成代码的时候，很难通过需求文档一次描述得非常完整，中间总会有些需要修改的地方。建议每次修改不要太多，避免影响之前的代码。反正现在MarsCode都是免费的，也不需要考虑使用次数，所以简短的提需求保证逐步优化效果，是个不错的策略。

不务正业？让MarsCode写代码

让MarsCode帮着写写文章，自己生成代码、自己写文章，就差配图了。不过配图也可以用上面Canvas运行的魔方图。我们只需要提需求就行了，需求详细说明也可以由MarsCode来补充完整。

又让MarsCode使用Canvas生成了一个手绘风的架构图，画流程图也不在话下。

更多玩法，网页版MarsCode

MarsCode支持网页版，对于企业或团队来说，可以通过网页版IDE嵌入现有业务系统中，比如打包一个开源项目、搭建实验环境，真正做到开箱即用。目前支持DeepSeek模型，后续也可能会接入其他模型。

使用MarsCode还可以写文档，将文档转成Markdown格式，让MarsCode读取上下文并帮你修改、优化、评估，反复迭代。

除了写代码、修bug、生成Canvas动画、画流程图、写文档，使用MarsCode还有哪些好玩的？等你来解锁。