✏️ 設計脈動日報 - 第 163 期 (2026-08-28)
焦點設計導讀
1. 工作流程實驗室:運用代理程式在設計與程式碼間轉換(Workflow lab: Moving between design and code with agents)
這篇文章探討了 Figma 如何透過 AI 代理程式 (agents) 優化設計與開發之間的工作流程,讓設計師能夠更順暢地將設計理念轉化為可操作的程式碼,大幅提升團隊協作效率與交付速度。這不僅是設計工具的一大進步,也預示著未來 AI 在設計自動化與設計系統管理上的潛力。
2. Photoshop 新創新功能賦予您創作過程各階段更多選擇與控制權(New Photoshop innovations bring you more choice and control at every stage of your creative process)
Adobe 持續將 AI 技術整合進 Photoshop,推出更多創新功能,讓設計師在創作的每個階段都能擁有更精準的控制與豐富的選擇。這些更新包含更智慧的選取工具、生成式編輯的進階選項,以及最佳化的工作流程,旨在解放設計師的創意潛力,並簡化複雜的圖像處理任務。
3. 如何設計讓使用者信任的 AI 產品(How to Design AI Products Users Can Trust)
這篇文章深入探討了 AI 產品設計中至關重要的「信任」議題。對於數位產品設計師而言,理解如何在介面、互動流程中建立透明度與可預測性,是確保使用者能安心使用 AI 服務的關鍵,這直接影響著 AI 產品的普及與成功。
4. 使用文件子母畫面 API 建立網頁小工具(Creating Web Widgets Using the Document Picture-in-Picture API)
這項新的網頁 API 允許開發者在獨立的浮動視窗中嵌入 HTML 內容,為網頁應用程式帶來前所未有的彈性與多工處理能力。對於網頁設計師來說,這開啟了創造更豐富、更具沉浸感的互動式小工具的可能,例如客製化的播放器或即時通知面板。
- 原文連結:https://css- tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/
5. Goodgrowth:啟動序列、旋轉光碟與作品集藝術(Goodgrowth: Boot Sequences, Spinning Discs, and the Art of the Portfolio)
Codrops 深入剖析 Goodgrowth 網站的設計過程,展示其如何透過類控制台的啟動序列、3D 旋轉光碟等創意動效與音效,打造出極具實驗性與藝術感的數位作品集。這篇分享為尋求突破性作品集表現的設計師提供了豐富的靈感,證明了精心策劃的互動體驗能大幅提升個人品牌形象。
6. SmartAssistant - AI 助理免費 Figma 模板(SmartAssistant - AI Assistant Free Figma Template)
Figma 釋出了一款免費的 AI 助理應用程式模板,讓設計師能夠快速搭建具備 AI 功能的介面原型。這模板為想探索或整合 AI 功能的 UI/UX 設計師提供了一個實用的起點,可幫助他們理解如何設計自然的對話介面、資訊呈現模式,以及互動流程。
7. 這獨立開發者發現了 AI 的用途,但表示專案仍以人為主導(This indie dev found a use for AI but says the project was still firmly human led)
這篇文章透過一位獨立開發者的案例,闡述了 AI 在創意專案中作為輔助工具的潛力,同時強調人類創意主導的重要性。對於設計師而言,這是一個重要的啟示:AI 應被視為一個強大的協作者,而不是取代人類思維的存在,鼓勵設計師擁抱 AI 並學習如何將其融入創作流程,以提升效率與探索新可能性。
精細分類
設計工具與 UI/UX (Design Tools & UI/UX)
Design Tools Updates (設計工具動態:Figma、Sketch、Penpot 等)
-
LaunchHub - 支援平台免費 Figma 模板(LaunchHub - Support Platform Free Figma Template)
Figma 推出了一個免費的 LaunchHub 支援平台模板,提供設計師快速構建客戶服務或產品支援介面所需的 UI 組件與流程範例。這能有效幫助設計師提升工作效率,確保支援介面的一致性與使用者體驗。 -
Cardpay - 金融科技免費 Figma 模板(Cardpay - Fintech Free Figma Template)
Figma 發佈了專為金融科技 (Fintech) 領域設計的免費模板 Cardpay,內含多種金融交易、帳戶管理介面的設計元素與頁面佈局。這對於正在從事金融產品設計的設計師而言,是一個寶貴的資源,能加速原型開發並確保設計的專業度。 -
Investflow - 投資公司免費 Figma 模板(Investflow - Investment Firm Free Figma Template)
Investflow 是 Figma 推出的另一款免費模板,專為投資公司和金融顧問設計,包含直觀的儀表板、數據可視化組件和使用者旅程範例。該模板協助設計師在建立複雜金融應用時,能快速整合專業且美觀的 UI,提升產品的可靠感與使用者體驗。 -
UI 色彩調色盤:一年回顧與我的首篇貼文(UI Color Palette: one year in, and my first post here)
Penpot 社群的一位開發者分享了他們 UI 色彩調色盤外掛一週年的歷程與更新,並首次正式在論壇發文。這顯示了開源設計工具生態系的成長,以及社群成員對工具改進與功能擴展的投入,鼓勵更多設計師參與共建。 -
持續出現的奇怪行為(Odd Behavior All the Time)
一位從 Figma 轉用 Penpot 的使用者分享了他們在使用過程中遇到的各種錯誤和不順暢的體驗,特別提到撤銷功能與文字編輯的異常。這些回饋對於 Penpot 團隊來說是重要的 UX 改善依據,也提醒設計師在選擇工具時需考量其穩定性與社群支援。
UI/UX Research & Methods (使用者研究與設計方法論)
(本日無直接相關資訊)
Interaction & Motion Design (互動與動態設計)
(Goodgrowth 已納入焦點導讀)
網頁設計與前端 (Web Design & Frontend)
Web Design Trends (網頁設計趨勢)
(本日無直接相關資訊,Goodgrowth 內容涵蓋了此類別部分精神,但已納入焦點導讀)
CSS & Frontend Techniques (CSS 與前端技術)
(文件子母畫面 API 已納入焦點導讀)
No-Code & Site Builders (無程式碼工具:Framer、Webflow 等)
- Fitlex:Galaxy Studio 提供的免費網站模板(Fitlex: Free Free Website Template by Galaxy Studio)
Framer 平台上推出了由 Galaxy Studio 設計的 Fitlex 免費網站模板,提供給使用者快速建立專業且響應式的網頁。這展示了無程式碼工具在提供高品質設計資產方面的潛力,讓非開發背景的設計師也能輕鬆打造功能豐富的網站。
AI 設計與創意科技 (AI Design & Creative Tech)
AI-Powered Design Tools (AI 設計工具)
-
ComfyUI v0.34.2 版本更新(ComfyUI v0.34.2)
ComfyUI 發佈了 v0.34.2 版本更新,作為一個強大的生成式 AI 繪圖工具,其版本迭代通常會帶來新的功能、優化或修復,這對於使用 AI 進行視覺創作的設計師和藝術家而言,意味著更強大的控制力和更豐富的創作可能。 -
Galaxy Z Fold8 Ultra 是一款五星級手機,但讓數位藝術家失望的一個關鍵點(The Galaxy Z Fold8 Ultra is a five-star phone, but has one key disappointment for digital artists)
這篇評論指出 Galaxy Z Fold8 Ultra 雖是一款功能強大的智慧型手機,但在某個關鍵方面未能滿足數位藝術家的特定需求。這提醒設計工具的開發者和硬體製造商,在追求創新時,必須深入了解目標使用者群體的具體工作流程與痛點,才能提供真正符合需求的產品。
Generative Art & Visual AI (生成式藝術與視覺 AI)
(本日無直接相關資訊)
Creative Technology (創意科技應用)
(本日無直接相關資訊)
設計靈感與社群 (Design Inspiration & Community)
Award-Winning Works (得獎作品與案例)
-
Nora Vale - Awwwards 提名作品(Nora Vale - Awwwards Nominee)
Nora Vale 網站獲得 Awwwards 提名,這肯定了其在網頁設計上的創新性、美學與使用者體驗。對於追求卓越的設計師而言,研究這些獲獎或提名的作品,是獲取前沿設計靈感、提升自身技藝的絕佳途徑。 -
Code Precision - Awwwards 提名作品(Code Precision - Awwwards Nominee)
Code Precision 網站同樣獲得 Awwwards 提名,意味著其在程式碼實現的精準度、視覺設計的精緻度及整體互動體驗上都達到了業界高標準。這不僅鼓勵設計師追求視覺美感,也提醒他們要注重技術實現層面的卓越,以創造真正令人印象深刻的數位體驗。
Brand & Identity (品牌與識別設計)
-
可可品牌識別設計(“cacao”)
這篇文章探討了一個名為「cacao」的品牌識別設計案例,分析其如何透過視覺元素傳達品牌價值與獨特個性。對於品牌設計師而言,了解不同品牌如何運用色彩、字體、圖形等元素來塑造獨特的市場形象,是提升自身設計能力的重要學習。 -
視覺識別:Ricardo Chacoa 的 Spring & Tonic 品牌設計(Visual Identity: Spring & Tonic by Ricardo Chacoa)
Ricardo Chacoa 為 Spring & Tonic 設計了全新的視覺識別,融合了植物線稿插畫與客製化編輯字體,打造出清新而優雅的品牌形象。這個案例展示了如何透過細膩的視覺元素組合,為品牌賦予獨特的生命力與記憶點。 -
品牌識別:ARTSBY EMDE 的 FLUX COFFEE 品牌設計(Brand Identity: FLUX COFFEE by ARTSBY EMDE)
ARTSBY EMDE 為 FLUX COFFEE 打造了一個溫暖的品牌識別,巧妙地將豆狀吉祥物插畫與復古字體結合。這個設計案例提供了一個很好的參考,說明如何透過一致的視覺語言和富有故事性的元素,建立一個有溫度、吸引人的品牌形象。
Design Community News (設計社群動態)
-
Readymag 倫敦聚會(Readymag London Meetup)
Awwwards 報導了 Readymag 在倫敦舉辦的社群聚會,這類活動是設計師交流經驗、分享見解、建立人脈的重要平台。參與設計社群活動有助於設計師掌握行業最新動態,並激發新的創意靈感。 -
Moriz Oberberger 彎曲的人物和異想天開的卡通揭示「日常情境的奇異之美」(Moriz Oberberger’s bendy figures and whimsical cartoons reveal “the strange beauty of ordinary situations”)
這篇文章介紹了藝術家 Moriz Oberberger 獨特的插畫風格,他透過彎曲的人物形象和充滿異想天開的卡通,捕捉並呈現日常生活中「奇異之美」。這類藝術作品能為設計師提供豐富的視覺靈感,鼓勵他們在設計中探索非常規的表現形式和敘事方式。 -
從烤三明治到 Taytos,Guzzle 是一本深入探討愛爾蘭美食的插畫雜誌(From toasties to Taytos, Guzzle is the illustrated foodie magazine that digs into all things Irish)
Guzzle 是一本以愛爾蘭美食為主題的插畫雜誌,其設計風格和內容策劃,展示了如何透過視覺敘事與平面設計,將特定文化元素與美食體驗深度結合。這為雜誌設計師和內容創作者提供了關於品牌故事講述和插畫應用方面的靈感。 -
Joe & Mac 復古系列重現 16 位元遊戲的華麗奇異藝術風格(Joe & Mac Retro Collection is bringing back the gloriously weird art of 16-bit gaming)
這篇文章探討了經典遊戲《Joe & Mac 復古系列》如何重現 16 位元遊戲時代獨特的、華麗且奇異的藝術風格。這對於遊戲概念藝術家和數位插畫師來說,提供了一個回顧復古美學並從中汲取靈感的機會,思考如何在現代設計中融入懷舊元素。 -
Terra Memory 將設計與自然重新連結(Terra Memory reconnects design with nature)
Adobe 介紹了 Terra Memory 專案,旨在探討設計如何從自然中汲取靈感,並重新建立人與環境的連結。這項研究鼓勵設計師思考永續設計、生物仿生以及自然元素在產品和介面中的應用,推動設計朝向更具環保意識和情感共鳴的方向發展。
設計系統與字體排印 (Design Systems & Typography)
Design Systems & Tokens (設計系統與 Design Tokens)
(本日無直接相關資訊)
Typography & Type Design (字體排印與字型設計)
-
龐畢度中心,超現實主義展覽目錄(Centre Pompidou, Le Surréalisme exhibition catalog)
Fonts In Use 展示了龐畢度中心超現實主義展覽目錄中的字體應用,分析了其如何透過字體選擇與排版,呼應超現實主義藝術的風格。這提供了字體排印在文化藝術策展中的實踐案例,對字體設計師與平面設計師具有參考價值。 -
喬治三世互動式設計(King George III Interactive)
這篇文章展示了喬治三世主題互動式設計中的字體運用案例,強調字體如何在數位互動體驗中傳達歷史感與資訊層次。它對探索字體在響應式設計和互動敘事中的作用,提供了具體的視覺參考。 -
Amperos 字體應用(Amperos)
Fonts In Use 展示了 Amperos 字體的實際應用案例,透過不同情境下的視覺呈現,突顯其設計特點與適用範圍。對於尋找特定風格字體或研究字體視覺表現力的設計師來說,這是了解字體潛力的實用資源。 -
字體設計:thiennhi le 的 Mistan 顯示字體(Typography Design: Mistan Display Typeface by thiennhi le)
thiennhi le 設計的 Mistan 顯示字體,以其高對比的襯線、富有韻律的字形曲線和優雅的排版佈局而引人注目。這篇文章分析了此字體的設計細節,為字體設計師提供了關於如何創造獨特且具表現力顯示字體的深度見解。 -
Maria RM 可變字體:從餅乾字體到工藝展示(Maria RM Variable Typeface: Biscuit Lettering to Display Craft)
Rui Marques 設計的 Maria RM 可變字體,靈感來自標誌性的 Maria 餅乾,並透過精心編排的可變寬度襯線呈現。這個專案展示了字體設計如何從日常物件中汲取創意,並運用可變字體技術來提升視覺表現力與設計的靈活性。
English Daily Highlights
Today's design pulse reveals a strong emphasis on the evolving relationship between design tools, AI, and practical application. Figma is pushing boundaries with its "Workflow lab: Moving between design and code with agents," signaling a future where AI facilitates a seamless handoff between designers and developers. This is a crucial step towards automating repetitive tasks and allowing designers to focus on higher-level problem-solving.
Adobe's continuous "New Photoshop innovations" with enhanced AI features further solidifies the role of artificial intelligence in empowering creative professionals. These updates provide greater control and choice throughout the creative process, from intelligent selections to advanced generative editing, ultimately boosting productivity and opening new avenues for artistic expression.
As AI becomes more integrated into products, the article "How to Design AI Products Users Can Trust" highlights a critical challenge for UX designers. Building user trust through transparency and predictability in AI interfaces is paramount for the successful adoption and ethical deployment of these technologies.
In web design, the "Creating Web Widgets Using the Document Picture-in-Picture API" from CSS-Tricks points to new frontiers in interactive web experiences. This API allows for innovative floating UI elements, enabling more dynamic and multitasking-friendly web applications. This is an exciting development for front-end developers and web designers looking to create engaging digital products.
Another significant highlight is Codrops' "Goodgrowth: Boot Sequences, Spinning Discs, and the Art of the Portfolio," showcasing a highly experimental and artistic digital portfolio. This serves as a powerful inspiration for designers to push creative boundaries in self-promotion, emphasizing the impact of unique motion graphics, 3D elements, and sound design in digital storytelling.
Lastly, the release of "SmartAssistant - AI Assistant Free Figma Template" by Figma and the discussion around an "indie dev found a use for AI but says the project was still firmly human led" collectively underscore the immediate applicability and human-centric integration of AI in design. These resources and insights empower designers to adopt AI as a collaborative tool, fostering efficiency and exploring new creative possibilities while maintaining human creativity at the core. The overall trend indicates a rapidly advancing design ecosystem where AI tools are not just a novelty but are becoming integral to daily creative workflows and strategic product development.