用一串程式碼做的畫,欣賞Chrome、Safari、Edge不同的「藝術」風格
用一串程式碼做的畫,欣賞Chrome、Safari、Edge不同的「藝術」風格

如果你的瀏覽器會畫畫,那它會畫出怎樣一幅畫呢?

如果瀏覽的小說文字多,那可能是文字組合多多的黑白圖畫;如果是線上看不同的動漫作品,那估計是色彩繽紛的普普畫作;要是每天都在看攝影美圖,那瀏覽器畫出的可能是一幅光影變幻的印象畫。

可惜瀏覽器不是AI,沒辦法根據自己的代碼、特性來畫一幅畫。

Web Browser1.jpg
Chrome的畫。
圖/ 愛范兒

但這也沒關係,數位藝術家黛安娜.史密斯(Diana Smith)設計了一串純web的程式碼,每個瀏覽器在加載頁面時都會將其呈現為繪圖。

史密斯一直以來都在進行的嘗試是用CSS和HTML作出畫作。所有的元素都是手動的輸入,僅允許使用Atom文本編輯器和Chrome的開發者工具進行操作,同時SVG元素的使用也可能受到限制。它的項目和源代碼都可以在GitHub中查詢。

這一次,史密斯的「作畫」和不同的瀏覽器有關。除了Chrome瀏覽器能夠呈現圖片本身預想的畫作外,其它瀏覽器都會「畫」出不同的圖像。這也展示了不同瀏覽器轉換工作的差別。

Web Browser2.jpg
▲ Diana Smith的其它藝術作品
圖/ 愛范兒

這不是說其它的瀏覽器都不如Chrome,只是作者在一開始並沒有考慮過跨瀏覽器兼容的問題。

但就是因為沒有兼容,這串代碼反而畫出了不同的「有趣」圖畫。

由於這個項目的藝術性,因此我不關心跨瀏覽器的兼容性,所以即時預覽可能在除Chrome之外的任何瀏覽器中看起來都很可笑。

在Safari瀏覽器中,蕾絲的花邊裝飾覆蓋在了女人的臉上,這片蕾絲本應該出現在女人的脖頸後方作為裝飾品。

Web Browser3.jpg
Safari的畫。
圖/ 愛范兒

而在2014版本的Opera瀏覽器中,畫作變得更加詭異了,有了一種全然不同的風格。脖子分成了三個部分,眉毛、頭髮、眼睫毛的位置都出現了偏移和錯位,以一種更像條碼的方式展現。脖子、眼睛也出現了位置的偏移,這是一張平面的、詭異的畫作。

Web Browser4.jpg
Opera的畫。
圖/ 愛范兒

而讓人感覺十分複雜的是Edge瀏覽器。雖然他的名字Edge有「邊緣」的意思,但在這次作畫中,它自動「畫」掉了所有的邊,讓項鍊消失,使整幅圖畫更為平滑。

這幅畫作還是所有畫中看起來最為陰沉的一幅。

Web Browser5.jpg
Edge的畫。
圖/ 愛范兒

還有曾是世界上最流行的瀏覽器——Netscape Navigator(網景領航員),儘管它的市場佔有率一度達到了90%,但今天可能很多人都沒有聽過它的名字了。

即便如此,它依然是最有風格的瀏覽器創作者,畫出的圖像自成一派。

臉變成了方塊,嘴巴、眼睛等五官都變成了不同大小的方塊,深色的毛髮變為了條碼狀的線條。有點像樂高,也有點像《當個創世神(minecraft)》風格。Vice覺得這個顏色和微軟的Edge瀏覽器基本保持了一致,或許是因為這兩家公司都曾統治了90年代。

Web Browser6.jpg
Netscape Navigator的畫。
圖/ 愛范兒

Diana Smith說:「當你在不同的瀏覽器上查看這張圖片時,你就像是在查看網路的歷史,以及當時用戶對瀏覽器的要求。」

事實上,雖然這個數位藝術完全是藝術方面的探索,但也很容易讓人聯想想到中國多年前的一場行銷活動——IE6殲滅戰。

Web Browser7.jpg
圖/ 愛范兒

當時還有很多用戶在使用存在較大安全隱患的IE6,於是奇虎360號召大家和周鴻禕一起「真槍實彈」地消滅IE6。用戶只需要登錄活動主頁就能自動檢測用戶瀏覽器的IE內核版本,檢測自己是否正在使用不安全的IE6。

若用戶瀏覽器內核為IE6版本,主頁的哆啦A夢就無法顯示出本來的形象,五官扭曲,分辨不清。而IE8內核的瀏覽器則能很清晰地顯示哆啦A夢,圖片顯示的直接不同也能提醒用戶升級瀏覽器。

Web Browser8.jpg
圖/ 愛范兒

七年前的行銷活動和今天的數位藝術品,二者都很有趣。

責任編輯:江可萱、蕭閔云
本文授權轉載自:愛范兒

關鍵字: #瀏覽器
往下滑看下一篇文章
溝通時間砍半、成交率衝 3 成!創造智能以完整 AI解方讓行銷事半功倍
溝通時間砍半、成交率衝 3 成!創造智能以完整 AI解方讓行銷事半功倍

隨著生成式 AI 工具快速普及,使用 AI 生成圖片、文案與影音素材,早已不再稀奇;真正困難的是,如何讓 AI 內容不只具備媲美真人拍攝的質感,還能精準貼合品牌語氣、商品賣點與社群傳播節奏,進一步帶動流量、轉換率與會員經營。

不過,有一家成立不到 5 年的團隊,卻憑藉著這項能力,吸引百年家電品牌、大型連鎖零售品牌、化妝品代工龍頭到政府機關等不同類型客戶合作。近期更與以創意出名的電商平台 蝦皮購物共同合作。

這家隱身在眾多一線大廠背後的 AI 操盤手,正是三立集團旗下的 MarTech 公司「創造智能」。相較於單純提供 AI 工具或單點行銷服務,創造智能更像是企業的 AI 行銷整合夥伴,不只是生成 AI 影音內容,而是從行銷目標出發,運用 AI 串起從內容生成、社群導流、顧客互動到會員經營的完整行銷旅程,突破過往內容與數據各自為政的盲點,這才是它真正讓企業買單的關鍵。

#1 創造智能
除了預算大幅減少、製作效率提升外,林慧珍指出,現在很多人都可以利用 AI 工具生成圖片或影片,但真正拉開差距的,不是 AI 應用能力,而是內容本身。創造智能刻意打造一支由行銷人才與工程師組成的「混血團隊」,兼顧 AI 影音內容的製作效率與品質。
圖/ 創造智能

串起行銷斷點,打造 AI 一條龍整合服務

對台灣企業行銷現場的長期觀察,是創造智能跳脫單一工具走向「AI 行銷整合」模式的起點。

創造智能執行長林慧珍指出,企業行銷工作往往交由不同廠商負責,從影音內容製作、廣告投放、社群經營到會員管理,各自使用不同工具與平台,導致資料散落在各處,形成一個個看不見的行銷斷點,一旦成效不如預期,很難釐清問題究竟出在哪一個環節,是素材無法打動消費者、投放策略失準,還是會員經營沒有發揮效益。

「很多 AI 或軟體業者的想法是,用自家產品去解決客戶的問題,但我們想的不只是解決問題,而是如何讓客戶用最方便、最完整的一條龍方式達成商業目標,」林慧珍強調,也因此,創造智能成立初期便鎖定AIGC 商業影音、AI客服/虛擬人及LINE CRM三大領域,希望從內容、互動到會員經營,串起完整的行銷流程。

在行銷旅程的前端,創造智能透過自家研發的系統與深厚的行銷經驗,快速產製出 AI 影音內容,協助品牌放大聲量、吸引目標受眾;接著透過 AI 客服與 AI 虛擬人即時回應顧客需求,不受時間、地點與語言限制,提高互動與成交機率;最後再藉由 LINE CRM 將流量收斂為品牌的第一方會員資產,透過會員貼標、分群分眾、自動化推播、再行銷等機制,持續深化顧客關係,將一次性的流量轉化為持續回購的忠誠會員。

用 AI 加速內容測試,快速找到市場答案

除了串起完整的行銷流程外,創造智能還能為企業創造兩大價值,第一個是協助企業更快找到真正打動消費者的內容。

「現在很多人都可以利用 AI 工具生成圖片或影片,但真正拉開差距的,不是 AI 應用能力,而是內容本身。」林慧珍指出,創造智能刻意打造一支由行銷人才與工程師組成的「混血團隊」,兼顧 AI 影音內容的製作效率與品質。

林慧珍進一步說明,團隊許多成員原本就來自專業影音團隊,長期協助企業製作導流影片,因此在劇本企劃、分鏡設計與敘事節奏上,累積大量實戰經驗。以近期協助蝦皮購物製作 AI 短影音為例,團隊並非直接交由 AI 工具生成內容,而是先分析目標受眾的偏好,再於腳本設計時加入企劃巧思。像是刻意運用消費者熟悉的歌曲氛圍,營造「似曾相識」的共感,引發社群討論。這些對品牌語感、社群節奏與內容敘事的掌握,正是創造智能團隊多年累積的內容經驗,也是現階段 AI 難以取代的核心價值。

另一方面,團隊則負責研發系統,以滿足企業多元行銷需求。例如:創造智能自行開發的「AI 導演模板」,不僅能快速生成高度擬真的影音內容,還可以依據品牌的不同需求,快速調整畫面風格、配音語氣與敘事方式,協助品牌進行 A/B Test,找出最能吸引消費者的內容。同時,還能依照不同社群平台需求,自動延伸出不同秒數與尺寸的版本,讓同一支影片快速應用於不同投放渠道。

更重要的是,從企劃發想到完成影片,最快約一週即可完成,不僅大幅縮短製作時程,也較傳統真人拍攝節省約 4 至 6 成的成本

讓 AI 走進工作流程,從客服升級為企業數位夥伴

創造智能為企業帶來的第二個價值是,透過 AI 客服 / AI 虛擬人推動流程自動化。林慧珍認為,AI 的價值不只是回答問題,而是深入既有的工作流程,以自動化服務協助企業降低成本、提升營運效率。

舉例來說,創造智能在與百年家電品牌合作時,先以 LINE 官方帳號與會員經營為核心,透過 LINE CRM 建立會員數據基礎,依據會員的瀏覽行為、產品偏好及互動紀錄,自動完成會員標籤與分群,並透過精準推播提供更符合需求的內容。隨著會員數據逐步累積,再進一步串接 Facebook 等社群平台,讓會員經營從單一通路延伸至跨平台互動,逐步建立完整的品牌數位接觸點。

目前,雙方合作已進入第二階段,將 AI 客服真正導入企業日常營運中。從客服受理、案件分流到售後服務,整個流程皆可透過 AI 與系統自動串接完成,不僅縮短服務時間、提升案件處理效率,也讓 AI 的角色從單純的客服工具,進一步成為串聯客服、門市與售後服務的企業數位夥伴。

同樣的模式,也被延伸到 B2B 外貿場景。創造智能為某知名化妝品代工廠打造 AI Sales(AI 虛擬人),並匯入產品知識與各國出口法規,讓 AI 不僅能以多國語言即時回覆海外買家問題,更可自動完成名片蒐集、預約真人業務及商機派單等流程,不僅溝通時間由 6 個月降至 3 個月,減少 30% 以上真人處理成本,訂單成交率提升 25%-32%,

#0 創造智能
某知名化妝品代工廠打造 AI Sales(AI 虛擬人)為例,AI已經可以回復日常問題的70%,真正優化前端開發的營運效率。
圖/ 創造智能

未來,AI 工具將持續演進,但企業真正需要的,始終是能協助創造商業價值的解決方案。林慧珍相信,唯有整合技術、內容與流程,並站在企業角度思考,AI 才能從工具升級為夥伴。這也是創造智能希望實踐的品牌理念──最人性化的MarTech 公司,創造更有溫度的智能夥伴。

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
代理式商務連動百兆商機
© 2026 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓