Loading video...

Video Failed to Load

Go Home

Material 3 ExpressiveのUIデザインツールをオープンソースとして公開しました🎉 Web上でUIを組み立てるだけで、AIへの指示用プロンプトが完成します! Androidアプリをバイブコーディングで作る方はぜひ試してみてください👇 #個人開発

361,898 views • 1 month ago •via X (Twitter)

27 Comments

いのり's profile picture
いのり1 month ago

ソースコードはGitHubにてMITライセンスのもとで公開しています!こちらです👇️

Niko's profile picture
Niko1 month ago

would be cool if you could change the swipe transition movement, so like pressing the button swipes the current view to the right and uncovers the new view instead of always covering the current view with the new view coming from the right

いのり's profile picture
いのり1 month ago

Thanks! I’ve added customizable swipe directions and a back transition animation.

LJK's profile picture
LJK1 month ago

That's low-key kinda cool

uwasanoekakibit's profile picture
uwasanoekakibit1 month ago

これって、動的コンテンツもいけるのかな……行けたらもうね、これまじ流行るまじで。有料でも買うてかそれもできるならもう有料でもいいと思う

ForgeOne's profile picture
ForgeOne1 month ago

Can we have it later for web dev. Its actually great. I'd also love to be a contributor

いのり's profile picture
いのり1 month ago

Thanks! If you expand this to the web, you won't be able to compete with Figma...

jendy's profile picture
jendy1 month ago

READMEの「画面をつないで、実際にタップしてからプロンプト化」がいいですね。「このボタンの次はどこ?」を先に決められる。見た目の指定より、遷移の曖昧さを減らせる点に価値を感じます。

lesetong's profile picture
lesetong1 month ago

How do you render m3e on the web?

いのり's profile picture
いのり1 month ago

built it with handcrafted React components and CSS, without an M3 library. Credits:

abhi's profile picture
abhi1 month ago

SO COOL! This came to my feed just when I decided to learn android development

kz's profile picture
kz1 month ago

Love it, need more components

Roman Khrupa's profile picture
Roman Khrupa1 month ago

Good tool for prototyping

Harish 💙's profile picture
Harish 💙1 month ago

@RydMike

Santiago 🇦🇷's profile picture
Santiago 🇦🇷1 month ago

Esto es increible, incluso para un desarrollador android sirve mucho para tener un molde rapido como queres que quede la app!

Yoggy|動かすくん's profile picture
Yoggy|動かすくん1 month ago

公開おめでとうございます。★62、1日で速いですね。うちの小さいリポジトリを今日測ったら、14日でユニーク訪問2人に対してクローンが19人でした。別のは訪問5人でクローン30人です。star は反応の一部しか映していませんでした。Insights の Traffic に本数が出ます。自分は star 0 を「誰も見ていない」と読んでいて、まるごと外していました。

PETA@海外ビジネス探索室's profile picture
PETA@海外ビジネス探索室1 month ago

デザインツールとコード生成の間を、AIへ渡せる指示文でつないでいるのが面白いですね。配置だけでなく、余白・色・状態変化も構造化して出力できると、生成後の手直しをさらに減らせそうです。

Oscar Yañez Cisterna's profile picture
Oscar Yañez Cisterna1 month ago

What about desktop layout?

いのり's profile picture
いのり1 month ago

Thanks! Tablets and foldables are Android, so they're future candidates. For now, I'm prioritizing the smartphone 🔥

晚晚's profile picture
晚晚1 month ago

这下画界面和喂给 AI 可以一起搞了

いのり's profile picture
いのり1 month ago

谢谢!现在已经支持中文了

Bert's profile picture
Bert1 month ago

Interesante

River's profile picture
River1 month ago

Brilliant, it is very helpful

Rei 🇺🇸🇮🇱🐍's profile picture
Rei 🇺🇸🇮🇱🐍1 month ago

Why do you even need ai slop for that bruh

xx's profile picture
xx1 month ago

すごい、、、

FlOW | AIバイブコーディングTips's profile picture
FlOW | AIバイブコーディングTips1 month ago

うちも似た発想で、Figmaのコンポーネント名をそのままプロンプトの変数名に流用してから、デザインとコードの対応が取りやすくなりました。UIを描くだけでプロンプト化できる仕組みは、AIへの指示のブレを構造的に減らせるのが良いですね。

X ironwater's profile picture
X ironwater1 month ago

为什么不直接Androidostudio😅重复制造AI slop是什么时尚么

Related Videos