Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザインって“感覚”だけじゃないVibe Codingからの気づき
Search
uutan1108
July 14, 2025
Programming
3
87
デザインって“感覚”だけじゃないVibe Codingからの気づき
https://meguro-lt.connpass.com/event/359809/
uutan1108
July 14, 2025
Tweet
Share
More Decks by uutan1108
See All by uutan1108
勉強会から始まった僕のDevRel~新卒エンジニアがつないだ2年間の軌跡~
ohmori_yusuke
1
220
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
アニメがエンジニアをつなぐ!「エンジニアニメ」勉強会が巻き起こすCo-Creationの波
ohmori_yusuke
0
140
組織が大きく変わろうとするとき、自分はどうありたいかを考えている
ohmori_yusuke
19
6.5k
技術以外をきっかけに交流するエンジニア向け勉強会
ohmori_yusuke
0
54
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
150
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
1
560
市町村のオープンデータを使って「公園・トイレの口コミマップ」を作ってみた
ohmori_yusuke
0
370
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
180
Other Decks in Programming
See All in Programming
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
190
CSC509 Lecture 03
javiergs
PRO
0
330
プログラマのための作曲入門
cheebow
0
540
Advance Your Career with Open Source
ivargrimstad
0
350
CSC305 Lecture 04
javiergs
PRO
0
250
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
460
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
610
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
690
株式会社 Sun terras カンパニーデック
sunterras
0
230
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.4k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Done Done
chrislema
185
16k
Faster Mobile Websites
deanohume
310
31k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Scaling GitHub
holman
463
140k
Designing for Performance
lara
610
69k
Mobile First: as difficult as doing things right
swwweet
224
10k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Statistics for Hackers
jakevdp
799
220k
Being A Developer After 40
akosma
91
590k
The Language of Interfaces
destraynor
162
25k
Practical Orchestrator
shlominoach
190
11k
Transcript
デザインって “感覚”だけじゃない Vibe Codingからの気づき めぐろLT #29 「Vibe Codingで作ったものをおしえてください」@三田
うーたん
自己紹介
自己紹介 • うーたん ◦ 𝕏:@uutan1108 ◦ サーバーサイドエンジニア 3
Vibe Coding って書いてますが、 コードを少し手書きしました
成果物
https://engineers-anime-2025-lp.pages.dev/
苦労した点
自分のデザインセンスがない
自分のデザインセンスがない - 大体 AI が出してきたコードを採用しつつ、細かい 修正を依頼していく - (例)全体的に明るい色を使って -
(例)窮屈だからいい感じに間隔を開けて - AI にアドバイスを求める - 参考のページの URL を渡すが、CSS や HTML などのコードし か読まないのでイラストが多いサイトだと AI はいいアドバイスを くれない
コンテキストにスクショを渡すより、 言葉で書いた方がいい
None
Cursor の場合、 こんな感じで画像をコピペできる
画像を読み込んでも意図が伝わらない
画像を読み込んでも意図が伝わらない - 画像を読み込んでくれるが、画像から対象のコードを AI で修正するのはしんどい - 違う箇所を修正してくる - 多分、人間がエディタの検索でコードを特定して、AI
にコードを 渡した方が早い - Cursor (コードを書く用途)で画像をコンテキストに渡す場 面が分からない。教えてほしいです!
AI は SVG を書くのが得意
None
アイコンは全て SVG で、AI が書いたやつ
便利〜!
複雑な画面を作るのは難しい
「“いい感じに ”タイムテーブルを作って」
None
妥協したタイムテーブルの デザイン
理想のタイムテーブルのデザイン - 最初は、時間に応じて枠の大きさが変化 するようにしたかった - ライブラリなどは用いずに CSS のみで実装し ようとしたが厳しかった
- 対話して「ここがズレてる」などしながら開発し たが、どんどん破壊されていく...
もしかしたら、 AI も CSS が苦手なのかもしれない
“いい感じに ”複雑な画面を作るのは難しい 具体的な指示なしで
まとめ
人間が学ぶべきなのは なのかもしれない CSS
人間が学ぶべきなのは なのかもしれない
お わ り