TypeUIマイクロインタラクション：113のAI対応UIインタラクションプロンプト（Show HNレビュー）

TypeUIは、113のインタラクティブなUIマイクロインタラクションパターンのカタログを公開しました。各パターンには、AIコーディングアシスタントに渡すことを想定したコピー可能な実装プロンプトが付属しています。Show HNの投稿は50ポイントと20コメントに達し、議論の主なテーマは、例は有望に見えるものの、デザイン重視の製品に期待される洗練度が欠けた状態で出荷されているというものでした。

カタログはtypeui.sh/micro-interactionsにあり、12のコンポーネントカテゴリに整理されています。これはコンポーネントギャラリーであると同時にプロンプトライブラリでもあります。各エントリはライブの動作を表示し、コピー用の実装プロンプトを提供します。

TypeUIのマイクロインタラクションライブラリの実際の内容

TypeUIのマイクロインタラクションページには、UIサーフェスごとにグループ化された113のインタラクティブな例がリストされています。各例はライブプレビューと、実装を生成するためのコピー可能なプロンプトを提供し、「TypeUI Creative」という名前で販売されています。

ページ上の12のカテゴリは以下の通りです：

ボタン — 確認、元に戻す、コピーフィードバック、ローディング状態、アップロード進捗。1.2秒間の長押し確認パターンを含みます。
入力 — パスワード表示、自動保存、検証、フォーマット、文字数カウント、提案。「gmail.comをお試しですか？」と提案するメールドメイン提案や、Caps Lock検出トグルを含みます。
選択コントロール — 設定を表示したり、合計を更新したり、結果をフィルタリングしたり、アクションを有効/無効にしたりするチェックボックス、トグル、ラジオボタン（例：読み取り、編集、管理の権限ラジオ）。
モーダル — 確認、検証、ドラッグによる閉じる、未保存の変更の処理。キーボードフォーカスの保持に重点を置いています。
ドロワー — エッジジェスチャ、リンクされた背景、ポインタとキーボードの代替手段を備えた拡張パネル。
ツールチップ — ホバーカード、リンクプレビュー、共有ホバー遅延。
トースト — 元に戻すアクション、非同期結果、スワイプで閉じる。
ステップナビゲーション — 進捗、検証、完了したステップへの戻り、残り時間（例：「残り時間2分」）。
リスト — 並べ替え、ピン留め、アーカイブ、挿入、アイテムのプレビュー。
スライダー — 範囲選択、スナップポイント、ツールチップ、スクラブ、前後比較。0、25、50、75、100の定義された停止点を含みます。
カード — 詳細の展開、コンテンツの反転、アクションの表示、スワイプ、共有要素のトランジション。

コメント投稿者はパターンが有用だが本番環境対応ではないと確認

実際に例をテストしたHacker Newsのコメント投稿者は、スタイル上の意見の相違ではなく、具体的な動作バグを報告しました。これにより批判は異常に具体的なものになっています。

コメント投稿者のpftburgerは、いくつかのエフェクト（アクションスライドアウト、ウォールリビール、スライドオフリビール）を賞賛し、その後で欠陥を列挙しました：

スワップアイコン状態テーマプレビュースイッチャーは、要素の明るさを一緒にフェードさせるのではなく、カスケードさせます。

確認リビールは、3回目または4回目のクリックごとにスプリングに何か問題があります。これは奇妙です。

カード：スタックされたデッキサイクル。次へをクリックしても、一番上のカードが描画されません。

共有要素の展開オプション：最小化すると、スプリングの減衰によりコンポーネントがコンテナの外に押し出されます。

スワイプで閉じると、コンテナに一時的にスクロールバーが表示されます。

コメント投稿者のcosmoticは、最初のいくつかの例で3つのインタラクションデザインの問題を指摘しました：

ハートのトグルアニメーションは、追加と削除で同じ方向に動きます（混乱を招く）

長押しトリガーのインジケーターがタッチスクリーンで指に覆われる

削除ボタンの確認は、ダブルクリックで誤って確認される可能性があります

指で覆われる問題はタッチエルゴノミクスの問題です。進行状況インジケーターをユーザー自身の指先の下にレンダリングする長押し確認アフォーダンスは、ジェスチャーが進行している間、進行状況を伝えることができません。

最も厳しい評価はxhaydenからのもので、カタログがAIモデルがワンショットで生成できないものを実証しているかどうかを疑問視しました：

これらの多くはかなり未完成で、あまり一貫性を持ってデザインされていないようです。Opus 5.5にこれらのコンポーネントのほとんどを作るように指示すれば、ワンショットで生成できると思います。

そのコメントはまた、2つのプロダクトデザインのポイントを提起しました。第一に、検証コードの例は数字間の遷移をアニメーション化しますが、チェックアイコンの更新はアニメーション化しません。第二に、自己紹介の文字数カウンターは、制限を超えて20文字しか入力できません。xhaydenはこれが目的を無効にすると主張しました。オーバーフローカウンターのポイントは、ユーザーが全文を入力してから編集して減らすことです。コメントはまた、プロンプトをコピーするにはアカウントの作成が必要であり、カスタマイズオプションを説明する明確な経路がないことにも言及しました。

Fe2O3はマーケティングの枠組みに言及し、shadcnから引用された「最近使用したリソースの1つです」という推薦文が、その仕事全体が視覚的な洗練であるカタログにとって奇妙なトップラインの推薦であると観察しました。

すべてのコメントが批判的だったわけではありません。cpan22は単に「これらは素晴らしく見えます」と書きました。

価格とアクセスが精査された

2人のコメント投稿者がプロンプトへのアクセス価格を引用しましたが、彼らが挙げた数字は互いに一致しないため、どちらも公式な数字として扱うべきではありません。

tintorはオファーを「ウェブページのボタンに月30ドル？」と要約しました。
xhaydenは「最低月10ドル」を引用し、多くの無料コンポーネントサイトが同等の出力を提供すると主張しました。

コメント投稿者のjonshariatはビジネスモデルについて実用的な質問を提起しました。パターンが公開ブラウザでレンダリングされる場合、エージェントはおそらくそれらを検査して再現できるため、TypeUIのMCP統合を使用することで、プレビューをスクレイピングするよりも測定可能なほど優れた出力が得られるのでしょうか？カタログページ自体は、MCPのセットアップやプロンプトのカスタマイズオプションを文書化していません。

代替ワークフロー：構造化デザインツールとエージェント

コメント投稿者のtotetsuは、プロンプトカタログではなく、構造化デザインツールとエージェントアクセスを組み合わせた競合アプローチを説明しました。このセットアップは、PenpotをFly.ioで実行し、MCPサーバーとブラウザ使用ツールに接続し、生成されたPNGをSVGに変換するための画像生成とコード実行を追加します。述べられた目標は、「構造化されたUIデザインツールと、柔軟で適応性のあるチャットインターフェースの両方の長所を得る」ことです。

これはスレッドが浮き彫りにする中核的なアーキテクチャの緊張関係です。113の厳選されたプロンプトの固定カタログは一貫性を提供しますが、カスタマイズを制約します。一方、実際のデザインツールを駆動する汎用エージェントは柔軟性を提供しますが、コンポーネントごとの品質の保証はありません。

知っておく価値のあるクロスプラットフォームのアニメーションに関する注意点

あるコメント投稿者、deburoは、アニメーションがぎこちなく見えるという主張に反論し、その問題をChromeがCSSのprefers-reduced-motionメディア機能をWindowsの「アニメーション効果」アクセシビリティ設定にマッピングする方法に帰しました。Windowsでアニメーション効果を無効にしたユーザーは、副作用としてウェブ上でモーションが減少または欠落するのを見ることになり、これは意図的なアクセシビリティ動作ではなく、壊れたコンポーネントのように見える可能性があります。

ディスパッチの要約

TypeUIのマイクロインタラクションライブラリは、113のUI動作パターンを、ボタン、入力、選択コントロール、モーダル、ドロワー、ツールチップ、トースト、ステップナビゲーション、リスト、スライダー、カードにわたるコピー可能なAI実装プロンプトとしてパッケージ化しています。Hacker Newsの反応は、コンセプトを価値あるものとし、実行を未完成と見なし、特定のスプリングとレイアウトのバグ、タッチターゲットの見落とし、検証コードや文字数カウンターなどの例における状態カバレッジの不整合、そしてプロンプトの前にある価格の壁を挙げました。