零程式碼只要會打字,輕鬆打造互動網站與遊戲:WebSim.AI

更新 發佈閱讀 5 分鐘

WebSim.AI 是一款以自然語言生成可互動網站與模擬環境的工具平台,只需輸入文字描述或 URL,即可在瀏覽器內生成類似網站、遊戲或虛擬空間的沉浸式體驗。支持 Claude Sonnet 3.5、GPT‑4 等主流 AI 模型,且完全無需任何寫程式背景都可以使用。

我也快速生成了一個翻牌的記憶遊戲,有興趣可以一起玩看看!

WebSim 操作步驟

第一步:右上角 Create 創建新專案

raw-image

第二步:在右下方輸入想要創造網站或遊戲的提示詞。

raw-image

第三步:左下角可選擇模型,選項有數字代表會扣點數,像是 100✦、200✦、400✦,免費帳戶每天基本會有 240✦ 。但是基本不扣點數的模型就很夠用。
輸入完提示詞後輸入框右側會出現藍底白色箭頭的按鈕,即可發送提示詞。

raw-image

第四步:如果生成出來不滿意,雖然無法刪除,但可以根據所選之前的版本號繼續迭代更新。不斷迭代到滿意的樣子。版本區塊的左上角可以設定 pin 固定目前最新版本號。完成後右上藍底白字 Post 按鈕可發佈。

raw-image

右側︙更多功能按鈕可以下載原始檔案,下載為 html, js, css 檔,可以在本機端開啟瀏覽。

WebSim 影音教學:


使用心得

缺點:WebSim 能夠快速構思原型及互動模型,但生成代碼較基本、可能未必適合複雜或大規模商業網站。模擬互動多為即時生成代碼,並未真正連結後端系統或資料庫。沒有選取局部迭代生成功能,有時候對於目標的位置難有效更改。

優點:用最簡單的方式,讓使用者可以快速製作產品示意頁、互動展示模擬,適合快速構思驗證與創意思考。

設計師可以快速構建可操作 MVP 原型、互動遊戲、演示樣板。開發人員可局部生成互動功能。甚至有人把 Windows XP 也模擬出來了。


WebSim 起源於一天之內完成的黑客松

WebSim 起始於 2024 年 3 月底的 Mistral AI Hackathon,由 Rob HaisfieldSean Lee 共同創建,最初以 Anthropic 的 Opus 3 模型為 AI 生成核心,後來改用 Claude Sonnet 3.5。是在一天之內完成的原型專案,靈感來自當前浪潮中的「WorldSim」模擬概念。

2024年4月28日 Joscha Bach, Karan Malhotra, Rob Haisfield 在 WebSim Hyperstition Night 上發表了演講。闡述 WebSim 能將任何輸入的 URL 轉化為動態、互動式的虛擬網頁,甚至能將自然語言指令化為實際功能。打破了傳統網頁的限制,允許使用者探索、創造甚至混合內容,例如模擬運行遊戲或生成獨特的視覺效果。讓使用者在虛擬環境中體驗前所未有的自由與沉浸感,如同進入一個充滿可能性的數位夢境。


讓每個人都夠分享、互動的創作社群

他們共同開發 WebSim 最初的想法是:「如果讓 LLM(大型語言模型)自動生成網頁,使用者能無限地探索並修改它們,會怎樣?」讓 WebSim 不僅僅是一個 AI 生成網頁的工具,更有可能成為「新一代互聯網」的一部分。因此,WebSim 最初是一種單人創作體驗,但 Sean 和 Rob 很快決定將其轉變為社交創作平台,讓使用者能夠分享、互動、修改並分享他人創作的內容,形成一種即時、互動的內容生態。

WebSim 的特色在於讓每個人都有機會成為個人網頁設計師、遊戲開發者,甚至是全能程式設計師。Sean 和 Rob 認為創意比撰寫程式更重要,因此 WebSim 的一大優勢就是使用者友善的介面,讓用戶能夠專注於創意,而不必擔心程式編碼。

報告簡報:Introduction to AI Website Design Tools Websim (林位青 & 楊沛瑜)
資訊來源:Episode 7: Rob Haisfield & Sean Lee (Websim)

留言
avatar-img
林位青的沙龍
265會員
86內容數
林位青的沙龍的其他內容
2025/07/03
本書作者樺澤紫苑醫師從精神科醫學角度出發,淺顯易懂地說明如何提升專注力,在資訊爆炸時代提升效率。作者提出「大腦處理訊息過程」四步驟:輸入、思考、整理、輸出,並以自身經驗和研究佐證,提供有效提升專注力的實用方法。
Thumbnail
2025/07/03
本書作者樺澤紫苑醫師從精神科醫學角度出發,淺顯易懂地說明如何提升專注力,在資訊爆炸時代提升效率。作者提出「大腦處理訊息過程」四步驟:輸入、思考、整理、輸出,並以自身經驗和研究佐證,提供有效提升專注力的實用方法。
Thumbnail
2025/06/07
這本書提供一個全面的精力管理系統,涵蓋體能、情緒、專注力、目標與熱愛等面向,幫助讀者提升效率並改善生活習慣。透過「情緒ABC理論」與「福格行為模型」的應用,讀者可以學習如何管理情緒、投資精力於重要事項,以及克服注意力分散的問題。
Thumbnail
2025/06/07
這本書提供一個全面的精力管理系統,涵蓋體能、情緒、專注力、目標與熱愛等面向,幫助讀者提升效率並改善生活習慣。透過「情緒ABC理論」與「福格行為模型」的應用,讀者可以學習如何管理情緒、投資精力於重要事項,以及克服注意力分散的問題。
Thumbnail
2025/01/06
本書探討芬蘭設計的美學、理念、人文精神與歷史典故,並深入產品設計與人們生活的連結關係。作者以優美文筆,結合芬蘭文化與自然環境,闡述設計如何從生活中需求出發,取材於自然環境與人文歷史,並保留舊地景再生為新文化建設。書中介紹多位知名芬蘭設計師及其作品,展現芬蘭設計師對自然環境的尊重與對人文歷史的傳承。
Thumbnail
2025/01/06
本書探討芬蘭設計的美學、理念、人文精神與歷史典故,並深入產品設計與人們生活的連結關係。作者以優美文筆,結合芬蘭文化與自然環境,闡述設計如何從生活中需求出發,取材於自然環境與人文歷史,並保留舊地景再生為新文化建設。書中介紹多位知名芬蘭設計師及其作品,展現芬蘭設計師對自然環境的尊重與對人文歷史的傳承。
Thumbnail
看更多
你可能也想看
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
一個獨立開發者,立志打造顛覆性的遊戲體驗,在開拓全新玩法的道路上,砥礪前行。 大家好,我正在開發一款獨立遊戲,以魔法戰鬥為主題,如果想要嘗試遊戲的demo,歡迎到下方連結處,加入我的Discord群組。 魔法與戰鬥的世界---開發中的遊戲   這款遊戲發生在一個飄浮於雲端之上的世界,
Thumbnail
一個獨立開發者,立志打造顛覆性的遊戲體驗,在開拓全新玩法的道路上,砥礪前行。 大家好,我正在開發一款獨立遊戲,以魔法戰鬥為主題,如果想要嘗試遊戲的demo,歡迎到下方連結處,加入我的Discord群組。 魔法與戰鬥的世界---開發中的遊戲   這款遊戲發生在一個飄浮於雲端之上的世界,
Thumbnail
透過玩桌遊的方式學習AI生成圖像技巧,在充滿樂趣的活動中,學會如何操作工具及生成圖像技巧。這款遊戲預計下個月將開設實體課程,適合所有對AI有興趣的人、AI繪圖新手及藝術愛好者。
Thumbnail
透過玩桌遊的方式學習AI生成圖像技巧,在充滿樂趣的活動中,學會如何操作工具及生成圖像技巧。這款遊戲預計下個月將開設實體課程,適合所有對AI有興趣的人、AI繪圖新手及藝術愛好者。
Thumbnail
其實有很多下載版的實用工具,免費的付費的我都有,但就懶得安裝懶得開,還是喜歡線上直接使用……
Thumbnail
其實有很多下載版的實用工具,免費的付費的我都有,但就懶得安裝懶得開,還是喜歡線上直接使用……
Thumbnail
瞭解如何在手機上用筆作畫,體驗一筆一畫間逐步生成畫作的樂趣,雖然不及AI繪圖逼真、炫麗無比,但手繪也別有一番趣味。
Thumbnail
瞭解如何在手機上用筆作畫,體驗一筆一畫間逐步生成畫作的樂趣,雖然不及AI繪圖逼真、炫麗無比,但手繪也別有一番趣味。
Thumbnail
在網路世界初出茅廬時,不管你的文章內容多有價值,大多數時你只會遇到一片寂靜。這篇文章將分享如何利用 AI 指令並借用名人故事和框架,快速吸引你的觀眾,讓你的內容更具影響力。
Thumbnail
在網路世界初出茅廬時,不管你的文章內容多有價值,大多數時你只會遇到一片寂靜。這篇文章將分享如何利用 AI 指令並借用名人故事和框架,快速吸引你的觀眾,讓你的內容更具影響力。
Thumbnail
這篇文章分享了一個線上桌遊的新創意,結合了線上課程與遊戲的元素,以促進學習與擴大人脈。作者希望透過遊戲的體驗來教導漏斗、直效行銷的知識,並提供了免費試玩的名額,期待收集更多的回饋意見。
Thumbnail
這篇文章分享了一個線上桌遊的新創意,結合了線上課程與遊戲的元素,以促進學習與擴大人脈。作者希望透過遊戲的體驗來教導漏斗、直效行銷的知識,並提供了免費試玩的名額,期待收集更多的回饋意見。
Thumbnail
好用必收AI工具:終於可以更新大頭貼了!好幾年沒有換過社群的頭像了。最近剛好玩到一個超有趣的AI生圖工具,可以把臉部變成漫畫Q版的貼圖,真的很適合來當大頭貼呢!
Thumbnail
好用必收AI工具:終於可以更新大頭貼了!好幾年沒有換過社群的頭像了。最近剛好玩到一個超有趣的AI生圖工具,可以把臉部變成漫畫Q版的貼圖,真的很適合來當大頭貼呢!
Thumbnail
邊塗鴉時思考的一些事情,僅限個人想法。 一直在思索是什麼讓文字與人變得平面、變得冰冷,又是什麼讓創作的意義變得單一而扭曲。最近在盯著「AI建議」這個按鈕看時稍微理出一些頭緒。 文章發布前頁面頂端有個「AI建議」的SEO優化按鈕,按下之後會出現AI自動生成的標題、分類、摘要等內容,我覺得很有趣。
Thumbnail
邊塗鴉時思考的一些事情,僅限個人想法。 一直在思索是什麼讓文字與人變得平面、變得冰冷,又是什麼讓創作的意義變得單一而扭曲。最近在盯著「AI建議」這個按鈕看時稍微理出一些頭緒。 文章發布前頁面頂端有個「AI建議」的SEO優化按鈕,按下之後會出現AI自動生成的標題、分類、摘要等內容,我覺得很有趣。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News