2026-05-08 日報

✏️ 設計脈動日報 - 第 037 期 (2026-05-08)

焦點設計導讀

1. 什麼是 DESIGN.md 以及如何運用它(What is DESIGN.md and How To Use It)

分析段落:DESIGN.md 旨在為 AI 設計生成工具提供一致的輸出規範,解決了 AI 輔助設計中長期存在的「不穩定性」挑戰。對於數位產品設計師而言,掌握這個新興標準有助於在團隊中更有效率地整合 AI,確保設計資產與設計系統保持高度同步,進而提升設計工作流程的效率與品質。

2. 如何讓 Claude Code 在 Figma 中遵循你的設計系統(How to make Claude Code follow your design system in Figma)

分析段落:這篇文章深入探討了如何利用 AI 工具 Claude Code 結合 Figma,實際應用設計系統來生成程式碼。這對產品設計師來說至關重要,它開啟了將設計成果直接轉化為可迭代程式碼的可能性,大幅縮短設計與開發之間的鴻溝,並確保介面元件在不同情境下的一致性。

3. 提示詞不是介面(The prompt is not an interface)

分析段落:這篇文章對 AI 工具當前的「提示詞驅動」介面模式提出了批判性思考,認為它可能導致使用者體驗的回歸。對於 UI/UX 設計師而言,這是一個重要的警示,提醒我們在設計 AI 輔助工具時,不應只依賴文字提示,而應更注重視覺化意圖和直接操作的介面設計,以避免倒退到命令列時代。

4. 為數據密集型應用程式設計 — 給互動設計師的建議(Designing data-intensive applications — advice for interaction designers)

分析段落:這篇文章為處理大量數據的應用程式設計提供了寶貴的互動設計視角,強調「看穿」產品表層,深入理解數據與領域概念的重要性。這對於設計師而言是提升專業能力的關鍵,能幫助我們更好地將複雜資訊轉化為直觀、高效且有意義的使用者體驗。

5. 設計師們,這將改變一切 (Figma + Claude 測試)(Designers, This Changes Everything (Figma + Claude Test))

分析段落:這篇報導透過實際測試展示了 Claude 如何將真實的 Figma 設計轉換成可用的生產級網頁,而非簡單的原型。這對設計師來說是一項顛覆性的發展,它預示著設計到開發流程將變得更加流暢,允許設計師在更高層次上迭代,並可能重塑未來設計工具的應用模式。

6. 從品牌到產品:我如何學會為真實生活而設計(From Brand to Product: How I Learned to Design for Real Life)

分析段落:作者分享了從品牌設計轉向產品設計的個人經驗,強調了從抽象視覺識別到具體使用者互動的轉變。這篇文章為考慮職業轉型的設計師提供了寶貴的視角,並提醒所有設計師,無論專注於哪個領域,最終目標都是為真實世界的使用者創造有意義的解決方案。

7. 為媽媽製作的 2026 母親節 Scrollytelling 禮物(A Scrollytelling Gift for Mum on Mother’s Day 2026)

分析段落:這篇文章展示了如何運用 Scrollytelling(捲動說故事)技術創造一個具備情感連結的網頁體驗。對於網頁設計師和前端開發者而言,這不僅提供了實用的 CSS 動畫和互動技巧,更是一個將個人情感融入數位創作的絕佳範例,展現了網頁設計在表達故事方面的無限可能。

8. DE_FORM 為 BFO 管弦樂團品牌識別編碼觀眾(DE_FORM Encodes the Audience in BFO's Orchestra Brand Identity)

分析段落:這則案例展示了如何透過創新的生成式設計系統為布達佩斯音樂節管弦樂團(BFO)建立獨特的品牌識別。設計師可以從中學習如何將藝術性與系統性結合,創造出既能反映品牌核心價值又能與觀眾產生深度共鳴的動態視覺語言。

精細分類

【設計工具與 UI/UX (Design Tools & UI/UX)】

Design Tools Updates (設計工具動態:Figma、Sketch、Penpot 等)

  • Figma 的廣告製作替代方案?(Figma alternative for ad production?)
  • 這篇文章討論了 Figma 在多尺寸、多變體廣告生產中可能存在的效率問題,並向社群提問是否有更適合廣告製作的替代工具。對於追求高效率工作流程的設計師而言,這提供了一個思考如何優化設計工具選擇與運用策略的機會。
  • 原文連結https://www.reddit.com/r/UI_Design/comments/1t6hbfu/figma_alternative_for_ad_production/

UI/UX Research & Methods (使用者研究與設計方法論)

  • 使用者掌握現狀,你掌握未來。(Users own the present. You own the future.)
  • 這篇文章提醒設計師,使用者雖然了解他們當前的需求,但不一定能預見未來的產品發展方向。它強調了進行前瞻性使用者研究的重要性,以避免被現有認知所束縛,進而開拓新的產品設計空間。
  • 原文連結https://uxdesign.cc/users-own-the-present-you-own-the-future-c35e3538f966?source=rss----138adf9c44c---4
  • 產品設計與迭代:跨職能團隊在設計衝刺期間的工作(Product Design and Iteration: What Cross-Functional Teams Do During a Design Sprint)
  • 本文詳細描述了設計衝刺中,產品設計師、研究員、UX 文案、設計系統專家、視覺設計師和產品經理如何協作。這為設計團隊提供了實際的執行指南,幫助團隊在時間壓力下高效地進行概念驗證與迭代。
  • 原文連結https://medium.muz.li/product-design-and-iteration-what-everyone-does-when-the-design-sprint-is-running-cb729efbf89b?source=rss----5969bf7021a3---4
  • 一個設計變更如何超出預期地改善了使用者行為?(What’s one design change that improved user behavior more than you expected?)
  • Reddit 社群上的這個討論串邀請設計師們分享那些看似微小卻對使用者行為產生巨大影響的設計案例。這對於尋求實際優化使用者體驗的設計師來說,是一個集合了實戰經驗與靈感的寶庫,有助於激發更多精妙的設計點子。
  • 原文連結https://www.reddit.com/r/web_design/comments/1t55q7h/whats_one_design_change_that_improved_user/
  • 喬伊的初體驗(The first taste of Joy)
  • 這篇文章透過生活化的例子,闡述了「愉悅設計(Joyful Design)」的初衷與重要性,強調如何透過微小的設計細節為使用者帶來意想不到的快樂。對於尋求提升使用者情感體驗的設計師,這提供了一個重新審視設計目標的溫暖視角。
  • 原文連結https://uxdesign.cc/the-first-taste-of-joy-02f81408ac8a?source=rss----138adf9c44c---4
  • GIS SaaS 產品的最佳選擇是什麼?自由職業者還是設計公司?(What would be best for GIS SaaS product? Freelancer or Design House?)
  • 這是一個關於為 GIS(地理資訊系統)SaaS 產品尋找設計資源的實務問題討論。對於產品經理或初創企業創辦人而言,它提供了在預算、專業深度和專案規模之間權衡選擇自由職業者或設計公司的參考,有助於做出明智的設計投入決策。
  • 原文連結https://www.reddit.com/r/UI_Design/comments/1t64j2i/what_would_be_best_for_gis_saas_product/

【網頁設計與前端 (Web Design & Frontend)】

Web Design Trends (網頁設計趨勢)

  • 為我的紐約應用程式建構了一個登陸頁面(Built a landing page for my NYC app)
  • 這篇文章展示了一個為特定應用程式設計的登陸頁面案例,強調簡潔、直接的使用者導向設計。對於網頁設計師而言,這是一個檢視與學習如何打造高效能、具備清晰轉換路徑的產品推廣頁面的實用範例。
  • 原文連結https://www.reddit.com/r/web_design/comments/1t5z5rq/built_a_landing_page_for_my_nyc_app/
  • 我即將推出的房地產模板的關於部分 ✨(About Section for my upcoming Real Estate Template ✨)
  • 這篇文章分享了一個房地產網站模板中「關於」區塊的設計概念,強調乾淨、溫暖且高端的整體視覺感。對於網頁設計師,這提供了具體的設計靈感和思考方向,如何在特定行業中運用設計原則來傳達品牌價值。
  • 原文連結https://www.reddit.com/r/UI_Design/comments/1t6btew/about_section_for_my_upcoming_real_estate_template/

CSS & Frontend Techniques (CSS 與前端技術)

  • 媒體查詢範圍語法(Media Queries Range Syntax)
  • 這篇文章探討了 CSS 媒體查詢中的範圍語法,這是一種更簡潔、更具可讀性的響應式設計寫法。對於前端開發者和網頁設計師,掌握這種語法能幫助他們更有效率地編寫適應不同螢幕尺寸的 CSS 規則,提升程式碼的維護性與響應式設計的精準度。
  • 原文連結https://www.reddit.com/r/web_design/comments/1t56u1m/media_queries_range_syntax/

No-Code & Site Builders (無程式碼工具:Framer、Webflow 等)

  • 使用 Algolia 為您的網站增加搜尋超能力(Adding search superpowers to your site with Algolia)
  • 本文介紹如何將 Webflow 與 Algolia 整合,為網站添加強大的搜尋功能。對於使用無程式碼工具的設計師和開發者,這提供了一種無需編寫複雜後端程式碼,即可顯著提升網站使用者體驗和內容可發現性的實用解決方案。
  • 原文連結https://webflowmarketingmain.com/blog/search-webflow-site-algolia
  • 在不使用付費外掛的情況下,建立一個滿足我需求的 WordPress 網站的持續探索。(The ongoing saga of creating a WordPress website that does what I need with zero paid plugins.)
  • 這篇文章分享了作者如何在不依賴付費外掛的情況下,透過多個免費工具和自定義 CSS 在 WordPress 上搭建複雜功能的實戰經驗。對於預算有限或喜歡深度客製化的設計師,這提供了寶貴的零成本解決方案和整合思路。
  • 原文連結https://www.reddit.com/r/web_design/comments/1t5tnx1/the_ongoing_saga_of_creating_a_wordpress_website/

【AI 設計與創意科技 (AI Design & Creative Tech)】

AI-Powered Design Tools (AI 設計工具)

  • OpenClaw 和 Claude 可以將您 AI 生成的播客放入 Spotify(OpenClaw and Claude can put your AI-generated podcasts in Spotify)
  • 這篇文章介紹了利用 AI 工具如 OpenClaw 或 Claude 生成音訊內容,並透過新工具將其保存到 Spotify 的流程。對於希望探索 AI 在多媒體內容創作領域應用潛力的設計師而言,這展示了 AI 如何擴展創意邊界,特別是在聲音設計和個人化媒體生成方面。
  • 原文連結https://www.theverge.com/entertainment/925916/save-to-spotify-ai-podcasts
  • Riel Studio — ComfyUI 內建於 Blender (開發中)(Riel Studio — ComfyUI inside Blender (Working in progress))
  • 這則報導展示了將 ComfyUI 整合到 3D 軟體 Blender 中的開發進度,預示著在 3D 環境中直接運用 AI 進行內容生成和視覺創作的可能性。這對於動態設計師和 3D 藝術家來說,將極大提升工作流程的效率與創意探索的廣度。
  • 原文連結https://www.reddit.com/r/comfyui/comments/1t6jbrq/riel_studio_comfyui_inside_blender_working_in/
  • ComfyUI 中的 Qwen 3.5 + Align Tool & Pixaroma 節點更新 (Ep16)(Qwen 3.5 in ComfyUI + Align Tool & Pixaroma Nodes Updates (Ep16))
  • 這篇文章介紹了 ComfyUI 整合 Qwen 3.5 模型以及 Align Tool 和 Pixaroma 節點的最新更新。對於使用 ComfyUI 的生成藝術家和 AI 設計師,這些更新意味著更強大的圖像生成能力、更精細的控制選項和更豐富的視覺效果,推動創意表現的界限。
  • 原文連結https://www.reddit.com/r/comfyui/comments/1t6dcfq/qwen_35_in_comfyui_align_tool_pixaroma_nodes/
  • comfyui-lora-FindingLora - 一個具備模糊搜尋、一鍵連結、書籤和觸發器的 Lora 加載器。(comfyui-lora-FindingLora - a Lora Loader with fuzzy search, one click chaining, bookmarks and triggers.)
  • 這篇文章介紹了一個專為 ComfyUI 設計的 Lora 加載器外掛,透過模糊搜尋、一鍵連結和書籤功能,大幅提升 Lora 模型管理與應用的效率。對於頻繁使用 Lora 模型進行 AI 圖像創作的設計師,這款工具能顯著簡化工作流程,使其更專注於創意本身。
  • 原文連結https://www.reddit.com/r/comfyui/comments/1t6blh4/comfyuilorafindinglora_a_lora_loader_with_fuzzy/
  • Hyperagent:一個由 Airtable 建立的 AI 代理平台(Hyperagent: An AI Agent Platform Built by Airtable)
  • Airtable 推出的 Hyperagent 平台展示了 AI 代理如何在自動化工作流程中發揮巨大潛力,尤其強調其能將數週工作壓縮至一夜完成。對於設計師而言,這意味著可以探索如何將重複性任務委託給 AI 代理,從而將更多時間投入到核心的創意和策略性設計工作中。
  • 原文連結https://abduzeedo.com/hyperagent-ai-agent-platform-built-airtable

Generative Art & Visual AI (生成式藝術與視覺 AI)

  • 測試 LTX 2.3 1.1 精煉版在我的 GPU 上。對於創作 UGC 內容或短 TikTok 影片來說相當不錯。(testing LTX 2.3 1.1 distilled on my gpu. pretty much decent for creating ugc content or short tiktok vlog.)
  • 這篇文章分享了 LTX 模型的實測效果,強調其在生成使用者原創內容(UGC)和短影音方面的潛力。對於內容創作者和動態設計師,這展示了 AI 在快速生成視覺素材和動畫方面的能力,有助於探索新的創意製作流程。
  • 原文連結https://www.reddit.com/r/comfyui/comments/1t643g1/testing_ltx_23_11_distilled_on_my_gpu_pretty_much/
  • 銀色日落(Silver Sunset)
  • 這是一個使用 Midjourney 生成的圖像作品,展現了 AI 在創造意境和色彩方面的高級能力。對於尋求視覺靈感的設計師而言,這提供了一個欣賞和學習生成藝術風格的機會,有助於拓展創意思維。
  • 原文連結https://www.reddit.com/r/midjourney/comments/1t6ey6g/silver_sunset/
  • 風暴曾來過。(The Storm was Here.)
  • 這是一幅透過 Midjourney 生成的具備強烈氛圍感的圖像作品,展現了 AI 在表現自然景象和情感張力方面的潛力。對於視覺藝術家和概念設計師,這是一個啟發靈感、探索視覺敘事可能性的好案例。
  • 原文連結https://www.reddit.com/r/midjourney/comments/1t6n1lv/the_storm_was_here/
  • 情緒板 6 - 數位風景(Moodboard 6 - Digital landscape)
  • 這是一個 Midjourney 生成的數位風景情緒板,展示了 AI 在快速生成多樣化視覺概念圖方面的效率。對於需要快速探索視覺風格或為專案建立初步視覺方向的設計師,這種生成式情緒板是極具價值的工具。
  • 原文連結https://www.reddit.com/r/midjourney/comments/1t68tj8/moodboard_6_digital_landscape/
  • 稜鏡邪教美學(Prism Cult Aesthetic)
  • 這幅由 Midjourney 生成的圖像展示了一種獨特且富有想像力的「稜鏡邪教」美學風格。對於尋求實驗性或小眾風格的設計師而言,它提供了一個了解 AI 如何創造獨特視覺主題的窗口,激發新的設計探索。
  • 原文連結https://www.reddit.com/r/midjourney/comments/1t67i5l/prism_cult_aesthetic/
  • 奇幻日記(Fantasy Diary)
  • 這是一幅由 Midjourney 創造的奇幻風格圖像,展現了 AI 在具象化抽象概念和營造特定氛圍方面的能力。對於插畫師和內容創作者,這提供了豐富的視覺靈感,可用於故事板、角色設計或環境概念。
  • 原文連結https://www.reddit.com/r/midjourney/comments/1t6bk0q/fantasy_diary/

Creative Technology (創意科技應用)

【設計靈感與社群 (Design Inspiration & Community)】

Award-Winning Works (得獎作品與案例)

  • 每週設計師更新 #555(Weekly Designers Update #555)
  • Muzli 的每週更新提供了一劑濃縮的設計靈感,包含了最熱門的專案、必備工具和改變遊戲規則的產品。對於需要定期充電的設計師來說,這是一個快速瀏覽當前設計趨勢和新創意的絕佳資源,能幫助保持敏銳的設計嗅覺。
  • 原文連結https://medium.muz.li/weekly-designers-update-555-31be44aed15c?source=rss----5969bf7021a3---4
  • Elena Scott
  • Typewolf 今日網站展示了 Elena Scott 的作品,其排版選用了 Editorial Old 和 Neue Montreal 字體,呈現出經典與現代結合的視覺美感。對於網頁設計師和字體愛好者,這是一個學習如何透過字體搭配營造網站氛圍的優秀案例。
  • 原文連結https://www.typewolf.com/site-of-the-day/elena-scott
  • Speakeasy
  • Typewolf 介紹的 Speakeasy 網站選用 Tobias、Diatype 和 Diatype Mono 字體,營造出獨特的設計風格。這為設計師提供了一個關於如何在不同情境下運用多種字體來建立視覺層次和風格一致性的參考範例。
  • 原文連結https://www.typewolf.com/site-of-the-day/speakeasy
  • Every
  • Typewolf 將 Every 網站列為今日推薦,該網站使用了 Signifier 和 Switzer 字體。設計師可以從中觀察字體在實際網頁中的應用效果,特別是這些字體如何共同塑造了網站的整體氣質和訊息傳達效率。
  • 原文連結https://www.typewolf.com/site-of-the-day/every-2025
  • TR Studio
  • TR Studio 在 Typewolf 上獲得推薦,其網站選用了 Arizona Flare 和 Dia 字體。這展示了字體選擇如何在品牌形象和使用者體驗中發揮關鍵作用,為設計師提供字體組合的實用靈感。
  • 原文連結https://www.typewolf.com/site-of-the-day/tr-studio
  • Go RVing
  • Typewolf 今日網站推薦了 Go RVing,該網站運用 Agipo、Topol 和 Maison Neue 等字體,營造出活潑且親近的品牌感受。這為設計師提供了多字體排版應用的實例,展示如何透過字體選擇來強化品牌的傳播效果。
  • 原文連結https://www.typewolf.com/site-of-the-day/go-rving

Brand & Identity (品牌與識別設計)

  • Xinmei Liu:帶有墨水與論點的社論插畫(Xinmei Liu: Editorial Illustration With Ink and Argument)
  • 這篇文章展示了插畫師 Xinmei Liu 運用墨水技法結合深刻論點的社論插畫作品。對於平面設計師和品牌設計師而言,這是一個學習如何將藝術表達與主題概念深度結合,創造出既有美感又具備溝通力的視覺內容的優秀案例。
  • 原文連結https://abduzeedo.com/xinmei-liu-editorial-illustration-ink-and-argument

Design Community News (設計社群動態)

  • Reddit 新手,已經開始過度分析 UI 🥲(New to Reddit and already overanalyzing UI🥲)
  • 這篇貼文是一位產品/UI 設計師初次加入 Reddit 社群的分享,展現了設計師對日常介面習慣性分析的職業本能。對於設計社群成員來說,這反映了同行的共同特質,也鼓勵大家在社群中積極參與設計討論、交流見解。
  • 原文連結https://www.reddit.com/r/UI_Design/comments/1t63s1y/new_to_reddit_and_already_overanalyzing_ui/

【設計系統與字體排印 (Design Systems & Typography)】

Design Systems & Tokens (設計系統與 Design Tokens)

Typography & Type Design (字體排印與字型設計)

  • 我該如何修正這三個 CTA 的排版?(How do i fix the typography of these 3 CTAs?)
  • 這是一個 Reddit 社群中關於如何優化三個呼籲行動(CTA)按鈕排版設計的實際問題。對於 UI 設計師和字體排印新手,這提供了一個直接學習字體應用、行高、字距和整體視覺平衡的機會,以提升介面元素的清晰度和點擊率。
  • 原文連結https://www.reddit.com/r/UI_Design/comments/1t6jj8p/how_do_i_fix_the_typography_of_these_3_ctas/

English Daily Highlights

Today's design pulse report focuses heavily on the evolving intersection of AI, design tools, and user experience. A significant trend is the emergence of new standards and practical applications for integrating AI into design workflows, particularly with tools like Figma and Claude.

A key highlight is the discussion around DESIGN.md, an initiative aimed at standardizing AI design outputs for consistency. This could be a game-changer for digital product designers striving for more predictable results from generative AI tools and better integration into existing design systems. Complementing this, articles demonstrate how Claude Code can be trained to follow design systems within Figma, bridging the gap between AI-generated code and design specifications, thus streamlining the design-to-development handover.

However, a critical perspective also emerged: "The prompt is not an interface." This challenges designers to move beyond text-based prompting and re-emphasize visual intent and direct manipulation in AI tool design, ensuring a human-centered approach rather than reverting to command-line interactions. This insight is crucial for shaping the future of AI-powered UI/UX.

Furthermore, practical advice for designing data-intensive applications offers valuable guidance for interaction designers navigating complex data landscapes, urging them to look beyond the surface UI to understand underlying data structures. This reinforces the need for a holistic design approach.

The report also captures tangible advancements in creative technology, such as the ability to generate AI-powered podcasts and save them to Spotify, hinting at AI's broader impact on multimedia content creation. In web design, scrollytelling techniques are showcased as a powerful method for engaging narrative delivery, proving that frontend creativity remains vibrant. Lastly, an innovative generative design system for brand identity demonstrates how AI can foster dynamic and audience-responsive visual languages, pushing the boundaries of traditional branding. These diverse insights collectively paint a picture of a design industry rapidly adapting to new technologies while refining foundational principles.