Dreamsands - 把網頁的螢幕截圖轉換成使用不同前端框架可執行的程式碼

Contents

上週的 GPT-4 線上展示中，OpenAI CEO 有做了一個很令大家驚奇的功能展示 – 將手繪的網站草稿變成 HTML/JS/CSS 程式碼，並可以立即在瀏覽器中展示。

其實這個功能早在 5 年前就有團隊做了出來，並開源，請參考從手繪 Wireframe 自動生成 HTML 程式碼

我在網路上看到一些評論提到這樣的功能實用價值不高，因為大部分的網頁都是比較複雜的，而且目前真正在專案中使用的前端框架也不僅僅使用 HTML/JS/CSS，而是會使用 React/Vue/Angular 這樣的前端框架來開發比較複雜且大型的網頁應用程式的前端。

今天要介紹的這家新創公司應該就聽見了市場的聲音，它們做出來的工具就可以去把網頁的截圖擷取下來，然後你可以選擇你想要轉換成哪一種前端框架

從 Dreamsands 的產品的介紹影片中，他們將 Notion 的入口網頁擷取了下來，然後使用這個工具轉換成前端程式碼並可以馬上執行，可以看到目前流行的前端框架 React/Angular/Vue 都有支援

前端開發的工作要被 AI 取代了嗎?

看到這樣的工具，可能有不少人會說未來的前端開發工作是不是也會跟翻譯工作一樣走向末日? 我倒是沒這麼悲觀，畢竟前端開發需要很多的溝通，AI 也許會把一些很簡單的網頁前端開發降低了門檻，但是需要比較複雜的人機介面，還需要考慮到 UX 的可用性，這個工具可以把前置作業的繁瑣工作所要花費的時間省了下來，讓開發者把時間更專注在與後端工程師的溝通與協調，UX 使用性的功能提升與網頁效能等工作。所以這樣的工具出現，會讓我們去思考，那接下來前端工程師的技能要再往哪個方向去提升?