Yusuke｜AIエンジニア/デザイン
@yusuke_post
Followers
352
Following
595
Media
38
Statuses
213
AIエンジニアです。🇫🇮でAIの研究をしていました。/ Figma Makeについて語ります。/デザインエージェント開発してます。https://t.co/JsSrKXXjlq / 情報系修士 / 所属: @AlgomaticJP
Tokyo, Japan
Joined February 2025
Figma Makeはアプリだけでなくデザインシステムも一瞬で大量に作ることができるツールかもしれません。 Figma Makeで「 https://t.co/bekn6ymCxYのデザインシステムを再現して」とプロンプトを入力するだけで添付の画像のようなものを作ることができました。(実際のプロンプトはもっと長いです。)
Figma Make → CursorのVisual Editorやってみました。 Figmaでデザインシステム作成→ そのデザインシステムを添付してFigmaMakeでアプリ作成→ Figmaデータに落とし込み→ Cursor上でFigma MCPで実装に変換→ CursorのVisual Editorでレイアウトの調整 までスムーズにできました。
1
37
407
Figma MakeはVibe Codingをするためのツールではなくて、Vibe Designをするためのツールだと考える方がいいのかもしれません。 今まではよく、アプリを作る、つまりVibe Codingのためのツールとしてよく使われてきたと思います。 しかしFigma
Figma Makeはアプリだけでなくデザインシステムも一瞬で大量に作ることができるツールかもし��ません。 Figma Makeで「 https://t.co/bekn6ymCxYのデザインシステムを再現して」とプロンプトを入力するだけで添付の画像のようなものを作ることができました。(実際のプロンプトはもっと長いです。)
0
1
4
SlackのUIもDuolingo風のデザインにしてみた
Figma makeでDuolingoのデザインテーマ（システム）を生成して、YoutubeのデザインをDuolingo風に変えてみました かなり精度上がってる印象なのと、Figmaファイルで出力されてこのまま微修正もできるので、プロトタイピングにかなり使えますね プロンプトはリプに貼ります↓
0
1
13
私みたいにデザインが苦手な人にとって、完成された他のサービスのデザインテーマを抽出して参考にできるのはすごく実用的なテクニックかもしれません。 Figma/Figma Make上でのプロトタイピングでデザインの質が大幅に向上する可能性が見えました。
Figma makeでDuolingoのデザインテーマ（システム）を生成して、YoutubeのデザインをDuolingo風に変えてみました かなり精度上がってる印象なのと、Figmaファイルで出力されてこのまま微修正もできるので、プロトタイピングにかなり使えますね プロンプトはリプに貼ります↓
0
0
4
プロンプトはこちらです。みなさんFigma Makeで遊んでみてください！ まだまだ不完全な箇所が沢山あると思うので、改善していただきたいです。 <<SERVICE_NAME>>のところを自由に変えてみてください。例えば、 https://t.co/lVJnWaFYit, Duolingo, ,,, など有名なサービス名などにしてみてください。
0
0
34
デザインエージェントのLovartがシンガポール国立大学と共同でデザインエージェントに関する論文を出しているのが興味深い。 一枚の画像をPSDのレイヤー分離に関する研究に関して論文を出している。 https://t.co/E9oDiaEwhL この論文で個人的にすごいと思ったのは、
arxiv.org
Recent advances in diffusion models have greatly improved image generation and editing, yet generating or reconstructing layered PSD files with transparent alpha channels remains highly...
画像 → 編集可能PSD、をAIで。 OmniPSDでは複数レイヤーを1枚のキャンバス上に配置し、Spatial Attentionで関係性を学習。 前景やテキストを段階的に抽出・消去しながら、レイヤーを再構築していく。 AIが「制作工程」に踏み込んだ。 https://t.co/8AAw3EOmhB
0
1
7
Cladue Codeから"/code2slides"コマンド一発でプレゼンで使えるレベルのスライドを生成できるようになりました。 仕組み: 1. Claude Codeがコードベースを分析→課題/解決策/技術スタックを抽出 2. YAML仕様を生成（色・レイアウト・visual_hintで雰囲気指定） 3. Gemini API (Nano Banana
コードから「解こうとしているペイン」から「ビジネスモデル」までも抽出して、自動でハッカソンのプレゼン資料を生成する「code2slides」というシステムを作り始めています。
1
1
3
Figma Make → CursorのVisual Editorやってみました。 Figmaでデザインシステム作成→ そのデザインシステムを添付してFigmaMakeでアプリ作成→ Figmaデータに落とし込み→ Cursor上でFigma MCPで実装に変換→ CursorのVisual Editorでレイアウトの調整 までスムーズにできました。
CursorのVisual Editor（ビジュアルエディター）を早速使ってみたら、エグかった😱 1. Figma UIでデザインを編集。paddingの調整・グラデーションの変更など 2. Applyを押す 3. コードがそのまま実現💐
0
5
61
「分割して書き、AIで一気に統合」というVibe Coding時代のハッカソンフローが画期的です。🔥 AIを最後のまとめ役として設計に組み込むことで、短時間での開発効率が最大化する、という知見は非常に価値があります。オーディエンス賞受賞もおめでとうございます！🎉
AI時代には、ハッカソンの「開発手法」もアップデートが必要なのではないか──そんなことを強く感じました。 先日参加したハッカソン（※引用ポスト参照）で、 「一つのリポジトリ＋フォルダ分け開発＋最後にAIで統合」という、いわば “Vibe Coding時代のハッカソン開発フロー”
0
1
2
AI時代には、ハッカソンの「開発手法」もアップデートが必要なのではないか──そんなことを強く感じました。 先日参加したハッカソン（※引用ポスト参照）で、 「一つのリポジトリ＋フォルダ分け開発＋最後にAIで統合」という、いわば “Vibe Coding時代のハッカソン開発フロー”
"ERNIE AI Developer 1-Day Challenge"というVLMベースのOCR技術を用いたハッカソンで、参加者側が投票する「オーディエンス賞」を受賞させていただきました！ チームの皆さん、運営の皆さん、ありがとうございました！ 詳しくはこちらに書かせていただきました。 https://t.co/VMCAyrx6e0
1
1
7
「AIがあればワンクリックで完成品デザインまで行ける」と言われますが、これからはむしろ「キャンバスに大量生成して、人間が仕上げる」時代になるのかなと思います。 GoogleのMixboard（ https://t.co/993ILAZhLN
デザインに慣れていない人向けに、バナーやサムネイルのデザインパターンをAIで無限に生成・最適化するツールを試作しています。 仕組みは、 ①たった一枚の最初のバナーからどのようにデザインを改善すべきかをAIがプロのデザイナー目線でいくつか提案。
0
0
3
コードから「解こうとしているペイン」から「ビジネスモデル」までも抽出して、自動でハッカソンのプレゼン資料を生成する「code2slides」というシステムを作り始めています。
こちら反響いただいたので、noteで詳しく解説させていただきました！ 【コードをAIに読ませるだけでスライドができるーハッカソンで見つけた"コードからのNano Banana Proスライド生成術"】 https://t.co/DzAzfSlss0 仕組みはシンプルで、 コードには処理フローや設計意図が詰まっている →
0
1
5