morph🥑

Web Developer + UI/UX designer + ⛄️

[Masato Suzuki / CASCA @masatosuzuki_]

https://t.co/TMaglALnC8

[Praveen Kumar @praveenisomer]

This is how you make a 3d card hover effect in @framer. Tutorial.

[Cheng Lou @_chenglou]

My dear front-end developers (and anyone who’s interested in the future of interfaces):

I have crawled through depths of hell to bring you, for the foreseeable years, one of the more important foundational pieces of UI engineering (if not in implementation then certainly at least in concept):
Fast, accurate and comprehensive userland text measurement algorithm in pure TypeScript, usable for laying out entire web pages without CSS, bypassing DOM measurements and reflow

[Daniel Beauchamp @pushmatrix]

Huh, so that's why text is called a string

[Praveen Kumar @praveenisomer]

Gradient experiment in @paper and I genuinely cannot stop

[Josh Kale @JoshKale]

Every website you’ve ever used is broken in a way you never noticed and it’s been this way for 30 years...

A Midjourney engineer finally just fixed it.

It’s called Pretext:
A tiny library that lets websites lay out text the way magazines and newspapers do, with text flowing around images, wrapping into columns, and fitting perfectly into any shape, all at 120fps.

This has been basically impossible on the web for 30 years. Every website you’ve ever used relies on the same clunky system from the 90s to figure out where text goes on screen. Pretext bypasses it entirely. 500x faster.

The demos look like they shouldn’t be possible in a browser. Go look.

[田中義弘 | taziku CEO / AI × Creative @taziku_co]

3Dプリンタは実用品のために買うのではない。

頭の中に一瞬だけ浮かんだ
しょうもないアイデアを、現実世界へ召喚するために買う。

こういう発想はAIでは無く、
人間のクリエイティブが必要だと思う。
Creator：@LordMurielo

[ずっぱー @kuroooooo__1117]

鬼滅アニメ、戦闘シーンの作画には本当に感謝してるし神作なのは間違いないんだけどキャラデザに関してはほんとに原作の圧勝だし、アニメだと別人になっちゃってるってずーーーっと思ってた‼️‼️アニメ上げ風潮あったけど、普通にずっと原作派。

[Elise Vanessa @ev0123456789]

🇺🇸🇯🇵🕊️チャーリー・カーク氏が亡くなる直前に配信した「The Charlie Kirk Show」から、日本に関する発言をまとめた動画です。

カーク氏は日本と韓国を訪問し、帰国後にこの番組を公開しました。そのわずか数日後、ユタ州の大学キャンパスで銃撃を受け命を落とすこととなりました。

日本について熱く真剣に語ってくださったカーク氏に心から感謝します。ご冥福を心よりお祈り申し上げます。

https://t.co/epOtKiFUGJ

[ぶんかい@AIで遊ぶ人 @bunkaich]

実はこれGoogleフォームなんです。

Googleフォームはサイトに埋め込む時に自由なUIにすることができます。

そうchrome-devtools-mcpを使えば。

↓詳細はリプに。

[山口周 @shu_yamaguchi]

むちゃくちゃ面白いです。たまりません！

[ハシモトタクマ / FunTech @tkm_hmng8]

【ANRIウェブサイト実装におけるAI活用】

正直、今回AIがなければ工期内での実装は困難でした。いくつか、これまでやったのないアプローチをしたので、以下にまとめます。

①Claude Codeでマークアップ部分を一気に実装
コードベースの文脈、HTMLの構造上気をつけたい点などを、システムプロンプトで制御しつつ、スクショを元に一気に実装してもらいました。ただし、スタイリングは自分で実装しています。どうもCSSのセンスがなく、任せるのは微妙でした。tailwindも試してみましたが、今回ウェブ作品のように、演出を多用したようなものだと柔軟性に欠ける（というか自分でやった方が早い）という印象でした。

②0→1をつくってもらって、リファクタする
機能をつくる時に、0→1のコードをAIに書いてもらって、そこからリファクタするという流れが多くなってきました。例えばスワイプ動作でページ遷移をするという機能を作る際、イベントリスナーへの登録、加速度の計算、0への減衰、、、など、0→1の負荷が高いですが、AIに書いてもらうことで、あとはそれをリファクタリングしていくだけ。作業スピードが高くなったというより、認知負荷が低くなった気がします。ちなみに、コードベース全体の把握が必要なことはClaude Codeが優秀でしたが、純粋関数というか機能に特定させればo3の方が正確で早い印象でした。エディターはCursorです。

ただ、これは考えものかもしれなくて、0→1を書く思考力が落ちてる気もします。AIに文章作らせるようになってからちょっとした文章を書くのとかも下手くそになってしまったのと一緒です。ただ、どうしてもこの手法が早くて楽なので、これは不可逆かもしれません。文章を書く能力とコーディングスキルは密接に関わってる気がするので、この習慣が続いた時どうなるのか心配です。

③OSSのソースを深く掘れるようになった
ライブラリをインストールするより、クローンする方が早くて柔軟にできてしまう。。AIにライブラリのコンテクストを理解させることで、かなり深くまでライブラリを理解して、拡張することができるようになりました。今回WebGLのレンダリングはThree.jsに依存しているのですが、例えばMaterialはShaderChunkを書き換えて独自マテリアルにしています。AI以前はあの膨大なShaderChunkを理解するのは骨の折れる作業でしたが、ずいぶん簡単になりました。

ただし、これもちょっと懸念もあって、OSSの作者としてはせっかくユーザーが使いやすいように設計したというのに、クローンしてAIに使わせるんじゃ、努力が無駄になるじゃないか、、って気持ちになりそうで、OSS文化が崩れていくんじゃないかと心配です。そうなると結局、AIに学習するためのOSSも廃れてしまいかねません。

[ハシモトタクマ / FunTech @tkm_hmng8]

ANRI Inc.@ANRI_VC のウェブサイトリニューアルにおいて、実装/デザインを担当しました

https://t.co/1WD0qeusbS

タカヤさん@198Q による3Dロゴの質感の再現、各デバイスで使いやすい操作性を追求しました

[Brandon K. Hill | CEO of btrax 🇺🇸x🇯🇵/2 @BrandonKHill]

🚀 本当は教えたくない UI/UXデザイナー向け AI 神ツール10選
デザインの効率とクオリティーが爆上がりする、使えるおすすめツールをスレッドで一気に紹介します。ブックマーク推奨。#UIデザイン #UXデザイン #AIツール

[morph🥑 @morph_67]

cloude、画像から読み込んでのスタイルの再現は苦手・・？

[morph🥑 @morph_67]

@Ittyanm @Ittyanm
ありがとうございます・・！ぜひ繋がれたら嬉しいです！FoFの方もイベント参加させていただく予定です・・！

[morph🥑 @morph_67]

北海道に住んでから現地開拓できていないので、今年はデザイナーの横のつながりを作る！

[上司ニシグチ @joshinishiguchi]

フライヤーをデザインするとき、この本がめっちゃ重宝してます。古めの本やけど…

[スズショー｜デザイン @suzusho1115]

【もうそれはノイズブラーですねん】
グラデの境界があいまいで、よく見ると粒子っぽい素材は「noise blur」で見つかります。noiseはノイズで、blurはボカシって意味です。なんとなく上質なイメージに見えますね。3枚目のように、くすみ系ノイズブラーもナイス。本日もお疲れさまでした😊グッナイ🌙