<!doctype html>
<!--
MIT License
Copyright (c) 2026 tee business insights

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>依目的尋找</title><style>*{box-sizing:border-box}body{margin:0;background:#fff;color:#183b32;font:16px/1.7 system-ui,sans-serif}main{max-width:640px;padding:26px;margin:auto}h1{font-size:27px;line-height:1.4;margin:0 0 15px}p{font-size:14px}label{font-size:13px;font-weight:650}input,select,button{font:inherit;color:inherit;min-height:44px;padding:10px 12px;border:1px solid #bac7b9;background:white;border-radius:5px;max-width:100%}input,select{display:block;width:100%;margin:8px 0 15px}button{cursor:pointer}button:hover{background:#f1f5e9}:focus-visible{outline:3px solid #a44200;outline-offset:3px}ul{list-style:none;padding:0;margin:0}li button{width:100%;text-align:left;margin:4px 0}output{display:block;background:#eaf3d9;padding:16px;margin:16px 0;min-height:55px;overflow-wrap:anywhere}[hidden]{display:none!important}.muted{color:#50665a;font-size:12px}</style></head><body><main><h1>依目的尋找</h1><label for="q">輸入目的<input id="q" type="search"></label><p class="muted">搜尋僅在此範例內進行。</p><ul id="items"><li><button type="button">整理行程</button></li><li><button type="button">尋找資料</button></li><li><button type="button">比較候選</button></li></ul><p id="none" hidden>沒有符合條件的候選。請縮短搜尋詞或重設條件。</p><button id="reset" type="button">重設條件</button><output id="result" aria-live="polite">選擇的目的</output></main><script>const q=document.getElementById('q'),items=[...document.querySelectorAll('#items li')];function search(){let n=0;for(const x of items){x.hidden=!x.textContent.toLocaleLowerCase().includes(q.value.trim().toLocaleLowerCase());if(!x.hidden)n++}document.getElementById('none').hidden=n>0}q.addEventListener('input',search);document.getElementById('reset').onclick=()=>{q.value='';search();q.focus()};for(const x of items)x.querySelector('button').onclick=()=>document.getElementById('result').textContent=x.textContent;</script></body></html>

複製製作提示

以此原創UI為起點，釐清使用者、工作、輸入、結果與失敗時的復原方式，製作適合我網站的HTML/CSS/JS。未經許可不要轉用外部圖片或程式碼，並檢驗鍵盤、320px寬度、空結果與錯誤狀態。

原創UI程式碼採MIT授權。請保留著作權及授權聲明。此授權不涵蓋參考網站的商標、圖片或程式碼。 MIT

04 / TBI UI Research

把研究、文章與UI變成可重複的流程。

TBI UI Research是AI代理的製作流程，串聯跨領域研究、來源與權利紀錄、原創文章、可操作UI及驗證。下方提供指示、目錄、Python腳本及HTML素材。

技能本文與初始目錄為日文。可以要求其他語言的輸出，但仍需檢查翻譯品質。不包含外部服務憑證或付費使用權。

開啟下方檔案清單，將SKILL.md及其參考資料交給代理。
依相同相對路徑存入相容代理的技能資料夾。僅儲存檔案不一定會自動啟用。
例如：『使用TBI UI Research製作旅遊比較UI及附來源的文章。』並指定輸出語言及技術。

公開技能檔案

UI Fieldnotes網頁UI研究筆記

尋找案例

01 / 尋找

02 / 比較與決定

03 / 追溯依據

04 / 檢查實作

先試用小範例，再帶走原始碼。

依目的尋找

把研究、文章與UI變成可重複的流程。

來源與標準