<h1>WebConf Taiwan <br> 2025 共筆文件</h1>

<h2>🚩 2025 議程資訊</h2>
<ul>
<li>
<a href="/9SP9NyHoSiSZEOYHsaeYeg">議程總覽</a>
</li>
<li>
<a href="https://webconf.tw/agenda">官網 - 議程頁面</a>
</li>
<li>
<a href="/rolzpiEAQIizzPoepklJDA">常見 FAQ</a>
</li>
</ul>

<h1>12/12(五)<br>第一天議程</h1>

## 9:10 - 9:55

<ul>
<li>
<a href="/f1Eeu9_HTWKIey9mRPBr0A" title="B2B 服務的 AI Agent 產品設計原則">
<p class="location">■ M 棟(F 棟 及 A2 棟聯播)</p>
<p class="title">B2B 服務的 AI Agent 產品設計原則</p>
<p class="name">李昆謀</p>
</a>
</li>
</ul>

## 10:05 - 10:50

<ul>
<li>
<a href="/Mwd6YO29QPWRcI1WL15hkA">
<p class="location">■ M 棟</p>
<p class="title">SaaS 的下一步：從 Service 到 Agent 的轉移</p>
<p class="name">安德魯</p>
</a>
</li>
<li>
<a href="/P_fzeqGpTtuUPAxyFjgGMg">
<p class="location">■ F 棟</p>
<p class="title">不寫 JS 也有行雲流水的前端體驗，AI 時代後端工程師的心流開發禪境</p>
<p class="name">蘇泰安 taiansu</p>
</a>
</li>
<li>
<a href="/0ZYi_FmHR2inDtB2n_0myw">
<p class="location">■ A2 棟</p>
<p class="title">AI 時代下， Product sense 就是你的秘密武器</p>
<p class="name">陳偉仁 & 黃庭亞</p>
</a>
</li>
</ul>

## 11:00 - 11:45

<ul>
<li>
<a href="/SsKHqlcXSaqzzoyt-peN7Q">
<p class="location">■ M 棟</p>
<p class="title">AI 只懂 React？Vue.js 也能 Vibe Coding！</p>
<p class="name">Kuro Hsu</p>
</a>
</li>
<li>
<a href="/0htyId3jRK-S9VwkmCCI6Q">
<p class="location">■ F 棟</p>
<p class="title">走在同業前面：國泰的雲端轉型洞察與啟示</p>
<p class="name">顏勝豪 Otto</p>
</a>
</li>
<li>
<a href="/WS10vh3_RhGEZP_oxRhZTg">
<p class="location">■ A2 棟</p>
<p class="title">AI 時代下， 如何運用數據幫助產品發揮影響力</p>
<p class="name">姜乃文</p>
</a>
</li>
</ul>

## 11:55 - 12:40

<ul>
<li>
<a href="/-t3mvRGiRoizPulH60pUVQ">
<p class="location">■ M 棟</p>
<p class="title">零基礎打造400萬用戶，我們犯了哪些錯誤</p>
<p class="name">Max Chen</p>
</a>
</li>
<li>
<a href="/_KlVlnVMSiSJiFx49_xaEg">
<p class="location">■ F 棟</p>
<p class="title">AI 時代的 Legacy Code 營救術</p>
<p class="name">墨嗓 (陳佑竹)</p>
</a>
</li>
<li>
<a href="/QDwUTTExT3WUzBVZT8pLqQ">
<p class="location">■ A2 棟</p>
<p class="title">產品 OKR 的訂立與 Roadmap 展開</p>
<p class="name">曾友志</p>
</a>
</li>
</ul>

<h2>午餐時間</h2>

## 13:30 - 14:15

<ul>
<li>
<a href="/F-wffnfCTey4vhubxuzwoA">
<p class="location">■ M 棟(F 棟聯播)</p>
<p class="title">深入淺出 Playwright Agent 代理人模式</p>
<p class="name">保哥 Will</p>
</a>
</li>
<li>
<a href="/oqabFcWgRjmeNpvFr2WktQ">
<p class="location">■ A2 棟</p>
<p class="title">當 Product Mindset 走出產品設計：跨界的設計影響力</p>
<p class="name">周明璇（小紫）</p>
</a>
</li>
</ul>

## 14:25 - 15:10

<ul>
<li>
<a href="/As_KKwO0TuyxwLxj77C67Q">
<p class="location">■ M 棟</p>
<p class="title">AI 時間槓桿賦能之術 - 全端工程師獨自升級全記錄</p>
<p class="name">馮元詰</p>
</a>
</li>
<li>
<a href="/bri1B6QHQ023CtEaYiapSA">
<p class="location">■ F 棟</p>
<p class="title">工程師和 AI 小隊，是合作、競爭、混亂？</p>
<p class="name">蕭晊莛</p>
</a>
</li>
<li>
<a href="/YvefgartQm2ae2UkCcYP3w">
<p class="location">■ A2 棟</p>
<p class="title">從研究到上線：全流程設計與 AI 協作專案實戰</p>
<p class="name">Niki Liu</p>
</a>
</li>
</ul>

## 15:20 - 16:05

<ul>
<li>
<a href="/L7K5cx2dT-2FMO6mVq8KZA">
<p class="location">■ M 棟</p>
<p class="title">從使用者到工程師：AI 在企業怎麼落地？</p>
<p class="name">黃琇琳 Shirney Huang</p>
</a>
</li>
<li>
<a href="/JvkL07H2Qget8PAil8laFw">
<p class="location">■ F 棟</p>
<p class="title">React 優化實戰分析 - 掌握 React 進階技術 x 底層思維</p>
<p class="name">ThisWeb (Kun)</p>
</a>
</li>
<li>
<a href="/PoQmKw5rRleq27zoJr7CAw">
<p class="location">■ A2 棟</p>
<p class="title">從設計到共識：悠識如何在每一次新專案裡，用溝通建立信任關係</p>
<p class="name">林星妤 & 黃明硯</p>
</a>
</li>
</ul>

## 16:15 - 17:00

<ul>
<li>
<a href="/USfVXCkBSuGhQ6Xlb5135w">
<p class="location">■ M 棟</p>
<p class="title">對微前端的美好想像</p>
<p class="name">Eric Lee</p>
</a>
</li>
<li>
<a href="/wVkrSNJBSr-yBIycrXyAxw">
<p class="location">■ F 棟</p>
<p class="title">寫了幾年 Code，然後呢？軟體工程師必須重新認識的 DevOps</p>
<p class="name">陳正瑋（艦長）</p>
</a>
</li>
<li>
<a href="/cAduwH_fSHSxpx7QCBm-Dw">
<p class="location">■ A2 棟</p>
<p class="title">敏捷環境中的產品經理生存之道：以產品思維實現價值與成果</p>
<p class="name">Jenson Lee</p>
</a>
</li>
</ul>

<h1>12/13(六)<br>第二天議程</h1>

## 09:00 - 09:45

<ul>
<li>
<a href="/kqRzuYEES9-RuzuW0FLsBg">
<p class="location">■ M 棟(F 棟聯播)</p>
<p class="title">從冷知識到漏洞：你不懂的 Web，駭客懂</p>
<p class="name">Huli</p>
</a>
</li>
<li>
<a href="/jP1Q9WMRQcato0NfVhuFPw">
<p class="location">■ A2 棟</p>
<p class="title">掌握田野中的「人」：真實場域研究的人際溝通與信任建立</p>
<p class="name">Joey</p>
</a>
</li>
</ul>

## 10:00 - 10:45

<ul>
<li>
<a href="/NUZS5tIHTZeigWSdi3yscg">
<p class="location">■ M 棟</p>
<p class="title">讓 CSS 動畫提升你的網站使用者體驗</p>
<p class="name">李建杭 Amos</p>
</a>
</li>
<li>
<a href="/zzUicm2hQGKO2STDK17OIA">
<p class="location">■ F 棟</p>
<p class="title">如何做到真正有效的技術領導：實用技巧篇</p>
<p class="name">Jocelin Ho</p>
</a>
</li>
<li>
<a href="/igKDMdODQeW8iC-8TAQ68A">
<p class="location">■ A2 棟</p>
<p class="title">別再瞎忙了！讓 AI 幫產品團隊找到對的問題</p>
<p class="name">Peter Su</p>
</a>
</li>
</ul>

## 10:55 - 11:40

<ul>
<li>
<a href="/Xk-UXerOTsaXSoZ_npekew">
<p class="location">■ M 棟</p>
<p class="title">鍵盤救國：解決社會性問題的工程師</p>
<p class="name">吳展瑋</p>
</a>
</li>
<li>
<a href="/Tle_Ecv6TjOKnL7UPhcpZg">
<p class="location">■ F 棟</p>
<p class="title">軟體開發邪教的救贖：AI 時代更應掌握的 TDD 技能</p>
<p class="name">Kuma Syu</p>
</a>
</li>
<li>
<a href="/sy2d2KQqQSi4hNDd_z1_6A">
<p class="location">■ A2 棟</p>
<p class="title">以打詐為例，服務設計如何讓公共數位服務有感</p>
<p class="name">卓致遠</p>
</a>
</li>
</ul>

## 11:50 - 12:35

<ul>
<li>
<a href="/_JH43d8-R2KbcfRn-e8Z-g">
<p class="location">■ M 棟(F 棟 及 A2 棟聯播)</p>
<p class="title">GenAI 時代下的測試三板斧</p>
<p class="name">柯仁傑</p>
</a>
</li>
<li>
<a href="/pdw4NCDAQCmrxrnF2bnW9Q">
<p class="location">■ F 棟</p>
<p class="title">願 Web API 原力與你同在</p>
<p class="name">MUKI</p>
</a>
</li>
<li>
<a href="/GZSiZtrVTlC2kgGJl1ifdQ">
<p class="location">■ A2 棟</p>
<p class="title">服務設計師的傳說：90%的時間在讓設計發生</p>
<p class="name">郭心喻</p>
</a>
</li>
</ul>

<h2>午餐時間</h2>

## 13:30 - 14:15

<ul>
<li>
<a href="/jioJQzn_SlyxNCTzy9nCvQ">
<p class="location">■ M 棟(F 棟聯播)</p>
<p class="title">實戰 AI Agents 應用開發：從 Web 後端到前端的整合</p>
<p class="name">張文鈿 ihower</p>
</a>
</li>
<li>
<a href="/oS17an7xTHCkGvQ_5P_L4g">
<p class="location">■ A2 棟</p>
<p class="title">培養十倍速 PM：從工具到習慣</p>
<p class="name">趙柏強</p>
</a>
</li>
</ul>

## 14:25 - 15:10

<ul>
<li>
<a href="/obwkZkiMSeuZ4ATdFKsMLg">
<p class="location">■ M 棟</p>
<p class="title">程式碼與尿布：媽媽工程師的生存指南</p>
<p class="name">Hannah Lin</p>
</a>
</li>
<li>
<a href="/XhOqBzgbS7iZ6Aq91jrZFw">
<p class="location">■ F 棟</p>
<p class="title">從 Side Project 到開源生態：FinMind 的資料工程之路</p>
<p class="name">林子軒 Sam</p>
</a>
</li>
<li>
<a href="/wedbmdbOTc-DS2iPlBIMcQ">
<p class="location">■ A2 棟</p>
<p class="title">轉職 PM 之後，我獨自升級：為產品開發世界獻上美好洞察</p>
<p class="name">Kaba Su</p>
</a>
</li>
</ul>

## 15:20 - 16:05

<ul>
<li>
<a href="/7P91IEqISW6UIiS1z2s-9Q">
<p class="location">■ M 棟</p>
<p class="title">大 AI 時代，工程師的成長之路 - 從 Junior 到 Staff</p>
<p class="name">奶綠茶</p>
</a>
</li>
<li>
<a href="/O_bBsYiqTHysuP27CMdbwQ">
<p class="location">■ F 棟</p>
<p class="title">初探 LLM 可觀測性：打造可持續擴展的 AI 系統</p>
<p class="name">Mike Hsu</p>
</a>
</li>
<li>
<a href="/juVi5KKHQb-txmkJ8grtCg">
<p class="location">■ A2 棟</p>
<p class="title">座談｜從設計到產品管理：AI 浪潮下的角色轉變與價值重構</p>
<p class="name">蔡明哲 & 趙柏強 & Kaba Su</p>
</a>
</li>
</ul>

## 16:15 - 16:30

<ul>
<li>
<a href="/IKqR_MCoT4WUx-y0AY_06w">
<p class="location">■ M 棟(F 棟 及 A2 棟聯播)</p>
<p class="title">軟體工程不只是寫程式</p>
<p class="name">李智樺</p>
</a>
</li>
</ul>

## 16:30 - 17:15

<ul>
<li>
<a href="/YYImx_ddQwSqvh496J6e0A">
<p class="location">■ M 棟(F 棟 及 A2 棟聯播)</p>
<p class="title">活在科技工作者最好的年代，用商業思維優化你的人生選擇</p>
<p class="name">游舒帆</p>
</a>
</li>
</ul>

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

/* CSS 變數 */
:root {
--fs1: 12px;
--fs2: 16px;
--fs3: 20px;
--fs4: 24px;
--fs5: 28px;
--main-color: #E6E6E6;
--webconf-blue: #002EFF;
--webconf-black: #1C1C1C;
--webconf-frame: rgba(230, 230, 230, 0.5)
}

/* 整個側邊欄(包含上面鉛筆 nav 區域) */
.summary{
background-color: var(--webconf-black);

/* 淺色模式背景覆蓋 */
& .nav>li>a:hover, & h2.collapsible:hover, & .nav-pills>li.active>a, & .nav-pills>li.active>a:focus, & .nav-pills>li.active>a:hover, & .nav-pills>li.active>a:hover{
background-color: #3F3F46;
}
}

/* 通用樣式 */
#summary{
/* 卷軸樣式*/
scrollbar-width: thin;

&::-webkit-scrollbar {
width: 8px;
height: 8px;
}

&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}

& *{
font-family: "Noto Sans TC", sans-serif;
font-size: var(--fs2)
line-height: 1.2;
letter-spacing: 0.02em;
color: var(--main-color);
}

& h1{
font-size: var(--fs3);
text-align: center;
display: block;
line-height: 1.5;
padding: 12px 0;
margin: 12px 0;
}

& h2{
font-size: var(--fs2);
}

}

/* 主標題 WebConf 2025 */
#summary {
& > h1 {
position: relative;
border-bottom: 1px solid var(--main-color);
transition: color 0.5s ease;
}

& > h1:not(:first-child){
border-top: 1px solid var(--main-color);
}

& > h1::before,
& > h1::after{
content: '';
position: absolute;
inset: 0;
background-position:
top 12px left 4px,
top 12px right 4px,
bottom 12px left 4px,
bottom 12px right 4px;
background-size: 12px 12px;
background-repeat: no-repeat;
transition: opacity 0.5s ease;
}

& > h1::before {
opacity: 1;
background-image:
linear-gradient(white, white),
linear-gradient(white, white),
linear-gradient(white, white),
linear-gradient(white, white);
}

& > h1::after {
background-image:
linear-gradient(var(--webconf-blue), var(--webconf-blue)),
linear-gradient(var(--webconf-blue), var(--webconf-blue)),
linear-gradient(var(--webconf-blue), var(--webconf-blue)),
linear-gradient(var(--webconf-blue), var(--webconf-blue));
opacity: 0;
}

& > h1:hover {
color: var(--webconf-blue);
}

& > h1:hover::before {
opacity: 0;
}
& > h1:hover::after {
opacity: 1;
}

& > h2:not(.collapsible){
align-items: center;
justify-content: center;
}
}

/* 議程列表樣式 */
#summary ul:has(.location){
display: flex;
flex-direction: column;
gap: 1rem;
}

/* 每個議程項目 */
#summary li{
border-left: 1.5px solid var(--webconf-frame);

/* 設定方格動畫 */
a:has(.location){
position: relative;
padding: 14px;

&:before{
content: '';
position: absolute;
inset: 0;
transform: scale(0);
transform-origin: left top;
background-color: var(--webconf-blue);
transition: transform 0.3s ease;
z-index: 1;
}
& :is(.location, .title, .name){
position: relative;
z-index: 2;
}

&:hover::before{
transform: scale(1);
}

&:hover{
background-color: transparent;
}
}

/* 議程項目段落設定 */
p{
color: white;
font-weight: 600;
}

& .location{
padding-bottom: 8px;
border-bottom: 0.5px solid var(--webconf-frame);
}

& .name{
color: var(--main-color)
}

&.active a:has(.location)::before{
transform: scale(1);
}
}

</style>