mcpField
A
ai-native-ux

ai-native-ux

github.com/refoundaiデザイン・UI1.4k384 回インストール15 週間前に更新
リポジトリ

ai-native-ux について

Lenny's Podcast と Newsletter の知見をもとに、AI ネイティブな UX 設計を支援するスキルです。AI の自律性と人間の制御、変動する出力への対応、修正しやすい自然言語インタラクションを扱います。

主な機能

  1. 01AI の自律性と人間の制御を設計
  2. 02非決定的な出力に対応する UI
  3. 03自然言語のインタラクションルール設計
  4. 04手軽な修正フィードバックの導入
  5. 05検証を経た段階的な自律性向上

活用シーン

  1. 01AI 機能の人間による確認範囲の設定
  2. 02誤りや変動のあるモデル応答への対応
  3. 03自然言語インターフェースの構造化
  4. 04ユーザーの作業を妨げないインライン提案

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/refoundai/lenny-skills --skill ai-native-ux

インストール後、Claude Code で/ai-native-uxを入力して読み込まれたか確認します。

同梱ファイルreferences/artifacts.mdreferences/guest-insights.md

詳細

AI ネイティブなユーザー体験の設計

静的なインターフェースから、モデルの知能を活用する、柔軟で意図に基づいたインタラクションへ移行します。

Lenny's Podcast と Newsletter に登場した14人のゲストや投稿から得た知見を活用し、AI ネイティブなユーザー体験の設計を支援します。

支援方法

  1. エージェンシーとコントロールのバランスを見極める - AI に自動化させるタスクと、人間による手動の監督が必要なタスクをユーザーが判断できるよう支援します。
  2. 非決定性を考慮して設計する - モデルの出力にばらつきがあることを考慮した UI パターンを作り、簡単に修正できる仕組みを提供します。
  3. 会話の文法を構成する - 自然言語インターフェースを予測しやすくする、目に見えないルールや構造化された要素の定義を支援します。
  4. フィードバックループを繰り返し改善する - ユーザーとのインタラクションに基づいてモデルのパフォーマンスを改善する、シンプルで頻度の高いフィードバックの仕組みを導入します。

核となる原則

流動的な意図に合わせて設計する

Aishwarya Naresh Reganti + Kiriti Badam:「多くの人は非決定性を見落としがちです。ユーザーがあなたのプロダクトをどう使うかも、LLM がどう応答するかも、分かりません。もう一つの違いは、エージェンシーとコントロールのトレードオフです。」

固定されたボタンやフォームから離れ、ユーザーが自然言語で意図を表現できるインターフェースへ移行します。そのためには、言語の柔軟性と従来の UI の精度とのトレードオフに対処する必要があります。

明確な意思決定の境界を定める

Adriel Frederick:「そして、うまくいかない理由は、アルゴリズムが長期的な影響を理解できないことが多く、人々がどう反応するかも、プロダクトに対するあなたの意図も理解できないからだと思いました。だからこそ、プロダクトマネージャーがその役割を担うことがとても重要だと思います。それが私たちの仕事です。アルゴリズムへの依存度が高いプロダクトに取り組むときは、アルゴリズムが担うべきこと、人間が担うべきこと、そして意思決定の枠組みを見極めるのがあなたの仕事です。」

どの意思決定をアルゴリズムに委ね、どの意思決定に人間の介入が必要かを明確に定めます。この枠組みにより、機械による最適化と人間の意図との隔たりを埋めます。

言語のための構造化された文法を作る

Aparna Chennapragada:「自然言語インターフェース。NLX は新しい UX です。プロダクトを作る人から、『そうですね。AI がプロダクトを飲み込んでしまう』という話をよく聞きます。だからといって、デザインが不要になるわけではありません。」

自然言語を使った体験を、すべてモデル任せにしてはいけません。デザイナーは、会議やポッドキャストなど特定のコンテキストに内在する、目に見えない UI の構成要素や文法を定義する必要があります。

簡単に修正できるようにする

Gustav Söderström:「AI DJ はボタンを押すと起動します。デジタル化された人物で、実在する X という人物をデジタル化したものです。AI として登場し、あなたの好きな音楽について話したり、おすすめしたりします。その音楽を聴くこともできます。気に入らなければ、また呼び出せばいいのです。すると、『分かりました。では、何年か前の夏に流行った曲を聴いてみましょう』とか、『昨日の「The Last of Us」のエピソードで話題になった新曲を紹介します』などと言ってくれます。」

AI の出力には本質的にばらつきがあるため、シンプルなフィードバックループを優先します。デジタル化されたペルソナや「助けを求める」ボタンを使って、AI の誤りを自然に修正できるようにします。

指示への追従を最適化する

Kevin Weil:「指示への追従は非常に優れています。実は、これに気づき始めた人がいると思いますが、とても複雑なこともできます。2枚の画像を見せることもできます。1枚はリビングルームの写真で、もう1枚は、そこに置きたい写真や記念品などをたくさん集めたものです。そして、『これらをどう配置するか教えて』と頼むのです。」

単純なコマンドから、複雑な複数ステップの指示へとインタラクションのパターンを移行します。マルチモーダルな入力に対するモデルの推論能力を活用できるよう、UX を設計します。

エージェンシー制御の段階を踏んで拡張する

「AI プロダクトに異なる開発ライフサイクルが必要な理由」より:「まず、制御性が高く、エージェンシーが低い機能群を特定します(上の画像のバージョン 1)。これらの機能は、小さく、テスト可能で、観察しやすいものにする必要があります。そこから、エージェンシーを一度に 1 バージョンずつ段階的に高めながら、これらの機能を時間とともにどう進化させるかを考えます。」

リスクの低い環境でパフォーマンスを確認してから、AI の自律性を高めてください。制御性の高い機能から始め、壮大なエージェントの目標を、小さくテスト可能な動作に分解します。

ユーザーのフロー状態を維持する

Ryan J. Salva:「エディターで作業しているとき、それは VS Code かもしれませんし、IntelliJ かもしれません。あるいはそれらかもしれません。基本的に、入力中に Copilot が、通常は斜体のグレーのテキストで提案を表示します。これは、あなたがおっしゃるとおり、推測できる内容が本当に魔法のようです。」

斜体のグレーのテキストのような、作業を妨げない手がかりを使って、AI の提案を既存のツールに直接統合します。これにより、ユーザーの創作の勢いを損なわずに AI が支援できます。

テンプレートとフレームワーク

  • NLX(自然言語エクスペリエンス)のデザイン要素(Aparna Chennapragada) - 会話型 AI インターフェースで明示的に設計する必要がある、目に見えない UI 構造の一群です。
  • AI がピクセルを無料にする(Sam Schillace) - インターネットが情報の配信を無料にしたように、AI はピクセルの生成を無料にし、静的なアプリから動的なものへとソフトウェア業界全体を変革します。
  • フォールトトレラントなユーザーインターフェース(Gustav Söderström) - 基盤となる機械学習モデルのエラー率に対応できるよう UI を構築する、AI プロダクトの設計原則です。
  • Canva Magic Media の UX の進化(AI プロダクト構築における逆説的なアドバイス) - Canva がテキストから画像を生成する AI 機能を反復改善し、プロンプト欄が空であることへの抵抗感を減らし、ユーザーをより良い結果へ導いた方法です。
  • AI エージェント向けのリスクを抑えるデザインパターン(AI エージェントでプロダクトマネジメントを再び楽しく) - 利点を保ちながら AI エージェントのミスによるリスクを抑える 4 つのパターンで、あらゆるエージェントの設計に適用できます。
  • AI の提案における 200 ミリ秒の最適なレイテンシ(Ryan J. Salva) - 開発者のフロー状態を維持するための、インライン AI コード提案における最適な応答時間です。
  • AI ペアプログラマーとしての位置付け(Ryan J. Salva) - AI コーディングツールの倫理面および UX 面の意思決定を導くために使われる、プロダクトのペルソナ/メタファーです。

詳細を含む完全なリストは references/artifacts.md をご覧ください。

ユーザーを支援するための質問

  • 「このワークフローにおける、人間の制御と AI のエージェンシーの現在の内訳はどうなっていますか?」
  • 「モデルが誤った回答や信頼度の低い回答をした場合、インターフェースはどのように対処しますか?」
  • 「ユーザーが空のプロンプト欄から先に進めるよう、十分な視覚的手がかりを提供していますか?」
  • 「この会話を構造的で有用なものにするには、どのような目に見えない UI 文法が必要ですか?」
  • 「ユーザーのフロー状態を維持できるだけの速さで AI の応答が返ってきますか?」
  • 「ユーザーが作成したコンテンツと、AI が生成した提案をどのように区別していますか?」

よくある指摘事項

  • 空のプロンプトの罠 - 視覚的な出発点やガイド付きの選択肢を用意せず、ユーザーが何を入力すべきか正確に把握していると期待すると、ユーザーは身動きが取れなくなります。
  • 硬直した UI の作り込みすぎ - モデル機能に合わせて特定の UI 要素をハードコーディングすると、プロダクトは脆弱になり、急速な AI の改善に追いつけなくなります。
  • ブラックボックス化した自律性 - 人間が介在する制御を早い段階で設けずに AI のエージェンシーを高めると、デバッグが不可能になり、エラー発生時にユーザーの信頼を損ないます。
  • 非決定性を無視する - AI を固定された意思決定エンジンのように扱うと、モデルが必然的に多様な結果を出した際に、ユーザーエクスペリエンスが破綻します。

詳細

14 名のゲストから得た、情報源付きの 14 件のインサイトすべてについては、references/guest-insights.md をご覧ください。

関連スキル

  • AI プロダクト戦略
  • AI 評価

コメント