<!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="ja"><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まで、再利用できる手順に。

出典と基準