はじめに こんにちは、ふるしょうです。 DRESS CODEは画面数が既に200を超えており、新規機能開発や既存機能の拡張が目まぐるしく進んでいます。 デザイントークンやタイポグラフィをデザインシステムとして運用していますが、画面内のレイアウトや複合コンポーネント、共通UIコンポーネントがFigmaのデザインデータと微妙に「ズレ」ていることが課題になってきています。(絶賛解消に向けて試行錯誤中🔥) 今回は、デザインデータとUIのズレを解消する手段として、2025年6月4日にベータリリースされたFigmaのDev Mode MCPサーバーとCursorを活用して既存画面のUIメンテナンスに取り組んだ事例について紹介します。 TL;DR Dev Mode MCPサーバーと Cursor を連携し、デザインデータと実装 UI のズレを爆速で修正 17ファイルをCursorとペアプロしながら約3
こんにちは。テックリードの丸山 @maruyamaworks です。最近は Claude Code に全部賭けています。 前回、GitHub Copilot を使って Storybook を作った話を書きました。 developers.play.jp 今回はその応用編として、Storybook を MCP サーバ化して LLM に提供することで、社内 UI コンポーネントを使用したフロントエンドの開発を自動化できるのではないか、ということで実験してみたいと思います。（これをやるために Storybook を作ったといっても過言ではない） 何をやろうとしているのか まずは先駆者から学ぼう MCP サーバを実装する 実際に試してみた 今後の展望 おわりに 何をやろうとしているのか この記事では何をやろうとしているのか、最初に概要を説明します。 やりたいことは、LLM にプロンプトを投げてコード
ANDPAD フロントエンドエンジニアの小泉です。 普段は Vue での開発をメインにしているのですが、並行して React のプロジェクトも担当しています。 今回は、「ANDPAD 資料承認」というプロダクトのサービスページを Next.js から React Router に移行した際の、 GitHub Copilot の活用法について紹介します。 特に、「コーディングエージェントが凄いのはわかったけど、実際のプロダクト開発にどう取り入れて良いかわからない」という悩みを持っている方の参考になれば幸いです。 なお、この記事は、ある程度 Copilot や コーディングエージェントを使ったことのある方に向けた内容となっています。そもそもの Copilot の導入・設定方法、基本的な使い方・事例について知りたい方は、以下の記事を先に読んでいただくのがオススメです！ tech.andpad.c
LayerX バクラク事業部 Enabling チームでスタッフエンジニアをしている izumin5210 です。 Ubie さんの「社内デザインシステムをMCPサーバー化したらUI実装が爆速になった」を拝見し、悔しかった感動したので、自分でも試してみました。 MCP ツール設計 以下に引用する Ubie さんのスライドで解説されているとおりですが、現行モデルでは全コンポーネントのコードやルールを一気に渡してもノイズが多くなりすぎるためか、満足のいく性能は出ませんでした。 これは MCP サーバ化したとしても同様で、Tool 1回の呼び出しで全コンポーネントの詳細情報をすべて返すとやはり情報がぼやけてしまいます。 AI Coding Agent Enablement - エージェントを自走させよう (p.23) これらを踏まえると、以下のような2つのツールに分けて提供するのがよさそうだと判
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
