AI エージェントがインタラクティブな UI を返すことを可能にする MCP UI
TypeScript SDK を使用して MCP UI を実装する MCP UI では TypeScript と Ruby の SDK が提供されています。ここでは TypeScript SDK を使用します。サーバー向けの SDK とブラウザ向けの SDK がそれぞれ提供されています。 @mcp-ui/server - npm: MCP の Resource を実装するためのヘルパー関数を提供する @mcp-ui/client - npm: インタラクティブな UI コンポーネントを提供する. React コンポーネントと Web コンポーネントの両方が提供される。 まずはサーバー側の実装から始めましょう。MCP サーバーの実装として Cloudflare が提供する agents パッケージを使用します。agents パッケージは Streamable HTTP を使用したリモート M
MCP-UI
⚛️ Client SDKProvides a React component and Web Component for easy frontend integration. Render interactive UI resources and handle UI actions effortlessly. 🛠️ Server SDKsPowerful utilities to construct interactive UI for MCP servers. Create HTML, React, Web Components, and external app UI with ergonomic APIs for Typescript and Ruby.
【コピペOK】個人開発でApple風デザインルールを作ったら統一感のあるカッコいいUIにできた話 - Qiita
こんにちは、とまだです。 先日、こんな記事を書かせていただきました。 【AI 駆動開発】Cursor を使いこなして 1 ヶ月でプログラミング学習サイトを作ったのでノウハウを伝えたい Cursor と Claude を使った AI 駆動開発で、1 ヶ月でプログラミング学習サイトを作ったという内容でした。 おかげさまで多くの方に読んでいただけたようで、お役に立てて嬉しいです。 ただ、前回の記事では 「デザインの統一感で苦労した」 という反省点もお伝えしていました。 今回はその続編として、Apple 風のデザインルールを策定することで UI 調整が劇的に改善した 経験をお伝えしたいと思います。 ※「デザインルール」「デザインルール」「デザインシステム」など、同じような意味で使われる言葉ですが、ここでは「デザインルール」と呼ぶことにします。 この記事でわかること Claude を使ったデザインル
Streaming UIプラクティス
アプリケーションユーザーにとってパフォーマンスとは、特定の指標に基づいて判断される定量的なものだけでなく、アプリケーションの総合的な体験を通じて感じる定性的なものでもあります。そのため、ユーザーがアプリケーションを「遅い」と感じる要因は様々です。 Googleは以前より、ユーザー中心のパフォーマンスを提唱しています。Core Web Vitalsは、ユーザーが感じるパフォーマンスを定量的に計測するために作成された指標群で、現在最も重要なパフォーマンス指標の一つです。しかし、Core Web Vitalsだけではパフォーマンスに関するUXの全てを網羅できるわけではありません。Core Web Vitalsの改善は重要ですが、最終的にはUX全体を最適化することが必要です。 本稿では、ページ読み込み時に「遅い」という印象をユーザーに与えないために筆者がよく用いるStreaming UIとそのプラ
たった20秒でUIデザイン完成？Googleの新AIツール「Stitch」をさっそく使ってみた！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Google I/O 2025が、5月20日（火）と21日（水）の2日間にわたって開催されましたが、皆さんはご覧になりましたか？ Googleは「Gemini 2.5 Pro」や「AIモード」など、多くの新機能や製品を発表し、大盛り上がりのイベントとなりました！ I/Oの基調講演の最後には、CEOのスンダー・ピチャイ氏が、講演中に「AI」や「Gemini」という言葉がどれだけ発言されたかを示す「AIカウンター」を披露するほど、今回のGoogle I/Oの主役は間違いなくAIでした。 この記事では、そんなGoogle I/Oで発
Google、WebUIの自動生成ツール「Stitch」をベータ公開。自然言語で指示するとHTML/CSSを生成
Googleは日本時間5月21日未明に開幕した年次イベント「Google I/O 2025」で、自然言語で指示を入力すると自動的にWeb UIを生成するツール「Stitch」のベータ公開を発表しました。 StitchはもともとGalileo AI社が提供する同名の「Galileo AI」と呼ばれるサービスでした。これをGoogleが買収し、Geminiをベースにしたサービスにしたものと言えます。 Stitchのデモ画面 下記がStitchの画面です。左側に例（Examples）が並び、右側にはプロンプトの入力欄があるというシンプルなものです。 これから作成するUIがデスクトップ版かモバイル版かを選択可能。また、生成AIとしてGemini 2.5 Flashを使う「Standard Mode」、より忠実なデザインかつ画像見本からもUIを生成できる「Experimental Mode」が選択で
社内のデザインシステムをMCP化したので事例を紹介！ts-morphを使ったアプローチの実装・プロンプト例をまとめて解説
こんにちは！株式会社エス・エム・エスでエンジニアをしている @_kimuson です。 今回は、社内のプロダクト開発で利用しているデザインシステムを MCP 化して提供し、社内のデザインシステムを活用した自然言語によるコーディング環境を整備したので、事例を紹介します！ デザインシステムの MCP 化とは 先日 Ubie さんが、社内のデザインシステムを MCP 化することで、UI 実装を効率化した事例を紹介していました。 簡単に自分なりの解釈をまとめると Figma の情報を取れる MCP を利用することで Figma の再現はかなりしやすくなった しかし、デザインシステムとの統合が難しい。<button style="font-size: 20px"></button> ではなくデザインシステムのコンポーネントとトークンを使って <Button textStyle="regular"><
UIの状態設計、迷ったらこの整理法！｜koppi
こんにちは！株式会社Rabeeでデザイナーをしているkoppiです🐝 FigmaでUIを作っていると、「hover」「focus」「disabled」「error」「readonly」など、さまざまな「状態（state）」をどう扱うべきか、迷ったことはありませんか？ 今回は、Nathan CurtisさんのMedium記事「The Sorry State of States」を参考に、状態設計で起こりがちな混乱と、その整理方法について自分なりにまとめてみました。 状態（state）はひとつのプロパティで表せるのか？「状態」と一言でいっても、その種類は多く、それぞれ性質も異なります。 rest（通常） hover（カーソルが乗っている） active（押している最中） focus（キーボード操作対象） disabled（操作不可） readonly（編集不可） error / succes
User-Interface Elements: Glossary
2D-Matrix Input Control A specialized input control used primarily in complex applications to simultaneously modify multiple related parameters by drawing a complex curve. Interaction with this control typically occurs by clicking on a point on an existing curve, then dragging that point to a new location. 2D matrices are useful when there are two parameters that depend on each other (such as lumi
AI時代にデザイナーがどう事業コミットするか｜坪田 朋
最近、事業会社のデザインマネージャー達と「UIを作るだけでは評価されにくいフェーズが、ますます加速している」という話で盛り上がった。 これはUIデザイナーの価値が下がったわけではなく、アジャイル開発や仮説検証が体系化し、UIを作る“前”の上流工程の影響がより大きくなったからだ。 僕自身も、delyの開発で高速に仮説検証するプロダクトマネジメントを続けているが、何度も失敗を重ねる中で「まず少人数で早く評価しないと、結果として使われない機能を作り込むリスクが高い」と痛感してきた。 ここ数年で、サービスの価値検証手段に変化がおきて、Firebase Remote Config、Repro / KARTEやNoCodeツールを活用した検証プロセスを実行している現場と実現できていない現場で作り方が変わってきた感覚。 — 坪田 朋 / dely (@tsubotax) October 25, 2021
「UIも自動化も後回し」: AIエージェント開発の実践的アプローチ - Algomatic Tech Blog
こんにちは、ネオセールスカンパニーCTOの菊池(@_pochi)です。 1月にリリースした 「アポドリ 」 は、大変ありがたいことに多くの反響をいただいています。本記事では、その開発を通じて得た、「作らない」ことが成功につながる理由 についてお話しします。 apodori.ai 本記事では、アポドリの開発を通じて学んだ、「いかに作らないか」という反直感的なトピックについて書いていきたいと思います。 AIエージェント開発で後回しにすべきもの 業務A、業務B、業務Cという連続する3つの業務からなる一連のワークフローを実行するエージェントの例を考えます。 AIエージェントは、上図のように人間の実行指示を受け、思考を伴う複数業務を遂行し、アウトプットを返します。図に示した要素の中で、アポドリの開発においてギリギリまで実装しなかった要素があります。それは以下の2点です。 操作画面 : 処理の進捗表示
その「直感的なUI」、本当に直感的ですか？｜wentz
こんにちは。SmartHRのプロダクトデザイン本部でプレイヤー/マネージャーをしているうえんつ（@wentz_design）です。今回は何かと見かけることがある「直感的なUI」という表現について建設的な批判をしたいと思います。 まず、この記事は「直感的」という言葉自体を否定したり、その使用を禁止すべきだと主張するものではありません。「直感的」という概念には本質的な価値があり、ユーザー体験の重要な側面を表現しています。 私が問題提起したいのは、この言葉が具体性を欠いたまま無批判に使われている状況です。この記事を通じて、「直感的」という言葉の背後にある具体的な要素を言語化し、より効果的なコミュニケーションと測定可能なデザイン目標の設定を目指したいと思います。 「直感的なUI」という甘い誘惑新しい企画や開発プロジェクトが始まるたび、私たちは無意識にこの言葉を繰り返していないでしょうか？ 「このア
「shadcn/ui」って何が凄いの？実装知らないWebデザイナーが調べてみた｜akane
はじめにこんにちは！株式会社Rabeeのデザイナーのakaneです。 今回は、最近よく耳にする「shadcn/ui」について調べてみました。どうやらUIコンポーネントっぽいことは分かるけど、一体何を指すんだろう？いわゆる「UIライブラリ」との違いって何？といった疑問をデザイナー目線でお話しします。 どうぞ最後までお楽しみください🐰 「shadcn/ui」って最近よく聞きますよね「shadcn/ui」という単語、最近よく耳にしませんか？たとえば、最近話題になった10Xさんの記事。 なんだかよく分からないけど、UIコンポーネントの話をしているらしい。shadcn/uiはコンポーネントの集まりらしい。それを使うと、スピーディーなプロダクト開発ができるらしい…。 なんとなくは分かる気がするけれど、shadcn/uiって一体何なのでしょうか？UIコンポーネント集に見えるけど、既存のいわゆる「UIラ
文化庁の「公用文作成の考え方」をUIルールに取り入れた話｜のもち
ソーシャルPLUS のデザイナー、のもち(@nomo_017)です🙋♀️ 埼玉県から栃木県に引っ越しました！ラーメンいっぱい食べてます🍜 -- さて、本題に入ります🙋♀️ 最近、文化庁が公開している「公用文作成の考え方（建議）」という文章作成のルールについて、ソーシャルPLUSのデザインチームで読み合わせを行いました。 読み合わせしている様子今回は、実際のUIルールに取り入れたポイントや、気になったポイントをご紹介していこうと思います！ そもそも、「公用文作成の考え方」とは？「公用文作成の考え方」とは、文化庁が公開している文章作成のルールの1つです。 各府省庁等が作成する多様な文書それぞれの目的や種類に対応するよう、公用文に関する既存のルール、慣用及び実態に基づき、表記、用語、文章の在り方等に関して留意点をまとめたものである。 公用文作成の考え方（建議） | 前書きこの他にも、「
できるだけUIを作らない（新規作成画面編）｜toofu
貿易管理 SaaS を提供している Shippio でプロダクトデザインを担当している toofu です。 最近、機能開発・改善をするときに「なるべく UI つくりたくないなあ」と思うことがよくあるので、その考えを事例とともに共有させてください。 メインオブジェクトの作成機能を設計しました先日、Shippio のメインオブジェクトである「シップメント（貿易案件的なもの）」の作成機能をリリースしました。 メインオブジェクトの作成機能がなかったの…？と思われるかもしれませんが、Shippio にはシップメントを画面上で作成する機能がなく、外部データをインポートすることしかできませんでした。 「プロパティが多い貿易案件をすべて手入力していくよりも、ユーザーが普段の業務で管理している Excel 上の貿易データをそのままインポートしてもらうほうが、より業務効率化に近づくはず」というプロダクト開発初
HTML/CSSでできる、押したくなる最新Webボタンエフェクト集
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。
【イカしたUIを見る】Vol.2 これは発明だ！と思ったUIパーツ10選｜Goodpatch Blog グッドパッチブログ
知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。 ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。 ※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Apple Booksのセミモーダル Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。 このUIのポイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Stitch - Design with AI
Scope in GenAI Features
UI 開発における ヘッドレス UI ライブラリの重要性とデザインシステムへの取り入れ方
