科技

一句話寫代碼，通義也有了自己的Artifacts

11月15日 11:3311月15日 11:40 新浪網 tech-auto-hilite

作為天文愛好者，我一直想做一個太陽系的運行軌跡圖，不僅要能動起來，而且還得是自己可以設置參數的那種。

但我不會寫代碼，要想實現起來挺難的……現在AI出現了，能不能幫到我？

最近鼓搗了一番，終於做出這個動畫頁面了。

截圖有壓縮，不太清晰，可複製這段網址查看：

https://lxblog.com/qianwen/share?shareId=3dc1e1dd-5933-40e5-9f01-1ef2a3ca3542&type=codePreview

怎麼做的？將這段Prompt發給AI就可以了。

創建一個動態的太陽系模型，展示太陽和圍繞它運行的行星，包括水星、金星、地球、火星、木星、土星、天王星和水行俠星。每個行星應有自己的軌道和自轉動畫。地球應有一個圍繞它運行的月球。背景為一個包含星星的深色空間，星星應具有不同的透明度和大小。
要求：使用 <canvas> 元素繪製太陽系模型，畫布大小為 600px 寬、800px 高，居中顯示。背景使用一個橢圓形徑向漸變，漸變從深藍色（#1C2837）到黑色（#050608）。在背景中添加 150 個星星，隨機生成，星星大小介於 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。頁面右上角，有一行字「沃垠AI測試頁面」，桑治體，10號字，右對齊。
代碼結構：
HTML 部分：使用 canvas 元素並為其設置寬高：600px × 800px。添加內聯樣式以設置背景、字體等。
JavaScript 部分：加載所有行星和太陽的圖片，確保所有圖片加載完成後開始繪製。使用數組 stars 來存儲隨機生成的星星，並繪製它們。使用 drawSolarSystem() 方法繪製所有的元素，包括太陽、行星、軌道和月球。requestAnimationFrame() 方法用來實現平滑動畫。

提示詞作者：靜水流深，我有經過微調。

AI會根據你的指令，自己寫代碼，生成預覽頁面。

頁面可以分享，也可以下載，支持Python、Java、C#、C++、PHP、C、VB、Lua、Rust、Swift等10多種語言。

通義上線「代碼模式」

這個功能，乍一看，是不是很熟悉？

對，它不就是Claude的Artifacts和ChatGPT 4o的canva嗎？可以讓程序開發（特別是網頁應用）可視化，而且又能夠輔助寫代碼，得到了不少開發者的認可。

通過Artifacts或canva，可以輕鬆創建應用程序，並實時查看、編輯和更新。當然，Artifacts不只是在應用開發上支持可視化，在其他的內容生成上也支持可視化，比如長文本整理、SVG輸出、圖表和流程圖輸出等。

通義的「代碼模式」，其實更像4o的canva，只專注代碼寫作領域。

現在，終於有國產AI支持這個功能了，很好！

之前，我們介紹過「漢語新解」這個神級Prompt，由李繼剛老師用非常古老的Lisp語言寫成，搭配Claude使用效果最佳。

後來，雲中江樹老師對這個提示詞進行了「漢化」，用Markdown語言（最適合普通人寫作的語言）轉成結構化提示詞，先讓AI生成html代碼，然後再將代碼複製到預覽網站查看。

路徑挺繞的。當時，我還問雲中江樹老師「有沒有更簡單的？」這不現在就來了。我將Prompt發到通義試下。

不錯啊，直接就能夠生成預覽了。我轉念一想，我直接複製這段代碼，再接入大模型API，類似「嘴替」這樣的毒舌AI不就成了？

前幾天，我給大家介紹過豆包的SeedEdit模型，一句話輕鬆P圖。現在，寫代碼、建網站，也是如此，一句話生成。

比如公司年會，行政想做個抽獎頁面，哪需要勞煩開發，直接給通義一句話就行。

想玩俄羅斯方塊？自己建一個，再也不用忍受那些垃圾廣告滿天飛的小網站了。

話說自己用AI做的遊戲，硬生生被我在測試頁玩到了1000多分

。。

這是我已經做好的頁面，可以直接拿去玩，Q、W鍵旋轉，方向鍵左右移動。

https://lxblog.com/qianwen/share?shareId=ceafad0e-723a-42cd-8fd8-8022206ee2cb&type=codePreview

讓孩子學成語，漢字、拚音、釋義（含英文翻譯）都不想錯過，直接將這個Prompt發給通義就可以了，一鍵生成海報。

幫我生成一個html網頁，來做一張400*600的海報，要求如下：1.標題是一個成語，如【白駒過隙】，加粗。底下是它的漢語拚音，粗桑治體。2.對成語進行拆解，用3-4個emoji來描述成語，每個emoji大概200*200像素，距離標題40像素。3.emoji下方是對成語的基本解釋，用20~50字來解釋下這個成語；成語解釋下方，附帶對這段解釋的英文翻譯。4.最下方是用這個成語造的句子，以短分割線分割。5.整體背景從莫蘭迪色系中選擇，卡片周圍加一些花紋、迴紋，簡約、清新、文藝。6.排版清晰有呼吸感，元素不要互相重疊，整體都要居中對齊，四邊邊距至少留40像素。

個人簡曆網頁，也是一鍵直出。