社内のデザインシステムをMCP化したので事例を紹介！ts-morphを使ったアプローチの実装・プロンプト例をまとめて解説
こんにちは！株式会社エス・エム・エスでエンジニアをしている @_kimuson です。 今回は、社内のプロダクト開発で利用しているデザインシステムを MCP 化して提供し、社内のデザインシステムを活用した自然言語によるコーディング環境を整備したので、事例を紹介します！ デザインシステムの MCP 化とは 先日 Ubie さんが、社内のデザインシステムを MCP 化することで、UI 実装を効率化した事例を紹介していました。 簡単に自分なりの解釈をまとめると Figma の情報を取れる MCP を利用することで Figma の再現はかなりしやすくなった しかし、デザインシステムとの統合が難しい。<button style="font-size: 20px"></button> ではなくデザインシステムのコンポーネントとトークンを使って <Button textStyle="regular"><
バリデーション解体新書 - kawasima
バリデーション解体新書 2025/4/8に開催した #アーキ部 『バリデーション解体新書』の内容を編集したものです。 バリデーションとは何か? 広義には、 何らかの処理を実施するにあたって、入力データが想定する条件を満たすかを検証する行為 と言える。 この定義で、アプリケーションのどこでバリデーションをしているのかを考えると、以下のように各層にそれが見られる。 このように実装される場所が散らばるので、「バリデーション」や「入力チェック」を分類して開発ガイドラインを作ることが多い。 例えば、大規模Java開発向けのTERASOLUNA開発ガイドラインを見てみると、 ユーザーが入力した値が不正かどうかを検証することは必須である。 入力値の検証は大きく分けて、 1. 長さや形式など、文脈によらず入力値だけを見て、それが妥当かどうかを判定できる検証 2. システムの状態によって入力値が妥当かどうか
Terraform設計ガイドライン | Future Enterprise Arch Guidelines
本ガイドラインは、世の中のシステム開発プロジェクトのために無償で提供致します。 ただし、掲載内容および利用に際して発生した問題、それに伴う損害については、フューチャー株式会社は一切の責務を負わないものとします。 また、掲載している情報は予告なく変更することがございますので、あらかじめご了承下さい。 はじめに Terraformはインフラを宣言的にコード管理するツールであるが、特に大規模なシステムでは扱うリソース数が増え、必然的にTerraformコードも複雑化する傾向にある。Terraformの可読性が低下すると、作業効率の低下だけではなく影響度が大きいミスを誘発する懸念がある。 また、Terraformは活発に機能開発が継続されており新しい機能／記述方法もリリース毎に追加されている。これは嬉しい反面、新規開発者が悩むポイントも増えたと言える。関連して、チームやプロジェクトごとに設計方針
Playwright MCP を使ってAIにブラウザ操作をさせてみる（GitHub Copilot / Cline 環境構築手順付） - Qiita
はじめに Microsoft が 2025/3/29 に Playwright MCP を発表してから盛り上がっていますね。 「MCP」は「Model Context Protocol」の略です。生成AIにとってのUSBポートのようなもので、様々なデータリソースやツールとつなぐことが出来るものだと考えてください。 Playwright はブラウザを操作する E2E テストツールです。E2Eテストコードを人が書いて（またはブラウザ操作を記録して）プログラムがブラウザを操作するツールというものでした。Playwright MCP が登場したことで、 生成AIがブラウザを操作することが出来るようになります。 Cline で Playwright MCP の環境準備 ※環境構築手順は Cline と GitHub Copilot 両方書きました。お好きな方を使ってください。 Playwright
便利なMCP 2025年4月版 (もう古いコードの提案はしなくなるMCP他) - Qiita
MCPを最大限に活用した次世代のWebアプリ開発 Next.js、Honoは Context7 MCP 最新のコードやスニペット デザインを v0やReaddy、same.new(=AIデザイン生成Webサービス)で作成。 フロントエンドを Figma MCP 画面デザイン等 バックエンドを Supabase MCP DB操作等 資料を filesystem MCP 指定したフォルダに資料や1ファイル化したファイルの読み込み テストをPlaywright MCP 自然言語でのテストコードの自動生成 Git管理を GitHub MCP GitHubの自動操作等 保守運用を Raygun MCP でエラーの自動追跡 サブスクライブを Stripe MCP Stripeでの実装 多様なAIモデルを GitHub Copilot Agent mode、Claude Sonnet 3.5 3.7、G
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
ManabiyaAI：新人教師でも、ベテランでも、その先の学び舎へ。【AI Agent Hackathon】
ManabiyaAI：新人教師でも、ベテランでも、その先の学び舎へ。【AI Agent Hackathon】 はじめに 昨今の教育現場では、授業準備・進行・評価は非常に大きな負担となっており、日本の教師は授業や授業準備に費やす時間自体は週26.5時間程度となっている。 テクノロジーの進化による授業のデジタル化が急務だ。しかし、実際の教育現場では、IT化が、促進されておらず、現行方式から変化を嫌う教師が多数存在する。 また、授業支援AIが登場するが、教師の個性や経験が反映されず、教師が嫌悪感を抱かれ、導入に至らない問題がある。 今回、そんな、問題を解決する「ManabiyaAI」を提案する。 ManabiyaAIは、デジタル端末が完備された対面授業環境下で、新人教師でも、自分らしい授業を実現できるよう、授業準備から授業運営、採点・フィードバックまでを包括的にサポートするシステ
【新製品】NVIDIA RTX PRO™ 6000 / 6000 Max-Qの取り扱いを開始します - アプライド大学・研究室向け:アプライドダイレクトforUniv
NVIDIA RTX PRO 6000 Blackwell Workstation Edition NVIDIA RTX PRO 6000 Blackwell Workstation Editionは、これまでに作られた中で最も強力なワークステーションGPUであり、プロフェッショナル向けのパフォーマンスと機能を再定義します。最も高度なモデルを圧倒し、比類のないAI処理能力で最も要求の厳しいクリエイティブワークフローに取り組みます。画期的なNVIDIA Blackwellアーキテクチャに基づいて構築され、96GBの超高速GDDR7メモリを搭載したRTX PRO 6000 Workstation Editionは、比類のない速度、精度、効率を提供し、不可能を可能にする力を与えます。 NVIDIA RTX PRO 6000 Blackwell Max-Q Workstation Edition
決済基盤のアーキテクチャ特集 - Findy Tools
決済システムでは、高い耐障害性やスケーラビリティ、柔軟性、またデータの整合性等が特に高度に求められる領域です。本特集では、決済基盤の開発・運営に携わる6社のエンジニアの方々にご協力頂き、決済システムにおける技術選定のポイントや今後の展望を、アーキテクチャ図と共に解説頂きました。 ※ご紹介は企業名のアルファベット順となっております 合同会社DMM.com合同会社DMM.comは、会員数4,507万人（※）を誇る総合サービスサイト「DMM.com」を運営しています。 1998年の創業以来、多岐にわたる事業を展開し、現在は60以上のサービスを運営。動画配信や電子書籍、アニメなどの多様なエンタメサービスに加え、3DプリントやEV充電などのハードウェア分野、AIといった最先端のテクノロジーを取り入れた事業など、様々な事業を手掛けています。 2022年にはサブスクリプション会員システムの「DMMプレミ
MCPの通信方法がステートフルからステートレスに？：HTTP+SSEからStreamable HTTPへ
MCPの通信方法がステートフルからステートレスに？：HTTP+SSEからStreamable HTTPへ こんにちは、しば田です！ 記事を書くに至ったきっかけの投稿がこちら。v0やTurborepoで有名なJared Palmer氏です。 和訳すると、 ”Anthropicによる正解ムーブ。MCPは完全にステートレスで、再開可能、そして単なるプレーンなHTTPで実装できるようになる。” 上記の発言は、MCPのGithubのレポジトリに出ているこのPRの変更について言及しています。 内容がパッとは分からなかったので整理しました。 MCPとは？ この記事では解説はしません。 他人様の記事ですが、こちらの記事がわかりやすかったです。 現在の通信方式（ステートフル）：HTTP+SSEトランスポート MCPの現在の通信方式であるHTTP+SSEトランスポートは、クライアントとサーバー間の双方向通信を
🚀 Figma MCP × Cursorで加速するUI実装とその先の工夫
はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！ 本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖 Figma MCPとは Figma MCPについては、こちらの記事が非常にわか
Model Context Protocol (MCP)入門：公式ドキュメントベースで牛歩のごとくゆっくり理解する 🐮
2. AIツール連携の進化 2.1. LLMの性能向上とツール連携の必要性 大規模言語モデル（LLM）は近年、急速に進化してきました。GPT-4、Claude、Gemini、Llama 3などのモデルは、テキスト生成、コード作成、推論能力において驚異的な性能を示しています。しかし、これらのモデルにも明確な限界があります。具体的には次のような制約が存在します。 最新の情報へのアクセスができない（トレーニングデータのカットオフ日以降の情報） 専門システムやデータベースと直接やり取りできない 複雑な計算や特定のタスクを効率的に処理できない ユーザー固有のデータやコンテキストに直接アクセスできない これらの限界を克服するため、LLMを外部ツールやシステムと連携させる必要性が高まりました。例えば、最新の気象データを取得するAPI、企業の内部データベース、特定の計算エンジンなどと連携することで、LLM
React Router v7でコードを書いてくれSonnet
Claude 3.7 Sonnetに代表される現在の主力なコーディングモデルやソフトウェア開発タスクの自動化に利用されるLLMは、知識のカットオフにより2024年後半頃までにネット上に存在する情報をもとにしたソースコードしか書くことができない。例えばAnthropicのAPIを直接利用して確認すると、「React Routerの最新バージョンはv6です」と返答が来る。しかし、最新版はv7だ。v7.0.0はちょうどこの時期にリリースされたため境界にあり、つまりv7の実践的な知識はない。これに限らず、LLMの世界ではNext.jsはv14、Flaskはv2、Railsはv7と一世代遅れたバージョンを認識していることになっている。 これらのアップデートによって入った変更は、既存のソースコードに記述していればLLMが空気を読んで従う。加えて、ユーザーがカスタムルールとしてエディタ側で追加情報を設定
Goの進化に乗り遅れるな！modernizeパッケージでコードを現代化するリファクタリング入門
「modernize」パッケージとは？ 「modernize」パッケージは、Go のツール群の中でも特に注目すべき解析器（アナライザー）です。gopls（Go 言語サーバー）に統合されており、既存のコードを最新の言語機能や標準ライブラリの改善点に沿って自動的にリファクタリングするための提案を行ってくれます。たとえば、古い if/else 構文による条件分岐を、Go 1.21 で追加された組み込みの min/max 関数に置き換えるなど、コードをよりシンプルで読みやすい形に更新できます。 さらに、modernize パッケージには、提案された変更を一括で適用できるコマンドラインツールも用意されています。たとえば、以下のコマンドを実行することで、テスト対象のコードに対してすべての現代化修正を一括で適用できます。 go run golang.org/x/tools/gopls/internal/
データセット生成・前処理のためのLLM推論クラスタの構築と運用 - Preferred Networks Research & Development
はじめに Preferred Networks (以下PFN) 子会社のPreferred Elements (以下PFE) は、PLaMo 2シリーズの開発を進めており、その成果の一部としてPLaMo 2 1BおよびPLaMo 2 8Bの事前学習済みモデルを先日公開しました。モデルの詳細は以下の記事をご覧ください。 大規模言語モデルの次期バージョン PLaMo 2 の事前検証: SSMの採用と合成データによる性能改善の取り組み 大規模言語モデルの次期バージョン PLaMo 2 8Bによる検証 PLaMo 2の開発は、高品質データセットをどれだけ構築できるかが重要なポイントと考えています。実際、高品質データセットを使用したPLaMo 2 8Bは、8BというサイズでPLaMo-100Bに相当する性能をJMMLUやJHumanEvalで獲得しています。 事前学習チームでは、その源泉となった高品
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
.mdc駆動ナレッジマネジメント/.mdc-driven knowledge management
stanford-cme-295-transformers-large-language-models/ja/cheatsheet-transformers-large-language-models.pdf at main · afshinea/stanford-cme-295-transformers-large-language-models
Amazon.co.jp: Super Study Guide: Transformer と大規模言語モデル: Afshine Amidi (著), Shervine Amidi (著), Yoshiyuki Nakai (翻訳): 本
プランクで体幹鍛えてるのは姿勢改善＝下半身痩せのためなんだけど、まさかここまで腹筋が割れるとは……って自分がいちばん驚いてるし感動してる
【初心者歓迎】第２回 AI Agent Hackathon、開催決定！
