pxCode加速RWD網頁開發時程 前進美國市場搶攻全球商機 智慧應用 影音
藍牙
ST Microsite

pxCode加速RWD網頁開發時程 前進美國市場搶攻全球商機

  • 鄭宇渟台北

pxCode AI 響應式編輯器 - 10 倍速網頁開發。pxCode
pxCode AI 響應式編輯器 - 10 倍速網頁開發。pxCode

pxCode除了能像WordPress這樣的No Code網頁開發工具,大幅降低學習門檻,不必辛苦學習編程切版,主要還能匯出高品質響應式的程式碼,以利不同客製化需求的開發整合,具備大幅降低開發成本與時間等優點。只是隨著各種行動裝置日益普及,傳統網站架構必須透過專業工程師協助轉向響應式網頁( Responsive Web Design;RWD),才能在各個不同尺寸裝置上完整呈現網頁內容,也造成開發工程師的極大工作負擔。

pxCode創辦人張鑑泉表示,傳統網站要轉向RWD響應式網頁,專業工程師需將原本網頁切割成多個元素、寫程式再重新編排,整個流程非常複雜且繁瑣。特別是用No Code/Low Code工具製作的網頁,背後通常存在大量無意義的程式碼,對程式開發設計師是一大負擔。目前市面上雖有不少業者推出可自動將設計稿轉程式碼(design to code)的方案,不過實用性有待提升。

自動化完成複雜切版工作 提高工作效率達20倍

擁有豐富網站開發經驗的張鑑泉決定攜手夥伴,在2023年創立pxCode ,提供一套自動化轉換工具,能協助產出高品質的響應式網頁程式碼,藉此消除繁瑣的逐行編碼和不斷對照設計進行核對的需要,使開發者更加滿意,進而提高開發應用的速度。pxCode方案可自動化約80%的編碼工作,讓開發者易讀、易改、易整合,能夠專注於核心業務邏輯、用戶互動和更吸引人的開發。整體工作效率提升至少20倍以上,目前全球註冊用戶已超過20萬。

張鑑泉指出,傳統透過網頁工程師,人工手刻出設計稿成程式碼,除耗費工程師大量時間之外,且在手動編碼過程中容易出錯,常常導致看似微小但對品牌形象有重大影響的差異。採用AI與人工編輯混合式技術的pxCode最大的特色之一,在於具備高準確性,可以在減少手動干預的情況下,幫助保持對原始網頁設計的忠實度,並產出100% 正確的HTML結構。其次,pxCode更提供一個協同合作環境,促進設計師和開發者之間更順暢的工作流程,提高專案執行項目效率。最後則是可將設計稿直接匯入,例如若工程師直接將 Figma 導入pxCode,用戶可以依據原始的視覺設計,在pxCode中重新構建出理想的HTML結構。

舉例而言,工程師在操作介面中僅需點擊一下,即可預覽不同瀏覽器、不同尺寸的結果,並且可以直接分享連結與他人即時討論及修改,提高專案工作效率。

速度、品質受肯定 進軍國際市場最大利器

以美國紐約知名網頁設計開發公司為例,過往前端工程師在每個網頁切版都得耗費1-2天,以一個30頁左右的專案為例,光是前期切版工作就得耗費1~2月時間。該公司改用pxCode之後,單一位工程師大約僅花費2周時間就完成3個專案、超過100頁的網頁切板工作,能有效降低公司整體營運成本支出,也提高前端工程師的工作效率。

儘管pxCode的工具已有不錯的成效,但現有網頁程式碼命名品質仍有優化空間。因此,藉由參與亞灣新創園高雄AWS聯合創新中心,導入Amazon Web Services(AWS)的生成式AI技術資源。目前已開始採用AWS的生成式AI基礎模型託管服務Amazon Bedrock 的 Claude 3.5 Sonnet大型語言模型,進行程式碼命名品質優化,以及將原始圖檔及中繼資料轉為程式碼的功能開發,在生成程式碼方面,目前初步最高準確率可達80%,結合css命名等功能。未來經過校準之後,將會在下一版產品中開放給用戶使用。

張鑑泉表示,目前市場上有兩家海外公司也提供類似的工具與服務,但根據客戶反饋,在開發速度、程式碼品質方面,pxCode略勝一籌。2024年我們開始耕耘美國市場、全力推展當地業務,也希望結合AWS聯合創新中心計畫資源,進一步提升產品競爭力,進而擴大在國際市場的佔有率。

關鍵字