104學習

Dreamweaver

這項技能主要用於網站設計與前端開發,能快速建立和編輯網頁,支援視覺化操作和程式碼編輯,適合不熟悉程式語言的設計師或前端工程師使用。透過它,可以有效管理HTML、CSS和JavaScript,提升網頁製作效率與品質。在職場上,具備這項技能代表能快速產出兼具美觀與功能性的網站作品,對中小企業或網頁設計公司尤其受歡迎。

127 個相關職缺

提升你的實力,朝專業更進一步

精選課程

充實自己,讓能力持續成長

成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面  (下集)
成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (下集)
WordPress新手架站10堂課
WordPress新手架站10堂課
成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面  (上集)
成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (上集)
WordPress視覺排版設計超入門:CSS與HTML
WordPress視覺排版設計超入門:CSS與HTML
AI工程師與企業開發必修!FastAPI後端精通:全面入門與進階實戰指南
AI工程師與企業開發必修!FastAPI後端精通:全面入門與進階實戰指南
工程師救星-用Bootstrap速成響應式網頁開發
工程師救星-用Bootstrap速成響應式網頁開發
成為前端工程師|jQuery 入門密技,愉快打造互動式網頁不求人
成為前端工程師|jQuery 入門密技,愉快打造互動式網頁不求人
Linux Socket網路程式設計【本課程為線上課,報名後專員會提供上課資訊】
Linux Socket網路程式設計【本課程為線上課,報名後專員會提供上課資訊】
(最新版.NET 6)ASP.NET Core MVC 無痛快速上手
(最新版.NET 6)ASP.NET Core MVC 無痛快速上手
Docker入門到精通:新手開發者的必修容器技術!比你想像的更容易學!
Docker入門到精通:新手開發者的必修容器技術!比你想像的更容易學!

精選證照

考取專業證照,讓能力被市場看見

ACP Dreamweaver 2020 |
Adobe Certified Professional是Adobe官方認可的國際證照,由Adobe與全球最大考證中心Certiport共同合作推出,針對平面影像、網頁設計與影音動畫領域,結合每個軟體所具備的核心應用與知識理論的內容,提供擁有設計軟體使用經驗的人士進行考核認證,考科包含Adobe Photoshop、Adobe Illustrator、Adobe InDesign、Adobe Dreamweaver、Adobe Animate、Adobe Premiere Pro及 Adobe After Effects。 為多媒體設計學習者最該必備的證照,能證實學習者對Adobe核心應用具備相當的熟練度,額外的Adobe設計專家證書,更能展現擁有跨軟體設計專案的能力,藉由認證項目檢視自我是否掌握業界所需,除了了解掌握學習程度,更能為創作作品增加說服力。
Adobe
SSE Adobe Dreamweaver CC |
Adobe Dreamweaver的視覺化介面設計,讓程式設計師和視覺設計師可以在自己熟悉的環境中更直覺、更有效的作業;利用Dreamweaver的內建功能來製作動畫效果、加入影音多媒體…等,讓網頁製作輕鬆又方便,擁有一張Adobe Dreamweaver CC認證,不單是您在求職或職場生涯中報酬率最高的投資,更是您在網路世界致勝的關鍵。
Silicon Stone Education (SSE)
Adobe Certified Dreamweaver Developer |
Adobe Certified Dreamweaver Developer認證為Adobe所發之國際認證,針對多媒體網頁設計之核心應用能力,所規劃的認證項目。其協助網頁工作者,能有效使用Dreamweaver 軟體進行創作展現實力。
Adobe
Adobe Photoshop |
Adobe Photoshop是一個由Adobe Systems出品的專業影像處理軟體。跟公司的其它軟體一樣,Photoshop適用於Mac OS及Microsoft Windows兩個作業系統,同時公司也發布了Unix作業系統上的版本。 Photoshop主要處理以畫素(Pixels)所構成的數位影像。利用其廣泛的編修與繪圖工具,可以有效的進行圖片編輯工作。獨特的歷史紀錄浮動視窗和可編輯的圖層效果功能,能讓使用者可以方便的測試效果。對各種濾鏡的支援更令使用者能夠輕鬆創造出各種奇幻的效果。目前,Photoshop 也正在被廣範地應用在網路影像處理。Photoshop的幾個後續版本中搭配了一個獨立的軟體ImageReady,其加強了Photoshop對網路影像(主要是GIF圖檔)的支援功能。而在CS3中ImageReady被Fireworks所代替。Photoshop CS3以上版本允許使用者更新以容易操作的方式升級到最新的硬體平台。 Photoshop被大部份的人認為是最好的影像處理軟體,但與著名的3D Studio Max一樣,價格昂貴使其難以普及。這也令Jasc Software公司的Paint Shop Pro,GIMP小組的GIMP和友立資訊的Ulead PhotoImpact佔領了不少的市場佔有率。
Adobe
Adobe Illustrator |
Adobe Illustrator是一個由Adobe Systems出品的專業影像處理軟體。跟公司的其它軟體一樣,Illustrator適用於Mac OS及Microsoft Windows兩個作業系統,同時公司也發布了Unix作業系統上的版本。 Illustrator 利用其廣泛的編修與繪圖工具,可以有效的進行圖片編輯工作。獨特的歷史紀錄浮動視窗和可編輯的圖層效果功能,能讓使用者可以方便的測試效果。對各種濾鏡的支援更令使用者能夠輕鬆創造出各種奇幻的效果。目前,Illustrator 也正在被廣範地應用在網路影像處理。 Illustrator 被大部份的人認為是最好的影像處理軟體,但與著名的3D Studio Max一樣,價格昂貴使其難以普及。這也令Jasc Software公司的Paint Shop Pro,GIMP小組的GIMP和友立資訊的Ulead PhotoImpact佔領了不少的市場佔有率。
Adobe
Adobe Certified Cold Fusion Developer |
Adobe Certified Cold Fusion Developer認證為Adobe所發之國際認證,針對網頁設計相關之核心應用能力,所規劃的認證項目。其協助網頁設計工作者,能有效使用Cold Fusion軟體進行網頁創作。
Adobe

精選貼文,掌握第一手知識

前端工程師2025年必學技能清單:10大工具與技術指南,職場增能懶人包整理

前端工程師需要掌握的技能和專業涵蓋了多個方面(HTML、CSS 、 JavaScrip...等),包括基礎的網頁開發知識、前端框架、以及與團隊合作的工具等。本篇文章將深入探討前端工程師必備的 10 大核心技能與工具,幫助您在職涯中站穩腳步,開發出高效且吸引人的網站與應用。 1. HTML、CSS 和 JavaScript HTML: 用於結構化網頁內容,是前端開發的基礎語言。 CSS: 負責設計和佈局,使網站具有視覺吸引力。 Java Script: 增加互動性,處理用戶事件和動態內容。 ⚡推薦課程⚡ 成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (上集) https://nabi.104.com.tw/course/tibame/f5b246b2-ec79-4f0d-8ef5-2fdf8d6f5bcb 成為前端工程師|Java Script 入門:帶你逐步培養網頁開發技能 https://nabi.104.com.tw/course/tibame/830671fb-2c58-48fa-9a5a-6c1f1798598a 【更多課程學習】https://user266414.pse.is/6ps94k 2. 前端框架和庫 React.js: 一個用於構建用戶界面的 JavaScript 庫,能夠快速開發單頁應用(SPA)。 Vue.js: 一個漸進式框架,適合於小型到大型應用的開發。 Angular: 一個全面的前端框架,適合大型企業級應用。 Svelte: 新興的前端框架,以其高效的性能和簡化的開發體驗而受歡迎。 ⚡推薦課程⚡ Let’s Vue! 前端開發入門到實戰 https://nabi.104.com.tw/course/tibame/ee965aa9-eb02-43d5-ae79-1dcd50f965dc 3. 版本控制工具 Git: 版本控制系統,用於跟蹤代碼變更,方便團隊協作。 GitHub 或 GitLab: 托管代碼庫,協作開發和版本管理的主要平台 ⚡推薦課程⚡ Git 速成攻略:2.5 小時變身版本控制達人 https://nabi.104.com.tw/course/tibame/20a2bbd6-ee21-4d92-8899-18e59ea3b97f AI助理GitHub Copilot | 提升前端開發效率 https://nabi.104.com.tw/course/tibame/c4795096-ae10-43a5-b5e3-2a6548c30e8c GitHub Copilot AI賦能開發實戰訓練班 https://nabi.104.com.tw/course/tibame/2617c99d-b815-442d-89b4-aa35a360273a 4. 預處理與構建工具 Sass 或 Less: CSS 預處理器,能夠提高樣式表的可維護性和可重用性。 Webpack、Parcel 或 Vite: 模塊打包工具,用於優化資源加載、處理 JavaScript 模塊化等。 【更多課程學習】https://user266414.pse.is/6psa64 5. 響應式設計與跨平台兼容 響應式網頁設計: 掌握使用 CSS 媒體查詢(Media Queries)以適應不同屏幕尺寸的布局技巧。 跨瀏覽器兼容性: 確保網站在不同的瀏覽器(如 Chrome、Firefox、Safari、Edge)上的一致性。 ⚡推薦課程⚡ RWD響應式網頁設計入門 https://nabi.104.com.tw/course/tibame/9e4a630f-6e3b-4261-adf6-a6ac1edf1ea8 工程師救星-用Bootstrap速成響應式網頁開發 https://nabi.104.com.tw/course/tibame/9e4a630f-6e3b-4261-adf6-a6ac1edf1ea8 6. 調試與測試 Chrome DevTools: 瀏覽器內建的開發者工具,用於調試 JavaScript、分析網頁性能。 前端測試框架: 如 Jest、Mocha、Cypress,用於自動化測試和單元測試。 7. API 與 AJAX 技術 Fetch API 或 Axios: 用於與後端服務進行 HTTP 通信,拉取數據或發送數據。 RESTful API 與 GraphQL: 理解如何與 API 交互並消費 API 提供的數據。 8. 設計工具和基礎設計原則 Figma 或 Adobe XD: 瞭解設計工具以便與設計師協作。 UX/UI 基礎: 基本的用戶體驗和用戶界面設計原則,確保設計既美觀又實用。 ⚡推薦課程⚡ UI/UX 新時代指南:產品設計 x 商業思維 x AI 工具 https://nabi.104.com.tw/course/ppa/d9785ca3-7de2-4567-aae5-2c771a5471e8 UI/UX新手實務班|UI介面設計,洞悉使用者體驗 https://nabi.104.com.tw/course/tibame/1550e806-07b1-49a2-a8e8-42668911d4ca 9. 性能優化 代碼分割與懶加載: 減少初次加載時間,提升網站性能。 圖片優化與資源壓縮: 優化圖片格式與大小,減少網頁加載時間。 10. SEO(搜索引擎優化) 理解基本的 SEO 概念,確保網站在搜索引擎中具有良好的可見度,包括結構化數據的應用和適當的標題標籤。 ⚡推薦課程⚡ SEO搜尋引擎優化七大密技|攻上頂端排名寶座 https://nabi.104.com.tw/course/tibame/b0d286b0-9106-406c-beff-c53918ab2270 具備以上這些技能,能幫助前端工程師在現代網頁開發中具備更強的競爭力與靈活性。
104學習・職涯學習課程專文推薦

精選 不會設計也能做圖!ChatGPT 生圖提示詞 4 要素公式+10 組職場實用範本

活動要 IG 圖、簡報缺一張插圖、公告想放張海報,等設計排期又來不及? 現在 ChatGPT 就能直接生圖,但只打「幫我畫一張活動海報」,出來的圖常常風格不對、尺寸不合,字也是錯的。 差別不在工具,在提示詞有沒有講清楚。 記住一個公式:用途尺寸+主體場景+風格+文字限制 ① 用途尺寸:這張圖要用在哪裡? IG 貼文(1:1 正方形)、限動(9:16 直式)、簡報(16:9 橫式)、A4 海報(直式) 先講用途,AI 才知道要做多精緻、畫面怎麼排。 ② 主體場景:畫面裡有什麼、在哪裡? 先講背景場景,再講主角和重點細節。 ✕ 一杯咖啡 ○ 一杯冒著熱氣的拿鐵放在木頭辦公桌上,旁邊有筆電和便利貼 ③ 風格:要長什麼樣子? 寫實照片、扁平插畫、3D 立體、水彩、極簡線條……再加上主色。 想要像真的照片,就直接寫「寫實照片風格」。 ④ 文字限制:圖上要放哪些字?哪些東西不要? 圖上的字用「」框起來,並要求「文字完全照寫,不要多加字」 再註明字放在哪裡、多大、什麼顏色,以及「不要浮水印、不要其他文字」。 10 組職場實用範本(把【】換成你的內容就能用): 【行銷】 1. 活動主視覺 幫我做一張 IG 貼文用的 1:1 活動主視覺。畫面是【夏日海邊,一杯冰咖啡放在沙灘上】,扁平插畫風格,主色【藍色和橘色】。圖片上方寫「【夏日買一送一】」,粗體白字,文字完全照寫,不要其他文字。 2. 產品情境照 幫我做一張 16:9 的產品情境照,用在官網橫幅。畫面是【一支保溫瓶放在早晨的辦公桌上,旁邊有筆電和綠色植物】,寫實照片風格,自然光、柔和色調,右側留白給文案,不要放任何文字。 【小編】 3. 限動倒數 幫我做一張 9:16 的 IG 限時動態圖。背景是【亮黃色漸層】,中間放大字「倒數 3 天」,下面小字「【早鳥優惠】」,可愛手繪風,文字完全照寫,不要其他文字。 4. 知識貼文封面 幫我做一張 1:1 的知識型貼文封面。主題是【3 個整理桌面的技巧】,畫面是【整齊的辦公桌俯拍】,極簡扁平插畫,主色【薄荷綠】。上方標題寫「【桌面整理 3 招】」,置中、粗體。 【行政】 5. 公告海報 幫我做一張 A4 直式公告海報。主題是【辦公室冷氣清潔通知】,扁平插畫風,畫一台冷氣和清潔人員,色調清爽。上方標題寫「【冷氣清潔通知】」,下方留一塊空白區域讓我自己貼時間和地點。 6. 活動邀請卡 幫我做一張 16:9 的【尾牙】邀請圖。畫面是【燈籠和彩帶的喜慶場景】,溫暖的紅金色調,插畫風格。中間寫「【2026 年度尾牙】」,文字完全照寫,不要其他文字。 【HR】 7. 徵才圖 幫我做一張 1:1 的徵才貼文圖。畫面是【明亮開放的辦公室,幾位不同年齡的同事在白板前討論】,寫實照片風格。上方寫「【我們在找行銷企劃】」,右下角留白放公司 logo,不要其他文字。 8. 新人歡迎卡 幫我做一張 16:9 的新人歡迎圖,用在內部群組。可愛扁平插畫,畫【一群卡通同事拿著氣球歡迎】,主色【粉紅和淺藍】。中間寫「歡迎加入!」,文字完全照寫。 【PM】 9. 簡報概念插圖 幫我做一張 16:9 的簡報插圖,表達【跨部門協作】的概念。畫面是【幾個齒輪互相咬合,每個齒輪上有不同的部門圖示】,3D 立體風格,主色【藍色和灰色】,背景白色,不要任何文字。 10. 流程示意圖 幫我做一張 16:9 的流程示意圖,由左到右 4 個步驟,依序寫「需求」「設計」「開發」「上線」,用箭頭連接。扁平圖示風格,每個步驟配一個簡單圖示,文字完全照寫,不要其他文字。 最常見的三個錯誤: ・一次塞太多要求,改壞了不知道是哪一點;先出一張,再一次只改一個地方 ・要修圖時只說「改一下」,沒說哪裡要改、哪裡不能動;記得加「只改【背景顏色】,其他地方完全不變」 ・圖上的中文字沒有逐字檢查,錯字、亂碼就直接發出去了 小練習:用公式把這句話改寫成完整提示詞 「幫我畫一張中秋節的圖」 (參考寫法:幫我做一張 1:1 的 IG 貼文圖,畫面是月亮下的柚子和月餅,溫暖的水彩風格,上方寫「中秋節快樂」,文字完全照寫,不要其他文字。) 同一套「用途+主體+風格+限制」的思路,換到其他 AI 生圖工具也通用。想再多學一套做圖工具,推薦這門課「不用會設計,也能用視覺說服人:Google Nano Banana × Whisk 新手入門」: https://nabi.104.com.tw/course/104senior/34798fe1-6e71-430e-896b-1ef2243da6a5 也歡迎留言分享:你最常用 AI 做哪一種圖?有沒有一句讓你屢試不爽的提示詞? 資料來源: OpenAI Cookbook〈GPT Image Generation Models Prompting Guide〉 https://developers.openai.com/cookbook/examples/multimodal/image-gen-models-prompting-guide (功能與方案以 2026 年 11 月 ChatGPT 官方說明為準。生成的圖片對外使用前,記得確認文字正確,也避免直接模仿他人的商標或作品)
104學習・AI 趨勢報-科技愛好者的產地🤖

軟體業Technical Writer工作在做什麼?技術文件為何不是由PM寫?

軟體產業的Technical Writer工作在做什麼?和PM產品經理工作有什麼差異?Technical Writer職位結合「內容寫作」和「技術寫作」的專業,可以將硬梆梆的技術內容、轉換成一般使用者也能好理解的技術+商業內容。本文作者以自身經驗分享,解答包括Technical Writer工作內容及為什麼不由PM來寫技術文件。 文/朱麒 本文目錄(點擊可快速前往) 1. Technical Writer到底要幹嘛?2. 為什麼需要Technical Writer?3. 為什麼不由PM來寫技術文件? 我曾經擔任PM將近6年的時間、在新職位—Technical Writer工作也已經快9個月的時間,這篇文章想分享關於「寫文件」這件事情。 一開始有許多朋友和我討論說「為什麼不交給PM做就好?」在親身體驗與想過之後,我發現這兩者的定位與價值是完全不同的。這篇文章分享Technical Writer在做些什麼,以及簡單比較跟「產品經理(Product Manager)」的差異。 如果你對軟體產業有興趣、正在當PM的人、或是潛在想當Technical Writer的人看(有這樣的朋友嗎),一起來看看這篇文章吧。 備註:請留意此篇文章的脈絡都是以「軟體開發」的角度來談。 1. Technical Writer到底要幹嘛? 簡單說,就是替公司的產品寫一份「攻略本」。 攻略本是電玩產業的詞,能幫助新手玩家快速學會操作方法、了解遊戲目標,接著就可以比較開心的在遊戲的世界中玩耍。 而「技術寫作(Technical Writing)」就是替公司的產品寫使用文件,用來引導消費者更好地使用公司產品。技術寫作也可以視為公司品牌、產品使用體驗的一環,能影響消費者對於公司產品的整體觀感。 這就像「攻略本」會先告訴新手玩家基本的操作方法,讓玩家在別在超大的遊戲世界中不知所措的亂跑、被怪打死而感到挫折(可能一開始連「基礎戰鬥知識」都沒有就跑出新手村)。 好的技術文件,應該能夠把公司產品複雜的功能與規格,在適當的時間點、用適當的方式告訴使用者。 2. 為什麼需要Technical Writer? 對呀,為什麼不由最熟悉產品功能與規格的程式開發者或產品經理,來寫技術文件就好了呢? 先從「軟體開發者」的角度來說。由於技術文件(例如API Documentation)是技術含量相當高的文件,最好的寫作者當然是由開發者來寫。 然而多數的開發者在寫文件的時候,容易從非常技術的角度撰寫文件—多數狀況是「只解釋程式功能,但不解釋程式對於使用者的目的」。由於程式往往有自己的商業邏輯(例如建立訂單的流程、訂單對帳與請款的方式),使用者在不清楚商業邏輯的前提下直接閱讀,往往一頭霧水。 因此Technical Writier誕生了,這個職位結合「內容寫作(Content writing)」和「技術寫作(Technical Writing)」的專業,可以將硬梆梆的技術內容、轉換成一般使用者也能好理解的技術+商業內容。 Technical writer像是一位翻譯員,要把「技術」國家的語言翻譯給「商業」國家的人理解。 3. 為什麼不由PM來寫技術文件? 行行好,放過PM吧! PM的工作包山包海,要跟業務單位/客戶對需求、花時間整理規格、跟設計師/工程師/QA/營運團隊溝通。 PM職責範圍確實也包含寫產品的規格與規劃,例如: 使用者故事(User Story): 即 As a(使用者), I want(做什麼事情), so that(得到什麼成果),讓產品團隊理解每個功能為誰而做、要做什麼、做完成果。 User Story Acceptance Criteria Test Cases:寫完User Story後,必須要進一步描述這個功能的細節,透過「Given(在什麼情況下),When(當使用者做了什麼),Then(會發生什麼事情)」才能讓工程師與QA(測試工程師)執行。 Product Roadmap:告訴C字輩的老闆接下來的產品發展,這一季要做什麼、為什麼要做、要打哪些用戶、如何衡量成效、成效好與不好的相對應措施是什麼。 可以看到,PM的寫作文件通常是「對內」,告訴團隊接下來要做些什麼、不做些什麼;但Technical Writer通常是「對外(外部使用者)」,告訴使用者產品從哪裡開始用、要完成對應的事情該怎麼做、技術細節要到哪裡去查……等。 PM和Technical Writer的技能樹不同,前者更多在溝通、後者更多在引導。更多文章分享,可至「朱騏部落格」閱讀。 (原文標題:軟體產業中的 Technical Writer 在做些什麼,為什麼「寫文件」這件事情不都交給 PM 做就好?) [joblist_plugin title='更多104【Technical Writer】工作機會' url='https://www.104.com.tw/jobs/search/?keyword=Technical%20Writer' amount='4']
【104職場力】

只有我覺得Adobe越來越複雜嗎😢?

Hi大家好,我是阿萍仔,一位平面設計師。 從在學時期就開始接觸繪圖軟體,慢慢從coreIDRAW轉為illustrator的使用者。 20年前的繪圖軟體,還處於發展階段,所以,如踏入設計領域,擁有這項一技之長的技能,是具有一定優勢的能力。而美編設計相關的工作,我們最常使用的作業軟體,多為coreIDRAW、illustrator、Photoshop,當時的Adobe尚未獨佔市場🤨。 認真說起來比較有感的是,設計者所使用的電腦系統偏MAC居多,因設計重視顏色的準確度,如與PC螢幕顯色相比來說,MAC螢幕較無色差,且電腦外型符合美學,還有人性簡化的使用操作,一直以來深受設計師們的喜愛。 15年前,我進了廣告公司,當時是使用QuarkXPress設計軟體來排版,後來,Quark似乎不再提升使用工具的優化,公司同仁開始轉換使用indesign,再搭配illustrator的應用,來提升做稿的效率。也因二者都是Adobe旗下軟體,有了更高的相容性,進而取代Quark格式的不便之處。 就這樣,Adobe積極的開發更多款,設計、多媒體相關的系列軟體,在不是很普及的設計領域中,有了一席之位,逐漸脫穎而出!如今,已成為眾所皆知的繪圖軟體了。 6年前,開始接觸自媒體,踏入YouTube經營,會需要影片剪輯,我直覺聯想到Adobe Premiere。於是,熟悉Adobe介面的我,開始摸索影片串接、上字幕、做特效...功能,基本上,同一間公司所開發的軟體,在工具的使用邏輯不會相差太多,但每次剪完片,總得要花個三天三夜,耗費了我極大的產出心力!我想,應該是我沒有深入了解使用操作的原因吧?!可是,又不知該從何調整,才能加快影片的製作流程。 後來我發現,大家很推薦「剪映」軟體來剪輯影片,於是決定離開舒適圈,來嘗試一下。哇!一用下去不得了,這操作介面也太好入手了,特別是最讓我頭痛的上字幕,竟然可用「識別字幕」的功能,把我影片中的語音,自動識別生成字幕,大大提升了執行的效率,天啊~真心覺得,用過就回不去了啦!😍 別說我沒給Premiere機會,但它近期推出的「AI 語音辨識」讓我非常的失望!是的,有比較就會有傷害,此時我明白了,「選擇」適合的工具,比「努力」深入了解更重要🤣。 這幾年,踏入設計教學中,有越來越多人使用Canva美編排版,因為它有提供多樣的版型,便於使用者可直接套用,輕鬆解決不會美化版面的困擾,深受初學者的喜愛。 那...你想喔!Canva已可以解決基礎的圖文美編了,除非需要再執行更專業客製的設計,illustrator才會派上用場,否則對新手來說,一開始接觸非親民的Adobe軟體時,肯定會滿頭問號到懷疑人生🥲。 好吧!其實這篇文,是要抱怨Adobe的。 我可以理解,購買方案改成「訂閱制」,是商業模式的策略之一,想要抓住使用者的心,也得不斷投入在版本升級的優化更新。只是我發現,Adobe增加越多的新功能,我感受到的是一堆更複雜的介面和工具,讓人不知該從何著手,更無感於提升工作的效率。 沒錯,Adobe加入了一些AI的工具,如:Photoshop「生成式填色」、illustrator「AI向量生成器」、「Retype自動辨識字型」…可是,卻忽略了直覺使用的初衷,唉!原本的簡單變那麼複雜,又沒有執行斷捨離的精神,我很為它擔憂🥲。 最夯的UIUX,意指“使用者介面與使用者體驗”,本為使用者設計為出發點,這才是對症下藥的核心,所以你看!為什麼大家都拋棄Adobe XD,反而是使用Figma。 我們活生生感受到科技帶來的改變,然而不變的是👉符合人性之所需。 對呀!那你覺得呢?
阿萍仔・設計診聊室|甘苦談交流區🥹

戰國策虛擬主機 vs WordPress.com:台灣企業選哪個更划算?完整比較評測

在架設 WordPress 網站的時候,很多台灣企業主面臨的第一個選擇就是:到底要用 WordPress.com 的託管服務,還是自己租用虛擬主機?這兩條路看起來都可以行,但走到後面的結果卻截然不同。本文將深度比較 WordPress.com 與戰國策虛擬主機,幫助你在一開始就做出對的選擇。 WordPress.com 是什麼? WordPress.com 是由 Automattic 公司運營的託管式 WordPress 服務平台。它的最大賣點是「零技術門檻」——你不需要懂伺服器,不需要懂主機設定,只要註冊帳號,幾分鐘就能有一個可以運作的網站。 這對於想快速上線、完全沒有技術背景的個人用戶來說,確實是一個吸引人的選項。但問題也從這裡開始。 WordPress.com 的五大限制 第一個限制:功能被嚴格管控。WordPress.com 的核心限制在於,免費方案和低階付費方案幾乎無法安裝第三方外掛(Plugin)。而 WordPress 生態系之所以強大,正是因為有超過 60,000 個外掛可以自由使用。如果你的網站需要進階 SEO 工具、電商功能、預約系統或任何客製化的功能,在 WordPress.com 的低階方案裡,你完全做不到。 第二個限制:無法自訂主題。雖然 WordPress.com 提供了一些主題選擇,但自訂的空間非常有限,特別是在低階方案中。你的網站長什麼樣,很大程度上是被平台框住的,而不是真正屬於你的設計。 第三個限制:費用隨功能需求快速攀升。WordPress.com 的免費方案雖然存在,但功能如此受限,實際上幾乎沒有商業用途。一旦你需要使用外掛、自訂網域、移除 WordPress 廣告,費用就開始往上疊,而且每個進階功能往往需要升級到更高的方案。 第四個限制:資料不完全屬於你。在 WordPress.com 的平台上,你的網站資料存放在他們的伺服器上,而且平台有權在你違反服務條款的情況下終止你的帳號。雖然這種情況不常見,但對企業來說,資料主權的問題值得認真考慮。 第五個限制:SEO 彈性受限。對於認真在做 SEO 的企業來說,WordPress.com 的限制更加明顯。你無法自由安裝 Yoast SEO 或 RankMath 等主流 SEO 外掛,無法完整控制技術 SEO 的各個細節,這對於把網站流量當成核心行銷策略的企業是一個嚴重的短板。 戰國策虛擬主機的核心優勢 相較於 WordPress.com 的種種框架,戰國策虛擬主機提供的是一個完全開放、完全可控的主機環境,讓你安裝真正的 WordPress.org 版本,而不是受限的 WordPress.com。 完整的 WordPress 生態系使用權。在戰國策虛擬主機上,你可以自由安裝任何 WordPress 外掛和主題,沒有任何功能限制。無論是 WooCommerce 電商、Elementor 頁面編輯器、進階 SEO 工具,還是任何客製化的功能需求,都可以完整實現。 專為台灣市場優化的伺服器配置。伺服器位置和網路連線品質,對台灣用戶的網站載入速度有直接影響。戰國策在台灣有完善的伺服器基礎建設,讓你的台灣訪客可以享受更快的網站載入速度,這對 SEO 表現和用戶體驗都有顯著的正面影響。 中文客服與本地化支援。這是很多企業主在使用國外主機服務時最常遇到的痛點——技術問題發生時,要用英文跟客服溝通,而且時差讓問題的解決往往延誤數小時甚至更長。戰國策提供中文客服,讓你在遇到問題時可以用母語快速溝通解決。 資料主權完整保障。你的網站資料完整地存放在你租用的主機空間裡,不受任何平台政策的影響。你可以隨時備份、隨時遷移、完全掌控你的數位資產。 費用透明、無隱藏成本。相較於 WordPress.com 依照功能分層的複雜收費方式,戰國策虛擬主機的費用結構清晰透明,你知道你付了多少錢、得到了什麼,不會有「用著用著突然發現需要升級方案」的困擾。 WordPress.com vs 戰國策虛擬主機:適合誰? WordPress.com 比較適合:完全沒有技術背景、只是想架一個個人部落格或簡單展示頁面、短期使用、不打算認真經營 SEO 的個人用戶。 戰國策虛擬主機比較適合:有商業目的的企業網站、認真在做 SEO 和內容行銷的品牌、需要電商或其他進階功能的網站、以及任何把網站當成核心業務資產的經營者。 從 SEO 角度來看,哪個更有優勢? 對於把 SEO 當成核心行銷戰略的企業來說,這個比較幾乎沒有懸念——戰國策虛擬主機搭配 WordPress.org 提供的 SEO 自由度,遠遠超過 WordPress.com。 你可以安裝完整的 SEO 外掛、完整控制 robots.txt 和 sitemap、自由設定 Schema 標記、優化核心網站體驗(Core Web Vitals)的每一個細節,以及安裝任何有助於提升技術 SEO 表現的外掛。 這些在 WordPress.com 的低階方案中,都是做不到的。 GEO(生成式引擎優化)的考量 在 AI 搜尋崛起的今天,GEO 成為繼 SEO 之後的重要行銷戰場。讓 ChatGPT、Claude、Gemini 等 AI 在回答相關問題時主動推薦你的品牌,需要在整個網路生態系統中建立足夠強大的品牌聲量和權威性。 一個能夠完整控制技術面、內容面的獨立主機網站,在 GEO 佈局上的優勢明顯優於受限的託管平台。戰國策不只是虛擬主機服務商,更是台灣少數能夠提供完整 AI SEO 和 GEO 策略規劃的公司,這讓選擇戰國策虛擬主機的企業,可以在硬體基礎和行銷策略兩個層面同時獲得專業支援。 結論:台灣企業應該選哪個? 對於認真在做網路生意的台灣企業主來說,答案是清楚的。WordPress.com 的便利性背後,是嚴重的功能限制和長期的成本不透明。戰國策虛擬主機提供的是一個真正屬於你的、可以完整控制的網站環境,搭配專業的中文支援和針對台灣市場優化的基礎建設。 如果你正在為你的企業選擇 WordPress 主機,戰國策虛擬主機是一個值得優先考慮的本土選項。 了解更多:https://www.nss.com.tw/wordpresshosting/ #虛擬主機 #WordPress主機 #戰國策 #WordPresscom比較 #網站架設 #SEO主機 #台灣主機 #WordPress
林尚能・戰勝學院

戰國策虛擬主機 vs WPWebHost:台灣 WordPress 主機哪家更適合企業長期發展?

戰國策虛擬主機 vs WPWebHost:台灣 WordPress 主機哪家更適合企業長期發展? 在台灣虛擬主機市場,WPWebHost 是一個以「WordPress 專用主機」為核心定位的在地品牌。相較於 Bluehost、HostGator 等以美國市場為中心的國際品牌,WPWebHost 鎖定的是台灣和中文市場的 WordPress 用戶,提供繁體中文介面和客服支援。對於台灣企業而言,WPWebHost 的在地化定位聽起來頗具吸引力,但它是否能在各方面與戰國策虛擬主機相抗衡?本文進行深入的全方位比較,幫助台灣企業主做出最適合的選擇。 WPWebHost 的定位與主要特色 WPWebHost(網頁人虛擬主機)是一個以台灣為主要市場的中文 WordPress 主機服務商,以「WordPress 優化主機」為核心賣點,提供繁體中文客服和管理介面,讓台灣用戶能夠以熟悉的語言管理主機服務。 WPWebHost 的主要特色包括:針對 WordPress 優化的伺服器環境、繁體中文客服支援、台灣用戶熟悉的本地化操作體驗,以及相對親民的定價結構。對於第一次架設 WordPress 網站、希望能夠以繁體中文獲得支援的台灣個人站長而言,WPWebHost 提供了一個門檻相對較低的入門選項。 然而,在提供繁體中文服務這個共同點之外,WPWebHost 與戰國策虛擬主機在技術深度、服務整合範疇和 AI 時代的競爭策略上,存在顯著的差異。 WPWebHost 的五大限制與挑戰 第一,技術支援深度與專業服務有限。WPWebHost 雖然提供繁體中文客服,但在技術支援的深度和廣度方面,與以技術顧問服務為核心的戰國策相比,仍有一定差距。當台灣企業遭遇複雜的 WordPress 技術問題、SEO 技術診斷需求或進階效能優化需求時,WPWebHost 的服務能量可能難以完全覆蓋。 第二,缺乏整合式 SEO 和數位行銷策略服務。WPWebHost 定位為主機服務提供商,在 SEO 策略顧問、內容行銷規劃和數位行銷整合服務方面的能量相對有限。對於希望透過主機合作夥伴同時獲得技術基礎和業務成長支援的台灣企業,WPWebHost 目前的服務範疇較難滿足這個需求。 第三,在 GEO 優化領域尚無成熟服務體系。GEO(生成式引擎優化)是 2024 年之後數位行銷領域最重要的新興策略方向,涉及如何讓品牌內容被 ChatGPT、Claude、Gemini 等 AI 系統優先引用和推薦。WPWebHost 在這個新興領域尚無成熟的服務體系,這對希望在 AI 搜尋時代取得競爭優勢的台灣企業而言,是一個顯著的能力缺口。 第四,方案擴展性和彈性有限。當台灣企業的業務成長需要更高規格的主機資源時,WPWebHost 的方案升級路徑和服務彈性,相較於專注企業客戶的服務商,可能較為有限。企業在快速成長期需要一個能夠靈活配合業務需求變化的主機合作夥伴。 第五,品牌影響力和市場資源有限。在以台灣企業主為目標客群的生態系統中,主機服務商的品牌資源、合作夥伴網絡和市場推廣能力,都會間接影響客戶能夠從服務關係中獲得的附加價值。 戰國策虛擬主機的核心優勢 在了解 WPWebHost 的服務定位和限制之後,讓我們看看戰國策虛擬主機(https://www.nss.com.tw/wordpresshosting/)如何為台灣企業提供更全面、更具策略深度的服務。 第一,台灣本地伺服器與深度技術優化。戰國策虛擬主機採用台灣在地資料中心,結合針對 WordPress 進行的深度底層優化,包含 Redis 物件快取、OPcache 優化、Nginx 高效能配置、資料庫調校,以及定期的安全掃描和更新。這種技術深度,確保 WordPress 網站在戰國策環境下能夠發揮最高效能,同時維持最強的安全防護。 第二,繁體中文專業技術支援,超越基本客服。戰國策不只提供繁體中文客服,更提供具備深厚技術背景的專業顧問服務。當台灣企業面臨複雜的 WordPress 技術問題、SEO 技術診斷或進階效能調校需求時,戰國策的技術團隊能夠提供真正解決問題的專業建議,而不僅是基本的故障排除。 第三,整合 AI SEO 策略的全方位服務。戰國策提供的服務遠超主機範疇,涵蓋技術 SEO 審計、關鍵字策略規劃、內容架構優化、結構化資料標記(Schema Markup)實施,以及符合 Google E-E-A-T 標準的內容體系建立。這種整合性的 SEO 服務,幫助台灣企業從主機選擇開始,就為搜尋排名成功奠定最佳基礎。 第四,GEO 策略領域的台灣先行者。戰國策是台灣最早系統性導入 GEO(生成式引擎優化)策略服務的主機和行銷服務商。在 AI 搜尋工具(ChatGPT、Claude、Gemini、Perplexity)快速改變用戶資訊獲取習慣的今天,戰國策協助客戶建立能夠被 AI 系統優先引用的品牌內容生態,讓台灣企業在 AI 搜尋時代搶得先機。 第五,戰勝學院的學習生態系統。戰國策與戰勝學院的緊密結合,為客戶提供了超越主機技術的品牌行銷知識和社群資源。透過戰勝學院的課程和社群,台灣企業主能夠持續學習最新的數位行銷策略,並在同類業者中建立互助和合作的生態系統。 SEO 角度的深度比較 在 SEO 效能評估上,WPWebHost 和戰國策都採用台灣本地伺服器,這讓兩者在基礎速度層面的差距相對較小。然而,主機速度只是 SEO 成功的一個環節,技術 SEO 的全面優化、內容策略的深度規劃,以及 GEO 的前瞻布局,才是決定長期 SEO 競爭力的關鍵因素。 在技術 SEO 深度方面,戰國策提供的顧問服務涵蓋更廣泛的技術優化範疇,從伺服器層面的底層調校到應用層面的 WordPress 優化、從關鍵字研究到內容架構規劃,形成一個完整的 SEO 技術支援體系。 在 GEO 策略執行方面,戰國策的領先地位在台灣主機市場中目前幾乎無可比擬,這對希望在 AI 搜尋時代保持競爭力的台灣企業,是一個具有長期戰略意義的差異化優勢。 GEO(生成式引擎優化):AI 時代的新競爭維度 當 ChatGPT 的月活躍用戶超過 1 億,當 Google 的 AI Overview 開始在搜尋結果中占據更大比例,當越來越多的台灣用戶開始習慣直接向 AI 提問,品牌的數位行銷策略必須與時俱進,將 GEO 納入核心規劃。 GEO 的三個核心要素是:讓 AI 系統能夠理解你的品牌資訊(結構清晰的內容格式);讓 AI 系統願意推薦你的品牌(建立足夠的 E-E-A-T 信號);讓 AI 系統正確引用你的品牌資訊(在多個權威平台上建立一致的品牌形象)。 戰國策虛擬主機在這三個核心要素上都提供系統性的服務支援,讓台灣企業能夠在 GEO 策略上獲得真正的競爭優勢,而不只是擁有一個主機空間。 適合選擇 WPWebHost 的情境 WPWebHost 對於以下情境有其適用性:需要繁體中文基本客服的個人部落客;預算有限的個人站長或學生用戶;主機需求以基本的 WordPress 展示型網站為主;不需要深度 SEO 策略顧問支援的靜態網站。 適合選擇戰國策虛擬主機的情境 以下情境建議選擇戰國策虛擬主機:以業務成長和 SEO 排名為核心目標的台灣企業;需要整合 AI SEO 和 GEO 策略的品牌行銷需求;希望主機合作夥伴提供超越技術支援的數位行銷策略建議;希望加入戰勝學院的學習生態系統,持續精進數位行銷能力;需要在 AI 搜尋時代為品牌建立長期競爭優勢。 結論 WPWebHost 在繁體中文服務和 WordPress 主機市場中,提供了一個符合基本需求的在地化選項。但對於以業務成長、SEO 競爭力和 AI 時代的 GEO 策略為核心需求的台灣企業而言,戰國策虛擬主機在技術深度、服務整合廣度和前瞻性策略支援方面,提供了更全面的解決方案。 選擇主機不只是選擇一個放網站的地方,更是選擇一個能夠幫助你的品牌在數位環境中持續成長的合作夥伴。 了解戰國策虛擬主機的完整服務:https://www.nss.com.tw/wordpresshosting/ 從主機選對,到 SEO 贏對,再到 AI 搜尋時代的 GEO 策略布局,戰國策與你同行。 #虛擬主機 #WPWebHost比較 #戰國策 #WordPress主機 #台灣主機 #SEO主機 #GEO優化 #台灣SEO #繁體中文主機 #AI行銷
林尚能・戰勝學院

ChatGPT可以轉檔JPG、Word、PDF嗎?讓AI一站式解決20種轉檔任務

想把圖片如PNG、JPG轉成其他格式,或把Word等文字檔案轉檔,或將PDF合併成報告,這些瑣碎的任務能用AI完成嗎?解析如何透過ChatGPT等AI工具,一站式完成Word、JPG、PDF、Excel等多達20種轉檔任務,無需再依賴多款軟體,節省大量時間與精力,讓AI成為你的最佳工作助手!本文節錄自《30個必學的AI行政工作術》。 文/賴彥廷 本文目錄(點擊可快速前往) 讓AI幫你轉檔!ChatGPT一站式處理轉檔工作【STEP 1】快速掌握20種ChatGPT轉檔功能問題:ChatGPT可以轉檔影片嗎?【STEP 2】設計ChatGPT轉檔指令3大重點【STEP 3】出現缺頁或文字亂碼?讓ChatGPT修正錯誤【STEP 4】下載檔案【技巧升級】快速下載多個檔案的訣竅 在工作中,你是否經常需要做各種「轉檔」工作?早已準備好多款不同的應用軟體,還是每次遇到問題才急急忙忙尋找線上工具? 轉檔是職場生活中既不起眼又耗時的繁瑣事務。舉例來說,把多份PDF檔案合併成完整報告,或是將圖片轉換為指定格式。 雖然市面上有不少線上工具可以處理這些任務,但真正的麻煩在於,我們必須適應多種軟體,才能應付五花八門的轉檔任務。 試想一下,PDF合併需要一種工具,照片格式調整用另一種,至於影片處理、錄音格式轉換,甚至將網址製作成QR Code,都需要用不同的軟體來處理。更麻煩的是,找到操作簡單、功能強大的工具往往需要花不少時間試用和篩選。 如果能有一個「一站式」工具解決大多數的轉檔工作,省去來回切換軟體的麻煩,那該有多好! 讓AI幫你轉檔!ChatGPT一站式處理轉檔工作 ChatGPT在文案寫作、圖像生成、程式碼撰寫等方面的表現令人津津樂道,但它還有一個較不為人知且相當實用的功能:「轉檔」。 ChatGPT轉換多種不同類型檔案格式的品質都很好,有了它幫忙,我們就不必在各種軟體之間疲於奔命了! 【STEP 1】快速掌握20種ChatGPT轉檔功能 轉檔工作雖然不起眼,卻幾乎無所不在。無論是將文件轉換成適當的格式備份,還是將數據轉為兼容格式以供特定軟體處理。 此外,檔案的分割與合併也是常見的行政工作。在這些瑣碎繁雜的工作項目上,ChatGPT能幫上忙的地方比我們想像中更多。 以下列出7大類、超過20種轉檔相關的任務情境,每一項ChatGPT都能迅速完善地交付成果。 ChatGPT轉檔轉檔任務情境文字檔案轉換● Word檔案(.docx、.doc)、純文字文件(.txt)以及Markdown文件(.md)相關的檔案格式轉換。數據資料檔案轉換● Excel 檔案(.xlsx、.xls)、CSV 檔案(.csv)、JSON格式以及XML格式相關的檔案類型轉換。圖片檔案轉換● JPG、PNG、BMP等圖片檔案的格式轉換。PDF檔案分割與合併● 依照特定頁數範圍分割。● 奇數頁偶數頁分別獨立存放。● 單獨提取特定頁數。● 將多份檔案合併為一份。音訊檔案轉換、分割與合併● 不同音訊檔案(.mp3、.wav、.flac)的格式轉換。● 將一份音檔按照指定的時間區段,分割為幾個獨立的檔案。● 合併多份音檔。影片檔案分割與合併● 將影片檔案(.mp4、.avi、.mov、.mkv)按照指定的時間區段,分割為數個小片段。● 按照指定的檔案大小分割。● 將多段影片拼接成一個完整的影片。其他實用功能● 將彩色圖片轉換為灰階。● 圖片尺寸縮放。● 在圖片上套用簡單的濾鏡效果,比如復古風格或是負片效果。● 在圖片上的特定位置添加浮水印或是時間戳記。● 根據指定的排列方式,將多個圖片合併為一張圖。● 壓縮圖片以降低檔案大小。● 將網址製作成QR Code。 問題:ChatGPT可以轉檔影片嗎? 看完以上五花八門的功能或許有人會好奇:ChatGPT可以圖片轉檔,音樂轉檔,但是沒辦法將影片轉檔嗎? 答案是可以,但是失敗率高,限制也多。 原因在於影片的檔案容量通常比較大,轉換過程更為複雜又耗時,在處理中常常因為時間限制或網路不穩定,導致轉檔中斷而失敗。 根據經驗,目前ChatGPT只適合處理容量小、時間短的影片轉檔工作(分割與合併功能則不在此限),但相信AI科技一日千里,未來用ChatGPT處理幾小時長的影片不會是夢。 介紹完ChatGPT擅長的轉檔工作之後,接著就要設計指令囉! 【STEP 2】設計ChatGPT轉檔指令3大重點 工作上轉檔有很多情況,對ChatGPT下的指令也會各不相同。整體來說,轉檔指令可以簡化為3個重點:「輸入什麼、設定條件、輸出什麼」。 以切分一個PDF檔案為例。 輸入什麼:這份PDF檔案。 設定條件:照著1-5頁、6-10頁、10-15頁的順序分割。 輸出什麼:3份檔案。 將這3個重點整合成一段話就是:「請將這份PDF檔案依照1-5頁、6-10頁、10-15頁的順序,分割為3份獨立的檔案。」 透過這樣的方式,我們就能快速將工作需求轉為ChatGPT可以理解的指令,不必多費心力來思考指令該怎麼寫。 值得一提的是,如果要同時處理多份檔案,例如合併好幾份PDF文件,該如何告訴ChatGPT誰在前、誰在後呢? 這裡有個實用小技巧:「將每個檔案的名稱改為數字」,就能直接用數字檔名告訴ChatGPT排列順序囉! 【STEP 3】出現缺頁或文字亂碼?讓ChatGPT修正錯誤 如果發現轉檔後的檔案出現缺頁或是文字亂碼等錯誤,只要請ChatGPT重新處理一次即可排除問題。 舉例來說,近期ChatGPT處理JSON與XML兩種資料格式時,比較容易出現中文字亂碼。這時候我們可以輸入指令:「請修正這份檔案的中文編碼問題,並確保所有資料按照正確的格式顯示」,ChatGPT就會自動修正錯誤。 【STEP 4】下載檔案 轉檔完成後,點擊ChatGPT提供的下載連結,就能儲存檔案。 唯一要注意的是,下載連結有時效性,最好立刻將檔案儲存到自己的電腦。連結若是逾期失效,轉檔成果都會付諸流水! 【技巧升級】快速下載多個檔案的訣竅 當我們連續處理了好幾個轉檔,ChatGPT生成許多不同的下載連結,如果想簡化下載步驟,我們可以告訴ChatGPT:「將所有成果打包成壓縮檔」,就不需要手動下載多個檔案,省了許多麻煩。 節錄自:商周出版《30個必學的AI行政工作術:搞定會議、行程、簡報、文書、圖表、影音、資料庫,事半功倍,準時下班!》/賴彥廷 著 更多【AI工作術】推薦給你: 4步驟學會運用AI關鍵能力!16種AI工具應用解析|行銷策略指令範例 用AI快速寫Email!ChatGPT Writer、Copilot等中英文電子郵件生成 ChatGPT一鍵生成簡報!Slides Maker讓AI幫你快速做完整簡報 會議紀錄用AI怎麼做?會議逐字稿如何整理?|AI語音轉逐字稿教學 用ChatGPT準備面試練習!AI履歷撰寫和模擬面試必學指令
【104職場力】・AI

網站上的「按鈕」都一樣?用鍵盤驗收連結與動作

網站上的方框看起來都像按鈕,有的卻是前往另一頁,有的是展開視窗,有的是送出資料。只用滑鼠點得動,還不足以判斷做法正確。今天只練一件事:先分清楚「導覽」與「動作」,再用鍵盤留下可重做的驗收紀錄。 適合自己製作網站、使用 AI 產生頁面,或需要驗收外包成果的個人、工作室與中小企業。準備桌面瀏覽器、鍵盤與可編輯的本機練習頁或測試站;不需要付費工具,也不要直接拿正式付款、刪除或寄信功能練習。 【先寫行為,再選元件】 W3C 的連結模式用來參照資源,目標可以在同頁,也可以是其他頁面;按鈕模式則觸發動作,例如開啟對話框。連結通常以 Enter 啟動;按鈕取得焦點後,Enter 與空白鍵都應能啟動。外觀可以設計,行為仍要符合用途。 虛構教材有兩個控制項:「閱讀練習說明」前往另一份文件,「增加練習次數」只把目前頁面的數字加一。前者使用帶 href 的原生 a 元素,後者使用原生 button,並設定 type="button"。這不是客戶網站,也沒有真實表單送出。 【照四步做】 1. 寫兩列規格:「文字/用途/預期結果」。第一列是閱讀說明/導覽/打開目標文件;第二列是增加次數/動作/數字加一且留在目前頁。先別用顏色、圓角或是否有底線決定種類,也不要只寫「點了有反應」。 2. 在測試頁建立這兩個元件。可交給既有網站編輯器或 AI 工具處理,要求保留原生元素:連結必須有真正的目的網址,增加次數則綁定加一的動作。請不要把整個功能只做成有點擊事件的普通文字區塊,再以外觀冒充完整操作。 3. 重新載入練習頁,從頁面起點按 Tab,確認焦點能到「閱讀練習說明」,而且看得見焦點位置;按 Enter,記錄最後網址與目標頁標題。確認這是預定文件,而非空白頁、錯誤頁或只是滑鼠樣式改變。若測試站有額外導覽,Tab 次數可能不同,以實際焦點為準。 4. 回到練習頁並重新載入,把計數歸零。用 Tab 到「增加練習次數」,按一次 Enter,確認顯示 1;再按一次空白鍵,確認顯示 2。記錄是否仍在原頁、焦點是否可見、有沒有意外送出表單。每次按鍵只應觸發一次,不能跳成 2、4 後還寫通過。 【今天實際做了什麼】 2026/10/30,我建立兩份本機 HTML 文件,在本機伺服器與 Chrome 操作:Tab 能到連結,Enter 打開 target.html,頁面標題為「練習說明」;重新載入首頁後,Tab 能到按鈕,Enter 後計數為 1,空白鍵後為 2。練習檔與操作結果已保存。 這只證明這份本機範例的上述行為,沒有測正式網站、手機、不同瀏覽器、螢幕閱讀器或完整無障礙符合性,也沒有測表單收件。不要把本機通過寫成「全站已驗收」或「獲得認證」。 【交付與驗收】 交一張兩列紀錄表,填上測試日期、頁面、控制項文字、預期行為、按鍵、實際結果與待修問題。連結的成果是到達正確資源;按鈕的成果是預定動作完成。只看文字變色、游標變手指或一張成功截圖,都不能取代這兩個結果。 若你不會編輯 HTML,可以在自己的測試站找一個導覽連結與一個無破壞性的動作,照上述步驟記錄;找不到計數器就改寫成該動作的具體成果,不冒稱做過本機教材。沒有測試權限的欄位,填「未測」。 【常見錯誤與限制】 第一是用空連結假裝動作;有網址外觀,仍要檢查實際用途。第二是加 role="button" 就以為已完成:角色宣告不會自動補齊自製元件的焦點與鍵盤行為,能用原生元件時先用原生元件。第三是忘了按鈕位於表單時可能觸發提交;不負責提交的按鈕應明定 type="button",再測實際行為。 也別把連結按空白鍵沒有開啟,直接判為故障;本題連結驗收用 Enter。鍵盤走查與滑鼠走查要分開記,任何一輪未完成都保留未測。 本機教材可零額外工具費完成;網站編輯器、主機與 AI 工具的方案及額度另計,碰到限制就記未完成,不需為這次練習購買額度。今天的作業是替自己的一頁選兩個控制項,先判用途再實際走一次,交出兩列可核對的紀錄。 來源(2026-10-30 查核): https://www.w3.org/WAI/ARIA/apg/patterns/button/ https://www.w3.org/WAI/ARIA/apg/patterns/link/ 整理/配圖:客脈 AI。配圖為 AI 示意圖,非真實網站或認證。
Rayda・客脈 AI 實作筆記

一頁式網站是什麼?一頁式網頁設計優缺點與費用解析

很多人的第一個網站是被一則廣告逼出來的。點進一個連結,畫面一路往下滑,商品或方案從頭講到尾,滑到底的時候旁邊跳出填寫框,人就順手把手機號碼留了下來。整個過程沒有換過頁面,也沒有點過任何選單。這種把一件事從頭講到尾的頁面,就是一頁式網站(One Page Website),也有人說一頁式網頁、單頁網站。 它聽起來像一句行銷話術,其實是很樸素的工具:把該說的資訊排成一條動線,讓人不用自己找路。下面把一頁式網站能做的事、不能做的事,以及我們實際做過的幾種型態講清楚,幫你在決定花錢之前,先想明白自己到底需不需要。 一、一頁式網站是什麼 一頁式網站的全部內容都在同一個網址裡。首頁上方有主視覺和一句主打的話,往下依序排服務介紹、案例、價格、常見問題,最後放聯絡表單。頁面頂端通常會留一個選單,點了不會跳到別的頁面,而是往下滑到這一段。這種跳法叫錨點跳轉,是長頁能讀得下去的前提。 和多頁式網站比起來,差別在資訊的位置。多頁式網站把公司介紹放在「關於我們」,產品放在「產品專區」,案例放在「案例分享」,訪客要自己點進去找;一頁式網站把這些東西排在一起,順序由你決定。訪客的差別是,前者要做出選擇,後者只要一直滑。 順帶講一個常被混用的名詞。Landing Page(著陸頁)講的是位置,也就是「訪客從廣告點進來後抵達的那一頁」;一頁式網站講的是形式,也就是「這頁總共只有一頁」。位置和形式是兩件事,一頁式網站可以當著陸頁用,你官網裡的某一個服務頁也可能是著陸頁,只是它不是單頁。 同場加映:月光創意另寫了一篇一頁式網站與 Landing Page 中文意思的完整版文章:https://www.moon-d.com/blog/one-page-website.php 一頁式網頁設計這幾個字在業界被使用得很寬鬆,實際上做的事情差很多。有的是把公司現有的簡介貼成一頁,動一下滑就到底;有的是花時間重新安排內容節奏、處理視覺階層、把表單和追蹤都接好。兩者外觀看起來都像一頁式網站,做出來能不能用,是兩回事。 二、你到底該不該做一頁式網站 在動工之前,先回答五個問題,問完大概就有答案了。 第一,你的網站要回答的問題是不是只有一個?「我們做什麼、為什麼值得信、要怎麼找我」,三句話講完就沒了,適合一頁式。如果對方會問到你沒做的部分,例如各項方案的差異、服務據點、維修收費、多年案例,那就需要多頁式。 第二,商品或服務的數量是不是收斂的?一個課程、一檔新商品、一次促銷、一項專業服務,都是好例子。整間公司二十條產品線擺進一頁,會變成一張沒人想讀的清單。 第三,你的流量從哪裡來?如果主要靠 Google 自然搜尋,建議直接跳過這個選項,理由下一節會說明。如果是投廣告、發社群、寄電子報、印在名片或 DM 上讓人掃碼,流量來源集中在一兩個地方,一頁式非常合用。 第四,內容會不會一直長下去?每月都要新增文章或案例的網站,單頁結構會很快撐不住。反過來,內容穩定、期數固定的頁面,用一頁式最省事。 第五,你要訪客做的動作是同一件事嗎?「填表預約」是,「填表之後還要選加購、加入會員、下載應用程式」就不是。一頁式的力量來自專心,如果頁面上同時有六個按鈕要人選,等於把難度還給了訪客。 五個問題裡,只要「要做 SEO」或「服務項目很多」任一成立,就該認真考慮多頁式。其餘都偏向可以使用一頁式網站。 三、一頁式網站的好處 動線短,是最實在的一項。訪客從點進來到按下送出,中間沒有換頁、沒有開新視窗、沒有回到上一頁找路。每多一個跳出點,就多一次放棄的機會,尤其是手機上。表單放在頁尾,不代表它一定被填,但它至少在視線內。 手機閱讀友善是另一個好處。現在多數人上網的動作就是滑,滑這個動作不需要學習,也不需要等頁面載入。一頁式網站的節奏本來就適合手機,設計時把手機版當主版本就好,不會出現「桌機版很好看,手機版擠成一團」的窘況。 製作快,後續修改也單純。頁面只有一個,東西要改就是改那一處,不會出現「首頁改了,內頁沒改」的情況。對只有一兩個人要維護的團隊來說,這點很實際。 還有一個比較少被講的好處:訊息會被迫一致。當你只有一個頁面可以放內容,產品文案、服務說明和價格就不容易各說各話。資訊一集中,矛盾的地方反而會自己浮出來。 四、缺點,以及最常見的三個誤區 第一個誤區是「一頁式網站也能做 SEO」。實情是它先天吃虧。所有主題共用一個網址,等於只有一個標題、一組網頁描述可以寫。你想同時被「XX 室內設計」「XX 維修」「新北 裝修推薦」找到,需要的是多個頁面各自對應一個搜尋意圖,單一長頁做不到。這不代表一頁式網站完全不會被搜尋到,而是它很難成為自然流量的主力。若網站存在的目的就是讓不認識你的人從 Google 找到你,請把預算留給多頁式。 第二個誤區是「只有一頁,所以便宜」。頁面數量不等於工作量。訪談、文案、圖片、影片授權、響應式適配、表單串接、追蹤設定、測試與上線,每一項都跟頁數無關,還常常是一頁式專案最花時間的部分。真正會讓報價拉開差距的,是這些工作有沒有被認真做。 第三個誤區是「看起來比較有規模」。這正好講反了。在金融、醫療、法律、上市上櫃這些產業,一頁式網站常被讀成小公司、沒制度、隨便做做。所以這類客戶通常會把一頁式網頁用在活動或產品募資上,正式的企業形象還是做多頁式官網。 還有幾個實際限制要知道。所有東西共用一個網址,之後想分析「哪一段的訪客最多、哪一段開始離開」,資料會比較難拆解。滑完就走的人很多,又沒有其他頁面可以逛,跳出率看起來會偏高,拿它跟多頁式官網直接相比沒有意義。頁面拉得太長也會有後果:圖片太多會拖慢載入,區塊順序亂會讓人滑到一半就放棄。一頁式能塞多少字,最後是由訪客的耐心決定,跟版面空間無關。 五、我們做過的三種一頁式網站 講完道理,換三個我們真的做過的案子,差別會比較清楚。 第一個是金融投信推出的黃金礦業 ETF 募集頁。這種頁面要在很短的時間內讓投資人相信這檔標的值得研究,所以視覺走黑金路線:深色岩質底襯出金色的光澤,標的代碼用大字級的金屬質感字型放在第一眼的位置,資訊則用比較克制的排版往下列。重點不在裝飾,而在於把「這是什麼」和「我要做什麼」分開處理。頁面右側做了懸浮的快捷工具列,申購單與銷售機構的入口一直掛在畫面上,訪客不論滑到哪一段都能立刻行動,不必回頭找。 第二個是電商通路品牌的活動頁,背景是一整檔檔的促銷套組。這種頁面最怕滑到底還是不知道要買哪一組,所以節奏比資訊更重要。做法上,讓背景的雲朵與愛心有呼吸感的微動態,商品和「立即購買」按鈕在滑入時做漸顯與微幅放大,讓「點這裡」的手感成立;影片與底部按鈕的切換也刻意調過節奏,避免看起來像被塞進去的廣告。這種頁面沒有太多字,設計的任務就是讓手指繼續往下滑。 第三個是醫療健檢中心的一頁式官網。這個型態真正的難題是信任,視覺只是外層。健檢是低頻、高單價、又牽涉身體的消費,訪客在意的是項目內容、檢查流程、院所環境、醫師陣容與預約方式。這頁的排法是照著看診的順序走:健檢項目與差別、流程說明、環境照片、醫師介紹、費用與預約入口。資訊夠完整,信任感才有地方生出來;這也是為什麼它不能只做漂亮,內容深度得跟上一頁。 三個案子擺在一起,同一種形式的側重點可以差很多。募集頁要的是權威感與行動捷徑,活動頁要的是節奏與衝動,官網要的是資訊完整與可信度。動工前先決定這一頁要說服誰,設計才有依據。 六、從想法到上線的流程 第一步,寫出一句話說明這頁要對誰說什麼。如果這一句話需要三個不同的受眾、五項服務和四種行動才能講完,問題不在頁面太短,在於任務還沒拆開。 第二步,排區塊順序。順序要照訪客的疑問走,不照公司的組織圖。訪客通常先問「這是什麼」,再問「跟你競爭的有什麼不同」,然後才問「要多少錢」「怎麼找你」。誰先誰後要想清楚。 第三步,備素材。文字、照片、影片、標誌、價格與常見問題,缺一項就會在製作階段卡住。照片建議一次備齊同尺寸,影片要先確認長度與比例。這一步沒做,後面會一直等。 第四步,決定誰做。這是整個流程裡最關鍵的一個決定,下一節會講。 第五步,驗收,而且用手機驗。檢查項目不多:首屏的主張和按鈕有沒有被蓋住、表單能不能真的收到、頁面在慢速網路下會不會卡、每張圖片有沒有替代文字、按鈕點下去有沒有被記錄。這五項沒過,不要上線。 七、自己做,還是找人做 誠實講,一頁式網站確實有免費工具能用。個人作品集、履歷、單一課程的招生頁、一次性的活動,這些用現成平台或自己動手做得又快又省錢,這點不用否定。 撐不住的情況是另一種:頁面要自己長期更新、要在上面賣東西、要能被 Google 找到、要代表一家有規模的公司、還要在手機上又快又穩。這種情況自己做的成本通常比想像中高,因為時間會卡在你根本不熟的地方,美化反而不是瓶頸。 我們(月光創意網頁設計)做的是後半段:客製化的一頁式網頁設計、響應式適配、把內容節奏重新排過、表單與系統串接、追蹤設定,以及最重要的——上線之後還可以繼續幫你改內容、追蹤數據並調整。這種頁面最好在規劃階段就把後續維護一起談掉,因為一頁式網站的內容要更新,沒有後台可以靠就會變成一份靜態文件。 八、常見問題 一頁式網站等於著陸頁嗎? 不對等。著陸頁描述的是訪客從哪裡進來,一頁式網站描述的是頁面有幾頁。前者可以有多頁,後者只有一頁。 一頁式網站能放多少商品? 沒有固定數字,判準是「滑到底還願不願意讀」。實務上把十來件、差異明確的商品放在一頁是讀得完的,數量再往上,建議改用多頁式加上分類。 做一頁式網站還需要做響應式嗎? 需要,而且建議直接以手機版為主版本再放大到桌機。絕大多數訪客是拿手機進來的,先做桌機再等比例縮小,字級和間距會一直卡住。 之後想擴充成多頁式,可以嗎? 可以,但成本不等於把頁面切開。內容重新歸類、導覽重新設計、網址與標題重新規劃都要重做。所以如果本來就預計三年內會擴充,一開始就做多頁式比較省。 九、如果還在猶豫怎麼開始 一頁式網站能不能用,取決於你的內容能不能收斂成一條線。收斂得了,它是最省力的做法;收斂不了,多花時間做也只會得到一張很長的網頁。 如果你手上的素材很多,卻不確定該排成活動頁、募集頁還是一頁式官網,可以先看月光創意整理的「一頁式網站完整指南」: https://www.moon-d.com/blog/one-page-website.php 裡面把一頁式網站的定義、與 Landing Page(著陸頁)的差別、優缺點、設計原則、報價行情與免費平台比較整理成一頁,也放了可互動的範例,建議直接存起來。 歡迎直接帶著你的需求來聊,我們會先幫你確認這一頁該不該做成一頁式。 月光創意網頁設計:https://www.moon-d.com/
月光創意・月光創意網頁設計

用Codex操作Chrome瀏覽器,自動讀Gmail、寫Google Sheet教學!設「3層護欄」防AI亂點亂寄

想讓AI幫忙操作Chrome瀏覽器、讀Gmail、下載附件、寫進Google Sheet,又怕它亂點、亂寄信?作者以教師可能遇到的「自動批改作業信」為例,示範用Codex Chrome Extension設定白名單、二次確認與留痕log三層護欄,再一步步放手讓AI操作瀏覽器。本文節錄自《ChatGPT × Codex全攻略》。 文/曾慶良(阿亮老師) 本文目錄(點擊可快速前往) 動手做前準備清單全章流程地圖:4步由小到大動手實作:讓Codex操作你的Google Chrome動手操作3大禁區 編按:作者以「老師自動批改學生作業信」為範例,示範讓Codex讀取Gmail「作業繳交」標籤的來信、下載附件、產出評語,再逐列寫進Google Sheet。雖然示範情境在教學現場,但換個主題就能套用到職場,例如整理應徵者的履歷信、客戶詢價信或活動報名回覆;文中的白名單、二次確認、留痕log三層護欄,也適用於任何讓AI代操瀏覽器的工作。※本文以「Chrome Extension」模式操作,是由Codex直接在你的Chrome「已登入」的Gmail等分頁操作,不必處理OAuth、API token(這些憑證都不用辦),看得到它在做什麼。 動手做前準備清單 項目規格沒有怎麼辦Codex CLI + 桌面App已完成、能登入補安裝,Codex CLI 、桌面AppChrome Extension從Codex App Plugins內裝補安裝,Chrome extensionGmail帳號有「作業繳交」標籤、收得到信Gmail內建立一個Label「作業繳交」Google Sheet一張空白工作表,欄位先排好Drive內新建一張,命名「本學期_作業批改」 Google Sheet欄位先排好 第一列填入這6個欄位(順序很重要,等下Skill要按這個順序寫入): ABCDEF批改日期學生姓名作業主題AI評語字數建議評分 權限設「僅特定人員」或「限校內帳號(你的學校網域)可存取」,把你自己(和真的需要看的同事)逐一加進去。不必也不要用「擁有連結的任何人可檢視」,Codex用你登入的身分操作,本來就進得去,不需要開公開連結。 此表含學生個資(姓名+評語),絕對不可以用「擁有連結的任何人可檢視/可編輯」公開連結分享。公開連結等於把全班個資丟到網路上任人抓取。務必設成「僅特定人員」或「限校內帳號」,並定期到「共用」設定檢查存取名單有沒有跑進不該有的人。 【補充】企業導入前置(用公司信箱、下載含個資附件前必看) 本章讓Codex操作你「已登入」的信箱、下載附件、寫進Sheet,放在公司環境要先過3關,別自己一個人默默開跑: 公司信箱須經IT /資安核准:使用Codex Extension操作公司Gmail / Workspace前,先問過IT或資安窗口,確認符合公司對第三方工具存取信箱的規範,否則別用個人身分擅自授權公司帳號。 先用測試帳號跑通:第一輪用一個測試信箱+假資料把流程走順,確認護欄有效,再碰真實信箱。 附件含個資要確認合法性、用完清除:下載的.docx /客戶附件若含個資,先確認你有處理的合法依據(同意/業務必要),處理完就從~/Downloads/inbox-essays/之類暫存夾刪除,別長期堆在本機或同步到公開雲端夾。 全章流程地圖:4步由小到大 1 授權與護欄 Chrome Extension 範圍限定 + 二次確認 ↓ 2 寫 Skill auto-email-processor 四階段定義 ↓ 3 跑 1 封測試 盯著看,確認沒亂點 ↓ 4 放開跑全部 批次處理 + 失敗重試 + 總結報告 絕不可跳過步驟3,跑1封測試看看,這是整章最關鍵的安全閘門。沒看過第1封就放執行,等同把你的Gmail鑰匙交給陌生人。 動手實作:讓Codex操作你的Google Chrome 步驟1-A 授權與三層護欄 確認Codex桌面App已開啟、已登入 確認Chrome已裝Codex Extension Chrome右上工具列點Codex圖示 看到「Chrome plugin connected」狀態 = 正常 Codex桌面App內的Plugins區也顯示「Chrome plugin connected」,兩邊都看得到 = OK Codex從這裡開始就有能力「在你登入的Chrome內」做事。所以下一步馬上設範圍限制,沒設好就不要往下做。 步驟1-B 護欄1:範圍限定(白名單) Codex Extension預設「進入新網站會問」。但更穩的做法是明確設一份白名單。在Codex對話開頭就先宣告: 本對話只允許操作 mail.google.com、docs.google.com、sheets.google.com。 任何其他網域請拒絕並回報給我。 明確列出允許與禁止的清單: # 允許 Codex 操作的網域白名單 mail.google.com # Gmail docs.google.com # Google Sheet / Docs sheets.google.com # Google Sheet(舊網域別名) # 禁止:其它一律不行 ✗ bank.example.com # 銀行 ✗ pay.example.com # 支付 ✗ facebook.com / x.com # 社群媒體 這是用文字下的範圍限制,搭配Extension預設的「進新網站問一次」雙重防護。 步驟1-C 護欄2:二次確認 在Codex對話開頭就先指定下面五類動作必須先暫停問你,得到「OK」才能繼續: 刪除任何信件 → 必須問 寄出任何信件 → 必須問 移動信件到垃圾桶 → 必須問 修改Sheet既有列(非新增)→ 必須問 修改Gmail filter / forwarding設定 → 必須問 「標記為已讀」、「加標籤」、「下載附件到自己電腦」、「在Sheet新增一列」這幾項算可逆操作,不需要每次都問。 步驟1-D 護欄3:留痕log 叫Codex把它做的每一步寫成log,方便事後抽查: 請建立一個 ~/codex-logs/email-processor.log 每次處理一封信,寫一行 JSON: {"ts":"2026-05-17T10:00:00Z","subject":"...","sender":"...","action":"已批改寫入Sheet","ok":true} 失敗時 ok:false,多寫 reason 欄位。 請在每次跑完 Skill 後自動 append。 跑完一輪後,cat ~/codex-logs/email-processor.log(Windows PowerShell:Get-Content $HOME\codex-logs\email-processor.log)看得到N行JSON,每行對應一封信。 動手操作3大原則 範圍限定:只開放特定網域,其餘一律拒絕 二次確認:刪/寄/改既有資料必須先問 留痕:每次操作寫log,可事後追查 三個都做到了,才往下進步驟2寫Skill。 步驟2-A 寫auto-email-processor Skill macOS / Linux(或在Git Bash執行): mkdir -p ~/.agents/skills/auto-email-processor cd ~/.agents/skills/auto-email-processor touch SKILL.md Windows PowerShell寫法(同一件事的PowerShell寫法): New-Item -ItemType Directory -Force $HOME\.agents\skills\auto-email-processor Set-Location $HOME\.agents\skills\auto-email-processor if (-not (Test-Path SKILL.md)) { New-Item -ItemType File SKILL.md } 如果Windows使用者希望直接沿用Bash指令,可以在~/.agents/skills/的上層資料夾右鍵 → Open Git Bash Here,就能在Git Bash內原樣執行mkdir -p、touch。兩個方式擇一即可,不必兩邊都跑。 為什麼用Skill而不是直接打prompt?Skill寫一次、用很久。下次要批改只要說「跑auto-email-processor」,不必再貼整段流程描述。 2026新功能NEW:Record &amp; Replay(錄一次、重播多次) Skill有3種建立法: 手寫SKILL.md(本節做的) 對話中請Codex幫你生 Record &amp; Replay,你手動把一連串網頁操作(點「作業繳交」標籤 → 過濾未讀 → 下載.docx)錄製一遍,Codex會把它存成可重播的Skill。像Gmail這種步驟固定、重複性高的流程特別適合這種方式,錄完再回頭微調SKILL.md補上護欄。搭配always-allow(總是允許):把重播時重複跳出來的權限請求(例如每次都問「可以操作mail.google.com嗎」)設為「總是允許」,就不會一直被打斷,但只對白名單網域開always-allow,刪/寄/改既有資料這類敏感動作仍維持二次確認。 步驟2-B SKILL.md開頭:frontmatter與Scope SKILL.md一定要以YAML frontmatter開頭(name、description是必要欄位,觸發詞寫進description,Codex才會自動觸發): --- name: auto-email-processor description: 讀 Gmail「作業繳交」標籤內的未讀信,抓 .docx 附件,套 essay-feedback Skill 批改,寫回 Google Sheet「本學期_作業批改」。觸發詞:批次批改、處理交作業信、跑 email processor。 --- # auto-email-processor ## Scope - 允許網域:mail.google.com、docs.google.com、sheets.google.com - 禁止:其它任何網域 - 允許動作:讀信、下載附件、加標籤、Sheet 新增列 - 禁止動作:刪信、寄信、修改 Sheet 既有列 Skill的「身分證」段落,讓Codex知道「我可以做什麼、不能做什麼」。 步驟2-C 中段:四階段Steps ## Steps ### Phase 1 讀 1. 開新分頁到 https://mail.google.com 2. 點左側「作業繳交」標籤 3. 加「is:unread」過濾條件 4. 列出信件主旨與寄件者,不要點開 ### Phase 2 分(過濾) 對每封信,符合所有三條件才處理: - 寄件者是學生(你的學校網域,例:@school.edu.tw) - 主旨含「作業」或「homework」 - 有 .docx 附件 ### Phase 3 處(批改) 1. 下載 .docx 到 ~/Downloads/inbox-essays/ 2. 從寄件者名 / 主旨解析學生姓名與作業主題 3. 呼叫 essay-feedback Skill 批改 4. 把回傳的「評語/ 字數/ 評分」記下來 ### Phase 4 記 1. 開 Google Sheet「本學期_作業批改」 2. 新增一列:日期 / 姓名 / 主題 / 評語 / 字數 / 評分 3. 回 Gmail 標該信「已讀」+ 加「已批改」標籤 4. 寫一行 log 到 ~/codex-logs/email-processor.log 【補充】Phase 3那句「呼叫essay-feedback Skill」是哪來的? 這支批改Skill在「多檔案批次處理」篇建立過,該章resources/essay-feedback/有現成檔案,只要將其複製到~/.agents/skills/essay-feedback/就能被本章觸發。還沒建也能先跑通流程,把Phase 3第3步暫時換成這3行替代做法: 用Codex內建能力讀出.docx純文字內容 請Codex直接寫一段150字評語、估算字數、給A / B / C建議評分 把這三個值當成回傳結果往Phase 4傳(先能寫進Sheet,之後再換成正式的essay-feedback) 步驟2-D 末段:Rules護欄 ## Rules ### MUST(必須) - MUST 敏感操作前停下來問我(刪信、寄信、改既有列) - MUST 處理失敗的信維持「未讀」、加標籤「需人工處理」 - MUST 每處理一封寫 log - MUST 全程操作我這個帳號,不可切到別人的 Gmail ### NEVER(絕不) - NEVER 自動回信給學生 - NEVER 跨網域操作(白名單以外) - NEVER 刪除任何信件 - NEVER 修改 Sheet 既有列(只能 append) ## Tools - Codex Chrome Extension(Gmail / Sheet 操作) - Codex 內建 .docx 解析 - essay-feedback Skill(subagent 呼叫,來源見第三篇 CH19) Skill寫完存檔。Codex下次看到觸發詞會自動讀SKILL.md。 準備測試素材:先讓信箱有東西可讀 Skill寫好了,但如果「作業繳交」標籤裡一封信都沒有,步驟3的測試就沒東西可跑。動手前先花3分鐘,自己造1~2封測試信,讓自動化有真實素材可讀。這步驟做完,跑步驟3才有意義。 準備1~2份.docx測試檔:隨手開Word(或Google Docs →下載為.docx)打一段假作文,存成例如:測試作文_王小明.docx。想更真實就做兩份、換個學生名。 自己寄給自己:在Gmail點「撰寫」,收件者填你自己的Gmail,主旨故意帶關鍵字(例:第八單元作文 作業繳交 王小明,一定要含「作業」讓Phase 2過濾條件吃得到),把剛才的.docx當附件夾進去,寄出。寄1~2封。 建一個標籤:Gmail左側sidebar往下拉找到「建立新標籤」,命名為作業繳交(就用這章Skill要讀的標籤名,別另取,不然Skill讀不到)。若動手前清單那步已經建過,這步跳過。 手動把測試信貼上該標籤:回收件匣,勾選剛剛那1~2封自寄信 → 點上方「標籤」圖示(或右鍵)→ 勾「作業繳交」。現在這個標籤底下就有真實的未讀作業信可供Codex練習了。 【提醒】用「自寄信」當測試素材最安全就算Codex跑歪了、標錯標籤,動到的也只是你自己建立的虛假信件,不會影響到學生真正交的作業。等步驟3測試通過,再放真實信件進來。 步驟3-A 跑1封測試(最關鍵的一步) 進Codex: codex 輸入: 請執行 auto-email-processor Skill,但這次只處理 1 封測試: 1. 開 Gmail 2. 找到「作業繳交」標籤內第一封符合條件的未讀信 3. 完整跑完 Phase 1-4 4. 跑完後回報你做了什麼(步驟列表、最後 Sheet 寫了哪一列) 整個過程請在我面前跑、不要靜默。 每動一步先告訴我「我準備做 X」,等我說 OK 才執行。 【提醒】請全程盯著螢幕看!不要去泡咖啡、不要切到別的視窗。第一次跑就是要確認「它真的有照規矩來」。 步驟3-B 盯著看的時候要確認什麼? Codex跑的時候,眼睛確認這6件事: Codex開的是正確的Gmail標籤(不是收件匣全部) 它沒有點開不該點的信(例如沒有.docx的、或寄件者不是學生的) 下載.docx時沒覆蓋你既有檔案 批改完Sheet新增一列(不是修改既有列) 信件標為「已讀」+ 加「已批改」標籤,沒刪除、沒進垃圾桶 log檔有一行新紀錄 任何一項不對 → 立刻按Esc中止(在CLI內跑則按Ctrl + C)、修SKILL.md、再跑一次測試,不要現在就往步驟4前進。 步驟3-C 第一次跑常見的「走偏」 Q1:Codex點到收件匣不是「作業繳交」標籤 回答:Gmail介面更新時,標籤位置會變動。SKILL.md改成「在左側sidebar用文字找『作業繳交』再點」,不要靠固定位置。 Q2:把作文老師個人信也當成作業處理 回答:Phase 2過濾條件不夠嚴。再加「主旨必須有作業/homework」「附件必須是.docx」雙條件。 Q3:Sheet寫到錯的工作表(同一活頁簿有多張表) 回答:Skill補上「先點底部tab確認是『本學期_作業批改』再寫」。 Q4:標完「已批改」標籤後又標「重要」 回答:Codex在學Gmail介面,可能誤點。Rules補:「只加『已批改』標籤,其他不准動」。 步驟4-A 測試OK了,跑全部未讀 同一個Codex對話內輸入: 很好,剛才測試正確。現在請執行 auto-email-processor Skill 處理「作業繳交」標籤內所有未讀信。 需求: 1. 並行數:1(順序處理,方便我看) 2. 失敗自動重試 1 次 3. 重試仍失敗的信:加標籤「需人工處理」,跳過,繼續下一封 4. 全部跑完給總結報告:成功 N 封 / 需人工 N 封 / 失敗 N 封 5. 列出需人工的信件主旨與寄件者,方便我之後處理 開始。 「並行數1」會比較慢,但安全。等你跑過3-5次都OK再考慮加到2-3並行。 步驟4-B 預期看到的總結報告 ✅ auto-email-processor 處理完成 成功批改:23 封 需人工處理:2 封 - 「期中作文.docx 附件損壞」 / 小明 <ming@...> - 「忘記附檔」 / 阿花 <hua@...> 失敗:0 封 Google Sheet 已新增 23 列 Gmail 標記已讀 + 標籤「已批改」:23 封 標籤「需人工處理」:2 封 log 寫入 ~/codex-logs/email-processor.log:25 行 數字加總 = 標籤內未讀信總數 = Sheet新增 + Gmail標記 = log行數,四個數字對得起來就是完成。 步驟4-C 抽查Sheet內容是否正確 打開「本學期_作業批改」工作表 隨機挑3列,對應到原信件 檢查欄位:日期、姓名、主題、評語、字數、評分都對 檢查AI評語有沒有亂寫(這部分是essay-feedback Skill的責任,但這次順便抽查) Gmail內隨便開一封看是否標籤「已批改」+「已讀」 看log檔最後幾行有ok:true 6項都對 = 整套流程信任度 +1。下次可以放心多並行、少盯著。 動手操作3大禁區 把這3個禁令寫在便條紙貼在螢幕上: 不操作金融帳戶:銀行、支付、券商、加密貨幣交易所,一律白名單外。不論看起來多簡單的「查餘額」也不行,因為AI沒辦法分辨「查」和「轉」之間只差一個按鈕。 不自動寄信給真人:草稿可以、儲存可以,但按下「寄出」這個動作絕對是你自己按。AI寄錯信沒辦法收回,後果你扛。 不超範圍:Skill寫了什麼就只做什麼。不要在同一個Codex對話「順便叫它做別的事」,授權邊界會模糊掉。要做別的就開新對話、重新設權限。 節錄自:博碩文化《ChatGPT × Codex全攻略:從零基礎到自動化,打造你的AI Agent工作流》/曾慶良(阿亮老師) 著
【104職場力】・AI

更懂你了?ChatGPT新功能 可記憶Mac滑鼠點擊、鍵盤輸入

2026-08-17 經濟日報編譯吳孟真 由聯合新聞網授權轉載 OpenAI旗下聊天機器人ChatGPT的macOS桌面版,推出一項名為「電腦歷史」(Computer History)的新功能,可將使用者在電腦上的操作轉化為訓練資料,藉此學習使用者的工作方式、建議自動化流程,甚至接手尚未完成的工作。 Computer History會透過作業系統的輔助使用(accessibility)框架,記錄滑鼠 點擊、鍵盤 輸入、鍵盤快捷鍵及應用程式切換等操作,再將其轉化為可搜尋的記憶,供AI助理在回應要求時參考。記憶檔案則會以未加密的純文字形式就地儲存。 這項功能會根據使用者的操作活動,建立時間軸,讓ChatGPT和Codex在使用者往後提出要求時,能夠參考先前的操作紀錄。暫存的事件檔案會留在使用者裝置上48小時,之後刪除。OpenAI表示,這些資料會在該公司的伺服器上處理,處理完成後不會保留,除非法律另有要求。 此外,Computer History採取主動選擇加入(opt-in)的方式,而非預設開啟、再由使用者選擇退出(opt-out)。使用者也可自行排除特定應用程式和網站,不將其納入記憶,也能刪除個別紀錄。 這項功能不會擷取螢幕截圖或錄影,也不會收錄麥克風或系統音訊,且會排除私密瀏覽活動。這是OpenAI刻意做出的改變,Computer History取代了Codex先前的Chronicle功能,後者會透過擷取螢幕畫面來建立操作脈絡。 Computer History讓人想起微軟旗下備受爭議的AI功能Windows Recall,後者高度依賴螢幕截圖。 OpenAI表示,不會拿Computer History蒐集的記憶檔案來訓練模型,但當這些記憶日後在其他對話中被調出、作為上下文使用時,相關聊天內容是否可能成為訓練資料,將取決於使用者的設定。 目前這項功能尚未在歐洲經濟區(EEA)、瑞士及英國推出。
【104職場力】・AI

ChatGPT生成Apps Script程式碼4技巧!Google Sheets自動化範例用AI加持

想把重複的Google Sheets試算表工作自動化,用ChatGPT就可以快速生出可用的Apps Script程式碼,相較於手動編寫、錄製巨集,使用生成式AI的技術門檻最低!作者分享2個範例,並提醒用AI生成Apps Script程式碼的Prompting技巧。本文節錄自《AI 加持!Google Sheets 超級工作流》。 文/杜昕 Mic Tu 本文目錄(點擊可快速前往) 撰寫Apps Script程式碼的3種方式使用生成式AI生成Apps Script程式碼▶ 範例1:資料統計▶ 範例2:生成圖表用AI生成Apps Script程式碼的Prompting技巧 Google Apps Script(以下簡稱Apps Script)是一個強大的雲端腳本語言,讓使用者能透過類似JavaScript的程式碼整合Google的試算表、文件、簡報、日曆等功能,自動化重複性的工作,完全免費且不需要安裝任何開發環境即可完成。 若要在Google Sheets中使用Apps Script,只要點選「擴充功能 → Apps Script」進入Apps Script的編輯器介面,便能開始撰寫程式。 撰寫Apps Script程式碼的3種方式 撰寫Apps Script程式碼的方式可分成手動編寫、錄製巨集、使用生成式AI 3種,優缺點分別如下: 撰寫方式優點缺點手動編寫完全根據需求客製化程度高。需要花較多的時間學習與實際撰寫。錄製巨集錄製後自動生成程式碼,只需根據需求手動調整即可。錄製的程式碼較基本,複雜的需求可能要大幅的手動調整,因此仍需具備程式基礎。使用生成式AI可直接複製貼上生成的程式碼,大幅提高撰寫效率,也能解決較複雜的案例。撰寫程式碼時會備註各程式碼的用途,可供快速學習。較冷門的需求可能會回答錯誤,若要提升生成品質則會需要訂閱。有時程式碼較冗餘,影響執行效能與可閱讀性。 雖然3種方式皆有優缺點,但使用生成式AI需要的時間、技術門檻最低,因此後續各章節主要會使用ChatGPT生成程式碼,提供輸入的Prompt及對應的輸出。 使用生成式AI生成Apps Script程式碼 本節將使用兩個範例說明如何使用ChatGPT生成程式碼,只要將程式碼複製到Apps Script中並執行函式即可,兩範例的需求、Prompt與ChatGPT (4o mini)生成程式碼如下: 本節範例使用之「會員資料檔」Google Sheets 會員資料檔範例(圖/旗標) ▶ 範例1:資料統計 需求:統計會員資料檔中的會員職業,各職業依會員數多到少排序。 問:生成Apps Script程式碼,統計工作表「會員資料檔」的 E2:E 每個值出現的次數,依次數由高到低輸出到工作表「5.4.3 使用生成式 AI 生成程式碼」的 A:B 中,並將兩欄的標題分別設為「職業」和「會員數」。 ChatGPT輸出結果(以下為作者撰寫時生成之版本,每次生成可能有些許差異,請各位讀者稍加留意): ▶ 範例2:生成圖表 需求:延續上例,將統計結果繪製成柱狀圖。 問:生成Apps Script程式碼,將工作表「5.4.3 使用生成式AI生成程式碼」的 A2:B 繪製成柱狀圖,兩欄分別為「職業」和「會員數」,並貼上至工作表的 C1 儲存格中。 ChatGPT 輸出結果: 兩範例的最終結果如下圖所示: (圖/旗標) 用AI生成Apps Script程式碼的Prompting技巧 在撰寫Prompt時要清楚描述需求,以增加生成式AI正確的機率,可以使用以下的Prompting架構增加正確輸出的機率: 問:(1) 生成Apps Script程式碼,(2) 完成以下步驟:1.&nbsp; (3) 將工作表「○○○」的 ○○:○○ 儲存格&nbsp; (4) 匯總 / 繪製圖表 / 計算...,其中 A / B / C 欄位依序為 △△△ / △△△ / △△△…。2.&nbsp; 將 …3.&nbsp; 將 …,(3) 把最終結果輸出至工作表「○○○」的 ○○ 儲存格。 (1) 在一開始就提及Apps Script,避免AI輸出其他程式語言。 (2) 若要求非常複雜時,建議化為多個步驟,或是分多次Prompt漸進式說明。 (3) 清楚說明資料來源與最終輸出的位置,提及「工作表/儲存格/範圍/欄/列」避免判斷錯誤,並建議用括號標示工作表名稱。 (4) 說明計算過程時可以說明應用場景,但要說明各欄位的名稱,避免判斷錯誤。若欄位的名稱較難判斷資料型態時,可以增加舉例說明。 節錄自:旗標《AI 加持!Google Sheets 超級工作流》/杜昕 Mic Tu 著 推薦閱讀: AI家教上線!ChatGPT和Gemini學習模式實測4招馬上用 AWS免費課程幫你打造AI「學力」證明,攻搶12萬AI職缺! 除了ChatGPT還有哪些生成式AI?16種AI工具應用解析
【104職場力】・AI

有任何收穫或想分享的,都來和大家一起聊聊吧!