【デザインとAI】20260611〜12
加速装置が奥歯に仕込んであったら何かの拍子に誤作動して大変じゃないかなって子供の頃思ってたって話しましたっけ?
Imagine a world where you could copy/paste websites into editabl…
Figma @figma
Imagine a world where you could copy/paste websites into editable Figma layers (jk you don’t have to imagine you can do this now with our Chrome extension) pic.twitter.com/leLFmh33yg
— Figma (@figma) June 11, 2026
カテゴリ:UI/UX
Imagine a world where you could copy/paste websites into editable Figma layers (jk you don’t have to imagine you can do this now with our Chrome extension)
反響: 非常に高いエンゲージメント(Likes 2000超)。デザイナーコミュニティから即時試用報告が殺到し、実務効率化の可能性に興奮の声多数。
示唆: FigmaのChrome拡張はWebページを直接編集可能レイヤーとして取り込める実用ツール。AI生成デザインとのフィードバックループを劇的に短縮し、プロトタイピング速度を向上。デザイナーは画像ではなく構造化データとして扱える点を活かし、即戦力化すべき。
ついさっきリリースされたFigma公式のChrome拡張、かなり実用的だった✨ Webページ全体や特定のUIをキャプチャして、F…
こぎそ @kgsi
ついさっきリリースされたFigma公式のChrome拡張、かなり実用的だった✨
— こぎそ (@kgsi) June 11, 2026
Webページ全体や特定のUIをキャプチャして、Figmaに貼ると編集可能なレイヤーとして持ってこれる。画像として貼られるのではなく、テキストやフレーム、画像、図形として扱えるのが大きい。… pic.twitter.com/LIdLfVlLCt
カテゴリ:UI/UX
ついさっきリリースされたFigma公式のChrome拡張、かなり実用的だった✨ Webページ全体や特定のUIをキャプチャして、Figmaに貼ると編集可能なレイヤーとして持ってこれる。...このデータを再度AIに渡せばフィードバックサイクルが非常に楽になる。
反響: Likes 395超と高く、動画デモが共有され「試した」「精度高い」との実践報告が相次ぐ。
示唆: Figma拡張はAIワークフローのボトルネックを解消する実例。キャプチャ→編集→AI再生成のループが高速化され、Webデザインの実務生産性が大幅向上。日本語圏デザイナーも即導入を推奨。
Libraries I can't live without: ... shadcn - UI, ai - AI Toolkit…
Pontus Abrahamsson @pontusab
Libraries I can't live without:
— Pontus Abrahamsson — oss/acc (@pontusab) June 11, 2026
◇ zod - validation
◇ react-hook-form - forms
◇ react-table - tables
◇ tRPC + react-query - data
◇ shadcn - UI
◇ motion - animations
◇ date-fns - date utils
◇ ai - AI Toolkit
◇ nuqs - search params
◇ recharts - charts
◇ zustand - state…
カテゴリ:WEBデザイン
Libraries I can't live without: ... shadcn - UI, ai - AI Toolkit...
反響: Likes 500超。開発者・デザイナーから「実務で毎日使ってる」との共感反応が多く、AI統合UI構築の参考に。
示唆: shadcn/ui + AI Toolkitの組み合わせは、AI生成UIを洗練させる実践的スタック。デザインシステムを事前定義し、AIのありきたり出力を防ぐワークフローを示唆。プロトタイプから本番まで一貫した品質確保に有効。
[記事リンク共有、AI関連UI/デザイン実践ツールについて]
Codez @0xCodez
— Codez (@0xCodez) June 11, 2026
カテゴリ:UI/UX
[記事リンク共有、AI関連UI/デザイン実践ツールについて]
反響: Likes 320前後。実用ツールとして共有され、試用意向のコメント多数。
示唆: AI生成UIの課題(汎用性)を解決するオープンソースツールの紹介例。プロンプト中心からルールベースへ移行する重要性を示し、デザイナーがAIを「アシスタント」として活用する示唆を与える。
【 AIデザイン生成ラボ 】Vol.5 \ 今回のテーマ / WebアプリUI AIでWeb UIを作る時、最初に決めるべきは見…
KAWAI @kawai_design
【 AIデザイン生成ラボ 】Vol.5
— KAWAI (@kawai_design) June 11, 2026
\ 今回のテーマ /
WebアプリUI
AIでWeb UIを作る時、
最初に決めるべきは
見た目のテイストではありません。
--- プロンプト ---
下記の画像を生成してください。
- メディア: 架空のWebアプリ画面
- サイズ: 16:9
- テーマ: AIタスク管理ダッシュボード
-… pic.twitter.com/4yg15Rutvv
カテゴリ:WEBデザイン
【 AIデザイン生成ラボ 】Vol.5 \ 今回のテーマ / WebアプリUI AIでWeb UIを作る時、最初に決めるべきは見た目のテイストではありません。...見るポイント Web UIは、美しさより役割分担です。
反響: 実用プロンプト共有に対し、試したデザイナーから好反応。Likes 25前後だが実践志向が高い。
示唆: 目的・レイアウト優先のプロンプト手法はAIデザインの失敗を防ぐ実践例。役割分担を先に定義することで、AI出力の業務適合性を高め、デザイン思考のフレームワークとして活用可能。
「AIを使っているのに、なぜかデザインが整わない」...④【最後は人が整える】...まずは次に作る一枚で、「目的」「参考の言語化…
ちあき|売れる導線デザイナー @_chiaki_design
「AIを使っているのに、なぜかデザインが整わない」
— ちあき|売れる導線デザイナー (@_chiaki_design) June 11, 2026
そんな引っかかりを感じたことはありませんか?
私も最初は、
出てきたものをそのまま良し悪しで見てしまっていました。
でも今思うのは、AIで迷う人ほど
センスがないのではなく、順番が曖昧なだけです。
AIは魔法ではなく、… pic.twitter.com/TiLYaOu69Q
カテゴリ:グラフィック/UI
「AIを使っているのに、なぜかデザインが整わない」...④【最後は人が整える】...まずは次に作る一枚で、「目的」「参考の言語化」「比較」を先にやってみてくださいね。
反響: LP設計実務者から共感・試用報告。AI活用の落とし穴を指摘した実践アドバイスが響く。
示唆: AI出力の「整え方」手順(目的定義→言語化→比較→人間最終調整)は初心者〜中級者向け実用ノウハウ。センス依存を減らし、再現性高いデザイン生成を可能に。
nijiJourneyV6 & seedance2.0💕 Kawaii系MV✨プロンプト共有。
Toshi@ニャルオAI @Toshi_nyaruo_AI
nijiJourneyV6 & seedance2.0💕
— Toshi@ニャルオAI (@Toshi_nyaruo_AI) June 11, 2026
Kawaii系MV✨プロンプト共有。
❇️seedance2.0プロンプト
Use the uploaded images as the primary visual references for character design, facial style, color palette, graphic motifs, and overall kawaii-chaotic tone.
15-second music-video style… pic.twitter.com/CmDmBe5nR0
カテゴリ:グラフィック/動画
nijiJourneyV6 & seedance2.0💕 Kawaii系MV✨プロンプト共有。...[詳細プロンプト全文]
反響: Likes 150超、プロンプト共有でクリエイターから「試す」「参考に」と反応。
示唆: 具体的な動画生成プロンプト公開は、AIモーショングラフィックの実践リソース。キャラクター動作・編集リズムの詳細指定がクオリティ向上の鍵を示し、MV制作ワークフローのテンプレート化に有用。
最近研究了一套图片直出可视化大屏的工作流...Image → Dashboard → Production-Ready Code…
宋夏天Dazzle @songsummer920
最近研究了一套图片直出可视化大屏的工作流 👀
— 宋夏天Dazzle (@songsummer920) June 11, 2026
不仅有代码,还能反向生成可编辑设计稿 🚀
🖼️ Image → Dashboard
→ 💻 Production-Ready Code
→ 🎨 Editable UI(Figma)
先放下落地效果,晚上分享具体工作流和实现过程🥰#AI #Codex #AIWorkflow #Vue #TypeScript #BuildInPublic pic.twitter.com/0NSR2v5fea
カテゴリ:UI/UX/ダッシュボード
最近研究了一套图片直出可视化大屏的工作流...Image → Dashboard → Production-Ready Code → Editable UI(Figma)
反響: ワークフロー共有にビジュアルデモが支持され、実務適用意向高い。
示唆: 画像→コード→Figma編集可能UIの逆変換フロー はデータビジュアライズの実践例。AIとデザインツールの連携で生産性を飛躍的に高める手法として参考に。
This feels like editing a UI with your mouse. Someone just built…
Atal @ZabihullahAtal
This feels like editing a UI with your mouse.
— Atal (@ZabihullahAtal) June 11, 2026
Someone just built a FREE, open-source alternative to Bolt, Lovable, V0, Replit Agent, Figma Make, and Webflow.
It's called Onlook.
It allow to design and edit your UI almost like you're editing a Word document while the underlying… pic.twitter.com/sTispCMf67
カテゴリ:UI/UX
This feels like editing a UI with your mouse. Someone just built a FREE, open-source alternative to Bolt... Onlook...
反響: オープンソースツールとして注目、Likes 10超だが実用性議論活発。
示唆: Onlookのようなブラウザ内ビジュアル編集+AIコード生成ツールは、Figma-to-Codeの壁を崩す。デザイナーが直接実装に関われるようになり、コラボレーション効率化の方向性を示す。
AIに作らせたUIが「どれもありきたり」になるのは、プロンプトの問題ではなくワークフローの問題でした...Generating …
cv usk @cv_usk
AIに作らせたUIが「どれもありきたり」になるのは、プロンプトの問題ではなくワークフローの問題でした🎨 美しいUIを生むための実践的な手引きです。
— cv usk (@cv_usk) June 11, 2026
タイトル: Generating Beautiful UIs
URL: https://t.co/aa5uUDnIW9
🎨 概要…
カテゴリ:UI/UX
AIに作らせたUIが「どれもありきたり」になるのは、プロンプトの問題ではなくワークフローの問題でした...Generating Beautiful UIs [記事リンク]
反響: ワークフロー重視の指摘に共感集まり、実践Tipsとして共有。
示唆: デザインシステム事前定義+反復ループのワークフローはAI UI生成の核心。shadcn/ui活用などでハルシネーションを抑え、人間アートディレクションを活かす実務的アプローチを示唆。
【全体的な傾向】
直近24時間はFigma公式Chrome拡張のリリースが最大のトピックで、Web→編集可能Figmaレイヤー変換の実用性が爆発的に注目された。
AI単独生成から「AI+既存ツール連携」「ワークフロー最適化」へのシフトが明確。
プロンプト共有(nijiJourney、Web UIラボ)、オープンソースUIツール(Onlook、StyleSeed類似)、デザインシステム事前定義の重要性が繰り返し言及され、ありきたり出力回避のための構造化手法が主流。
日本語圏ではLP/UI実務での「目的優先」「人間最終調整」が強調され、グラフィック/動画生成では詳細プロンプト公開による再現性向上が見られた。
全体として、AIを「魔法」ではなく「加速器」として位置づけ、実務生産性向上(フィードバックループ短縮、コード連携)を重視する成熟期に入っている。
反響は実用試用報告中心で、単なる生成デモより「どう業務に組み込むか」の議論が活発。
エンゲージメント高い投稿は動画/スクショ付き実演が多く、即時性が高いツール発表が優勢だった。

