はてなブックマーク

デザインシステムをAIエージェントにどう渡すか。デザインシステム運用に関わる立場として、この問いをずっと考えてきました。Figma MCPやCode Connectといったツールは登場しましたが、コンポーネントの構造は渡せても、Do's and Don'tsに相当する判断基準――「このコンポーネントはこの文脈では使わない」「セマンティックカラーを優先する」――まで伝える手段は見当たりません。そこに、2026年3月18日、Google LabsのStitchチームが大型アップデートを発表しました。AI-Native CanvasやVoice、Instant Prototypesなど5つの新機能が公開され、@stitchbygoogleの告知ポストは4時間で200万インプレッションに達しています。 Meet the new Stitch, your vibe design partner. H

Anthropicが全32ページのガイド「The Complete Guide to Building Skills for Claude」を公開しました。Claude Skillsの設計・テスト・配布までを体系的にまとめた内容です。読んでみたら思った以上に実践的だったので、中身をかみ砕いて紹介します。 なお、この記事は、これからSkillsの作成を検討していたり、普段からClaude Code / Claude.ai を使っている開発者・デザイナー・パワーユーザーな方々を対象としています。 Skillsとは何か改めてですが、Claude Skillsは、Claudeに「仕事のやり方」を教えるための仕組みです。実体はフォルダ。中にMarkdownで書いた指示ファイルを入れておくと、Claudeが自動的にそれを読み込んで、指示どおりに動いてくれます。フロントエンドのデザイン生成、リサーチ、ド

※このメンバーシップ記事は全文無料で見れます。 Figmaが2026年2月17日（現地時間）にClaude Code to Figmaを公開しました。ローカルで動くUIをFigmaに取り込み、Figma上の編集をコードに戻す…この双方向のワークフローを手元のプロジェクトで実際に試し、何ができて何ができないのかを確かめました。 前提と環境検証に使ったのはShadcn Dashboard & Landing TemplateのVite版です。ここにClaude CodeとFigma MCP Serverを接続しました。 ShadCN Dashboard + Landing Page Templateの画面MCPのセットアップはClaude Codeの設定ファイルにサーバー接続情報を追加するだけで、Figma側にDev Modeのサブスクリプションは不要です。 利用できるツールは`generat

事例が先に伝わるほうがわかりやすいので、1つ紹介します。Anthropicの研究者Nicholas Carliniは、16のAIエージェントを並列稼働させてRust製のCコンパイラを構築しました。 約2,000セッション、APIコスト約2万ドルで10万行のコード。Linux 6.9カーネルをビルドできる水準です。1人のAIに全部任せるのではなく、複数のAIにそれぞれ役割を振って同時に走らせた。この発想の転換がAgent Teamsの出発点になっています。 Agent Teamsの仕組みAgent Teamsを一言でいうと、AIのプロジェクトチームを自分で編成できる機能です。 普段のClaude Codeは、1つのAIに1つの作業を頼む形式で動きます。Agent Teamsを有効にすると、このAIがチームリーダーに昇格し、複数のチームメイトを呼び出して仕事を割り振れるようになる。 構成要素は

皆さんは今日もプロダクトデザインしていますか？こんにちは、デザイナーのこぎそ（@kgsi）です。 2025年も残りわずかになりました。振り返ると、 今年は自分のデザイン業務におけるプロトタイプの作り方が根本から変わった年でした。 これまではデザインツール、多くの場合はデザインツールで画面を作り込み、エンジニアに渡す。実装されたものを見て修正依頼を出し、たまに自分で直接手を入れる…この往復に、デザイナーとしては「他にもっと方法はないのか？」という、漠然とした気になりがありました。 2025年末の今、私はコードベースでプロトタイプを生成し、デザインツールで調整するサイクルへとシフトしています。この記事は、2025年の総決算として、 この1年で体感した変化を、プロダクトデザイナーの視点からまとめたものです。 同じような課題を感じている方の参考になれば幸いです。 従来のプロトタイプを作ることの課題

先日AWSから「Kiro」という新たなAIエディタがリリースされました。 しばらく使ってみて、デザイナー目線として見ても、とても良い設計コンセプトでしたので、Kiroの機能特徴はもちろん、設計思想を知ることでAIによる開発・設計力を底上げするであろう理由も含めてご紹介したいと思います。 プロトタイプからプロダクションへの移行における課題CursorやClaude Codeなど、昨今のAIエディタ（エージェントツール）によるコード生成は、継続的にプロンプトを入力するだけで動作するアプリケーションを迅速に構築できるため、既存コードの拡張はもちろん、プロトタイピングの初期段階において特に強力に機能します。 このプロセスは「Vibe Coding」と呼ばれ、直感的な実装構築ができる一方で、作成したプロトタイプを実際のプロダクション環境へ移行する際には、いくつかの重要な課題が生じます。 設計意図のブ

デジタルプロダクトデザイナーとして、日々変化する開発プロセスの中で奮闘していますが、皆さんも、AI アシスタント、エージェントの目覚ましい進化を肌で感じているのではないでしょうか？特に、v0、CursorやClineといったAIエージェントを活用したツールが、エンジニアやもちろん、デザイナーも含めた「開発者」の働き方を大きく変えようとしています。 最近、そういった風潮の中で注目されている技術の一つとして MCP (Model Context Protocol) が挙げられます。 Money Forward さんの「デザインシステム MFUI を MCP サーバー化して社内に提供した話」や、Ubieさんの「社内デザインシステムを MCP サーバー化したら UI 実装が爆速になった」いった記事では、MCP サーバーを通じてデザインシステムの情報をAIに的確に伝えることで、UI実装の速度と精度が

デジタルプロダクトやサービスが多様化し、複雑化する現代において、デザインの役割は、ビジネスの成長を牽引する戦略的な機能へと進化しています。 そのような状況下で、組織全体の効率的かつ高品質な「デザイン」を実現するための基盤として、「デザインシステム」がよく話題に上がります。 私の感想ですが、 2〜3年前と比較すると、事業会社のデザインシステム運用事例は、着実に多くなってきています。 デザインシステムは、UIコンポーネントライブラリやデザイン原則をまとめたもの、といった認識をお持ちの方もいるかもしれません。デザインシステムは単なるアセットの集合体ではありません。プロダクトに関わる全員が共通認識を持ち、効率的に、そしてより高い品質でデザイン・開発を進めるための「仕組み」そのものです。 日本における、代表的なデザインシステム（左上：デジタル庁デザインシステム、右上：SmartHR Design S

UIデザイン、画面設計する上で欠かせないものとして、UIコンポーネントが挙げられると思いますが、そのコンポーネントを選ぶ基準、選定の理由はどう決めていますか？ WebサービスやアプリケーションのUIを設計するとき、デザイナーにとってもUIコンポーネントの仕組みや、最新の技術潮流を理解しておくことは大切です。特にフロントエンドにおける現在の潮流は、UIデザインと実装の境界が以前よりも密接になってきています。 昨今、大企業は社内コミュニケーションの円滑化、生産性向上のもと、自社のデザインシステムに組み込まれたUIコンポーネント活用し、効率化を図っているケースが増えてきていますが、フルスクラッチでは作らず、既存のオープンソースなコンポーネントをオーバーラップして作成している事例が多いようです。 他方、デザインシステムを持たない中小企業や新規プロジェクトでは、UIコンポーネントの選定や実装に課題を

こんにちは、早くも酷暑が予想される初夏ですが、皆さまお元気でしょうか？エアコンの空調管理に悩まされるSmartHRのプロダクトデザイナーの@kgsiです。 つい先日「SmartHR AI活用ポリシー」策定のお知らせと、「従業員サーベイ」機能においてAIを利用した自由記述回答の要約機能が発表されました。これはSmartHR初の生成AIが使われた機能です。 今回自分が機能設計をデザイナーとして担当しましたが、この記事ではその開発過程で得られた、主にデザイン文脈におけるナレッジを紹介します。 生成AIに関連する記事はすでに多く出現していますが「プロダクトとしてAI機能をどう設計するべきか」「AI機能をどうやってデザインするか」といった観点での記事はまだ少ない印象なので、参考になれば幸いです。 何のデザインをしたのか？「従業員サーベイ」機能は従業員に送付したサーベイを通して回答データを収集し、収集

プロダクトデザイナーをやっている@kgsiです。 最近いわずもがなAIが熱いですよね。Stable Diffusionなどの画像生成モデル、GPT-3（GPT-4）やLaMDAといった大規模言語モデル（LLM）を使った生成系AIやツールが爆発的に増えてきており、個人向けアプリケーションはもちろんですが、業務用アプリケーションにもAIをベースとした機能が組み込まれ始めています。 昨今各社がリリースしてる「AIを下敷きとした機能・アプリケーション」は、ユーザーや業界が望んで生まれた待望の機能…というより、AIの可能性を探るためのPoC味が強い機能が多い印象です。UI（ユーザーインターフェース）においても旧来の延長線上のようなUIや、どうやって使うのかひと目ではわからない、極めて実験的なUIなど…多様なパターンが見かけられるようになりました。 この記事ではAIそのものの解説や実証ではなく、ジェネ

こんにちは、SmartHRプロダクトデザイングループの@kgsiです。 先日、弊社のVP of Product Designの@oujiがこんな記事を公開していました。 みなさん、これを読んでどう思われましたか？内部からみてもよくわからんのが本音だったりするのですが、何故か魂がザワザワしました。 さて、記事の中で繰り返し述べられている「ヘヴィメタル」と、今回ご紹介する内容がマッチするかはわかりませんが、プロダクトデザイナーが関わっている、プロセス改善活動をご紹介します。 プロダクトデザイナーの責任とは？VPはヘヴィメタルな記事の中でこう述べています。 SmartHR ではお前がお前の責任（インターフェース品質）を果たすためなら、お前はどんな成果の出し方を選んでもいい。弊社、特にプロダクトデザイングループにおいては、成果の出し方(＝プロセス)が限定されていません。つまり、プロダクトのインター

SmartHRプロダクトデザイングループ（プロデザ）所属のkgsiです。 先日、社内の他組織がプロデザに対してどのような印象を持っているかをヒアリングする機会を得ました。その中で「プロデザって凄そうだけど怖い」「活動実態がよくわからない」...といった声に歯がゆさを覚えました。 このような有り様は打ち壊していくぞ...！ということで、今年は積極的に情報を共有していこうと思います。 闇のベールに包まれた、我々プロデザが何をしているかという一端として、プロダクトデザインラボというカイゼン活動について説明しましょう。 我々は「UIの負債」に立ち向かうSmartHRでは多数のチームが機能単位の開発を同時に行うLeSS（大規模スクラム）を採用したり、アジャイルコーチを招聘してプロダクトのバリューストリームを見直したりと、サービス開発のアジリティを上げるための施策を次々と行っています。 サービスのスケ

これは SmartHR Advent Calendar 2020 の17日目の記事です。 @kgsiです。SmartHRという会社でプロダクトなデザイナーをしております。 今回の記事は、業務アプリケーションの闇に向き合って憤死している一人のデザイナーが、首を180度にねじっても答えが出ない、Webフォームにどれだけの説明と補助が必要かに悩んだ内容を結論無く語る記事です。 フォームのベストプラクティスは先人たちが世にゴロゴロ出しております。Form Design Patterns の和訳が出版されて久しいですが、あれはいい本ですね、何度も読み返してます。 この本の中では「インクルーシブデザインの原則」というものが紹介されています。 - 同等の体験を提供する - 状況を考慮する - 一貫性を保つ - 利用者に制御させる - 選択肢を提供する - コンテンツの優先順位を付ける - 価値を付加する

こんにちは、はじめまして。先日SmartHRにジョインした@kgsiです。 この記事はいわゆる入社エントリーになります。 プロダクトデザイングループの6人目のメンバー、初のデザインエンジニアとして2020年6月にリモート入社しました。 ジョインしてそろそろ1ヶ月半経ちましたが、今回私からはSmartHRのデザインエンジニアの働き方と役割を探したお話をします。 自己紹介自分のキャリアを鑑みると「開発もできるUIデザイナー」に分類されるのではないかと思っています。 元々出自はグラフィックデザイナーですが、大学時代にWebの世界に魅入られ転身、Webデザイナーから始めてマークアップ業務にも関わり、さらにはエンジニア（主にフロントエンド）を兼任し... そんなこんなで、かれこれ10年以上この界隈をさまよっています。 SmartHR入社前のキャリアとしては、大手サーバー事業会社でサーバーコントロール

2020年2月22日（土）にTypeScriptの祭典、TSConf JP 2020が開催される予定でしたが、新型コロナウィルス（COVID-19）問題が発生し、参加者の健康と社会的な影響を考慮した結果、残念ながら開催中止となりました。 しかし、今回メインのクリエイティブに携わったスタッフとして、せっかく協力して作った成果物が日の目を見ないのはもったいないなぁ...と考え、せめてもの供養として、TSConf JPのクリエイティブ周りのコンセプト、スタッフと自分が、どんなものを作っていたかを紹介しようと思います。 スタッフ参加の背景 去年開催されたTypeScript Meetupの延長線で、TSConf JPが開催されることとなり、元々のコアスタッフだったTakepepeさんが、でクリエイティブ周りを手伝ってくれる人をtwitterで募集されており、手を上げたのがきっかけです。 当時公開さ