https://gyazo.com/26dee2f82a5c7f37e9ed8d79b2cbd95f

AIの台頭でデザインとフロントエンド開発の垣根は融合しつつあるのか？

https://gyazo.com/197993e29396eb637ef17ec40ab9f9e9

https://gyazo.com/a0d3b138f91acf8756d4492cca86d9ff

https://gyazo.com/7b1889bfc92960c347f4d25e463e6a20

必要な画面と状態を洗い出す

AIで作業をさせる

デザインテイストを決めるのは意志力が必要

HTMLが出力できる

https://gyazo.com/bed04bfc36a48f499b950d9079f26945

完成イメージを描ける力が重要

努力・経験・センス

製品コードとデザイン・実装の垣根を溶かすにはどうするか？

https://gyazo.com/48b2d57fa7b9be7993ef3bb7e5ee79cd

https://gyazo.com/e8b6452741485a53637e753a9b703724

AIフレンドリーにコンポーネントベースで作っていく

自然言語からDesign to Code

https://gyazo.com/861bbb72ce672e80ce8a4bf9f19acb78

AIが作ったデザインを構造化する

https://gyazo.com/a8a81195231c6e09f2803223e27fbe94

Design to 製品 Code

Vueコンポーネントの製品コードを変換できるようになった

https://gyazo.com/850ae1114a1a329e97bf52fcce5bf22f

https://gyazo.com/fc4408952f3efe04b40adb8e2941cb38

Shifting from MCP to Skills ベストプラクティスの変遷を辿る

AIに設計を書かせるだけで、理解負債と実装漏れが激減した話 【フロントエンド編】

https://gyazo.com/45611cfe8222b955f9a620e50fff03c9

https://gyazo.com/2e04b0be0dbe3d452fb31a17ae848bbc

https://gyazo.com/04567e9bc80a0f8095c5786ebdec0332

https://gyazo.com/f2ec2bcb2c440194ddcfca7ca9df69d5

https://gyazo.com/5b06063d12c460bbe5c1eb7b3a608d82

https://gyazo.com/b239828fda043a469674189e78798d55

https://gyazo.com/27ec3140b468467a35652138e126cbe9

https://gyazo.com/e46a183d3612c44b5e4212149acec622