AI × INTERACTIVE DESIGN SHARING_v2026.04
SOOCHOW UNIVERSITY / GUEST LECTURE
● 公開分享 FILE No. 026 2026 / SPRING

AI ×
互動設計
at Work.

產業應用現況、流程地圖,與三個學生回去就能用的關鍵詞。

Speaker
寬|天工開物
Topic
AI in Practice
Audience
東吳大學
§ 01 / STATUS QUO

Now, 不是未來。

先把一個誤會講清楚:AI 不是設計師「即將要會的工具」,是 2026 年互動設計工作室的日常標準配備。從第一次開會的腦力激盪,到最後交付的程式碼,每個環節都已經有 AI 介入。

"The question is no longer whether to use AI,
but how deep and how specific." 問題早已不是「要不要用」,而是「用到多深、做到多細」
FRONT-END / 前期
80%
概念發想 ↔ 提案撰寫
從 brief 解構、結構大綱、到正式報告書文字,AI 已是主要的內容協作者。
MID-PHASE / 中期
70%
視覺生產 ↔ 風格探索
氛圍圖、空間模擬、材料表、影片分鏡——AI 為主、人工調校為輔。
PRODUCTION / 製作
90%
原型試作 ↔ 程式實作
Claude Code 等 Agent 工具讓「設計師寫程式」這件事重新可能。
§ 02 / WORKFLOW MAP

設計流程 × AI Map

把一個專案從開始到交付拆成六個階段,每個階段對應的 AI 介入點都不同。同一個工具(譬如 Claude)在不同階段,要設定的角色、給的關鍵字、要求的輸出格式也都不一樣。

[01]
前期規劃Pre-planning
brief 解構、利害關係人盤點、體驗動線推演、敘事架構建立。AI 扮演「結構化思考夥伴」,協助把模糊需求變成可討論的選項。
Claude ChatGPT Gemini
[02]
報告書撰寫Documentation
長文本寫作的主力場景。AI 把零散的會議筆記、訪談紀錄、研究素材整合成結構清楚的章節文字。
Claude ChatGPT
[03]
提案簡報Presentation
內容拆段、視覺配圖、風格統一。文字 AI 負責訊息架構,圖像 AI 負責氛圍與輔助圖。
Claude Gemini Midjourney
[04]
多媒體內容Multimedia
影片、動態、音樂、配音。從分鏡到成片,AI 已經能處理 70% 的素材生成,剩下是剪接邏輯與品味判斷。
Runway Seedance Suno
[05]
原型試作Prototyping
把概念快速做成可互動的 demo。從 HTML 單頁到 React 應用,AI 寫第一版的速度遠快於人工。
Claude Code Cursor v0
[06]
實際製作Production
介面開發、視覺素材精修、影片剪輯、音樂創作——進入細節打磨,AI 是執行夥伴,設計師是品味守門員。
Claude Code Midjourney Runway Suno
§ 03 / TOOL TAXONOMY

四大類工具 — pick your stack.

不同類型的工具有不同的擅長場景。重點不是「用哪一個最好」,而是「在哪個情境用哪一個」。

A · TEXT
01
文字概念溝通
負責結構化思考、文案撰寫、概念對話、提案邏輯。是設計流程裡使用頻率最高的一類 AI。
Claude ChatGPT Gemini
B · IMAGE
02
圖像生成
氛圍、視覺、空間、材料、分鏡。同一張圖在不同階段的「精度需求」不同,工具選擇也不同。
Midjourney Gemini Nano Banana Flux
C · VIDEO
03
影片生成
短秒數動態、產品 demo、敘事片段。已經能取代大量過去需要 3D / motion 才能做的鏡頭。
Seedance Runway Kling Sora
D · CODE
04
程式控制
真正的 AI Agent 戰場。設計師可以直接用自然語言指揮 AI 寫程式、改檔案、跑測試、部署。
Claude Code Cursor v0 Replit
§ 04 / IMAGE SUB-CATEGORIES

圖像, divided.

「圖像生成」這件事在實務上不是一件事,是五件事。每一種圖的目的不同、容忍度不同、給 AI 的素材精度也不同。

A — 01
介面圖
UI Mockup
產品實際的螢幕內容。對「正確性」要求最高,文字、icon、層級都不能錯。
FIGMA + AI assist
A — 02
氛圍圖
Mood / Atmosphere
用來溝通方向感的提案視覺。容忍度最高,AI 可以自由發揮,重點在「感覺對不對」。
MIDJOURNEY
A — 03
空間模擬圖
Spatial Render
場域、展場、店舖。常用手稿或素模(量體 + 格局)餵給 AI,讓它生成不同風格、燈光、配色的方向。
GEMINI · MJ
A — 04
材料表圖
Material Board
材質、肌理、配色組合的視覺化。要求材料的擬真度與可辨識度,常需要分層處理。
FLUX · MJ
A — 05
影片分鏡
Storyboard
影片開拍前的鏡頭規劃。需要連貫性與角色一致性,是目前 AI 最有挑戰的圖像類型之一。
MJ · NANO BANANA
§ 05 / PRECISION TRADE-OFF

素材精度 vs. AI 自由度

這是實務上最關鍵的判斷:你給 AI 的原始素材要定義到多清楚?答案取決於三件事——成果的細緻度、正確度、最終要呈現的尺寸。

MODE A · 探索期
手稿 / 素模 → AI 自由生成
YOU GIVE 一張手繪線稿,或一個只有大方塊跟格局的空間模型——沒有材質、沒有燈光。
AI 拿著這個低精度素材,回給你十種風格、五種燈光、三種色彩配比。重點是大量產生方向,不糾結正確性。適合提案前的探索期。
VS.
MODE B · 收斂期
特寫 / 指定視角 → 先合成再融合
YOU GIVE 先把畫面中一定要出現的關鍵元素(產品、人物、品牌物件)深層處理,合成在指定位置上。
才讓 AI 處理整體融合:寫實度、光影一致、人的互動方式、材質銜接。重點是細節的可控性。適合定稿前的收斂期。
CORE PRINCIPLE
要交付的東西越精細、越大尺寸、越不能錯,
給 AI 的素材就要越清楚、越分層、越預先處理。
▲ The Take-Away

Three keywords
that just work. 三個下了就有效的關鍵詞

以下三個詞,是天工開物日常工作裡,最常被驗證有效的 prompt 關鍵字。從前期、中期到製作各階段一個。學完今天就能用,回去打開任何一個 AI 都能立刻測試效果。

01/03
前期規劃 · 體驗面 · UX
ENA
Experience Narrative Architecture

WHY IT WORKS

一般人問 AI「請幫我設計一個展覽的觀眾體驗」,AI 通常會回給你一個功能清單、流程步驟、區域配置——這些都對,但都是「執行表」,不是「體驗」。

ENA 這個關鍵詞會強迫 AI 用「敘事架構」來思考體驗,產出立刻會有情緒、有節奏、有起承轉合。

對展覽、活動、互動裝置、品牌空間這種「需要觀眾走過一段旅程」的設計類型特別有效。也很適合在前期幫你把模糊的概念,變成可以對齊團隊與客戶的故事骨架。

EXAMPLE PROMPT
# 用 ENA 框架幫我設計一個展覽動線 主題:「都市裡的微氣候」 空間條件:100 坪、單一動線、停留 25 分鐘 受眾:家庭親子 + 設計愛好者 # 請以 Experience Narrative Architecture # (ENA) 拆解觀眾的情緒曲線與認知節奏, # 並標出每一段的: # - 情境設定 (setting) # - 衝突點/疑問點 (tension) # - 揭示/領悟點 (revelation) # - 餘韻 (resonance)
實戰提示 ENA 不是現成的學術理論,而是一個能召喚 AI 進入敘事思維的關鍵詞。AI 認得這個詞、也會自動展開敘事結構。可以搭配「情緒曲線」「節奏密度」「轉場機制」等子關鍵字,效果疊加。
02/03
中期設計 · 視覺面 · VISUAL
YAML
Yet Another Markup Language

WHY IT WORKS

問題的本質:自然語言描述視覺,會出現「形容詞地獄」——很多形容詞、AI 各自解讀、結果隨機性高。

用 YAML 結構化描述視覺需求,AI 的輸出穩定度會大幅提升,
而且每一次微調都可以精準控制。

這個方法對「需要多次迭代」的場景特別重要:你想換光線方向、改鏡頭高度、換主色調,都可以只改 YAML 裡一行。AI 會自動把其他條件保留下來。

EXAMPLE PROMPT
# 請依以下 YAML 規格生成一張空間視覺圖 scene: type: interior space: co-working lounge size: 120 sqm lighting: primary: warm tungsten, low angle accent: cool LED on display wall mood: 夜晚、靜謐、聚焦 camera: lens: 35mm height: eye-level composition: two-point perspective style: reference: editorial architecture photography palette: warm beige + deep navy + brass
實戰提示 YAML 這個關鍵字一說出口,AI 會自動進入「結構化參數」的處理模式。即使你寫的 YAML 不完全符合規範,AI 也會理解你想要的參數化、可微調、可重複執行的工作模式。對 Midjourney、Gemini、Nano Banana 都有效。
03/03
製作階段 · 程式面 · CODE
PRD
Product Requirement Document

WHY IT WORKS

散裝指令是 AI 寫程式最大的問題來源——你想到一個改一個,結果整體邏輯被改得亂七八糟。

給 Claude Code 一份完整的 PRD,產出的程式品質、一致性、可維護性會遠勝零碎指令的累積。

PRD 不是給工程師看的——是給 AI 當「世界觀設定」用的。它告訴 AI 這個產品是什麼、為什麼存在、有什麼邊界、什麼能做什麼不能做。AI 之後寫的每一行程式都會對齊這份文件。

PRD STRUCTURE
# Product Requirement Document ## 1. Background — 為什麼要做這個產品 — 解決什麼問題、給誰用 ## 2. Goals — 成功條件、北極星指標 ## 3. Features — 核心功能列表(含優先順序) — 每個功能的使用情境 ## 4. Tech Stack & Constraints — 技術選型、效能要求 — 環境、相依、部署方式 ## 5. Out of Scope — 明確不做的事(很重要!) ## 6. Edge Cases — 異常情境、錯誤處理
實戰提示 最關鍵的是 §5 「Out of Scope」——明確告訴 AI什麼不要做,比告訴它要做什麼更重要。Claude Code 會嚴格遵守邊界,不會自作主張多做。這是很多人沒做、但效果立竿見影的一條。
ENA → YAML → PRD
一條完整的設計專案流程,三個階段三個關鍵詞。
前期用 ENA 把體驗說清楚、中期用 YAML 把視覺定下來、製作用 PRD 把程式跑出來。
§ 06 / WHAT'S NEXT

未來Agent 之間。

下一個階段不是「換更強的 AI」,而是「多個 AI 之間怎麼串起來工作」。設計師要學的不再是單個工具,是工作流。

From tools
to agents. 從「用工具」到「派工」。

AI Agent 的真正意義不是「更聰明的對話框」,而是它可以自己讀檔、自己跑、自己改、自己交付。設計師的工作不再是「按按鈕」,而是「定義任務 → 派工 → 驗收」。

→ 01
多工具交互的工作流取代單一工具
譬如:Claude 寫腳本 → Midjourney 出分鏡 → Runway 動起來 → Suno 配樂 → Claude Code 整合成網頁。整條流水線都可以由 AI Agent 串接執行。
→ 02
設計師的核心能力轉變
技術門檻會被 AI 抹平,剩下的核心能力是提問品質、品味判斷、結構化思考、跨域整合。會不會用某個軟體已經不重要。
→ 03
「自然語言」變成新的設計語言
能不能把一個複雜的設計意圖,用語言精準地說給 AI 聽——這就是新的核心競爭力。今天分享的三個關鍵詞,就是這個能力的入門票。
— Designer's Role Shift —
The Doer 執行者
The Director 指揮者 + 品味守門員
§ END / CLOSING

Go try.
Today.

AI 不是用看的、不是用學的,是用試的。今晚回宿舍,挑一個你正在做的作業,把今天三個關鍵詞中的任何一個丟下去,看看 AI 給你的回應有什麼不一樣。

關鍵詞、提示語、結構化思考——這些東西不是設計工作的替代,是設計師接下來幾年最重要的新基本功