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
89
デザインって“感覚”だけじゃない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
260
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
180
アニメがエンジニアをつなぐ!「エンジニアニメ」勉強会が巻き起こすCo-Creationの波
ohmori_yusuke
0
150
組織が大きく変わろうとするとき、自分はどうありたいかを考えている
ohmori_yusuke
19
6.6k
技術以外をきっかけに交流するエンジニア向け勉強会
ohmori_yusuke
0
59
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
150
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
1
590
市町村のオープンデータを使って「公園・トイレの口コミマップ」を作ってみた
ohmori_yusuke
0
380
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
190
Other Decks in Programming
See All in Programming
Go言語の特性を活かした公式MCP SDKの設計
hond0413
2
550
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
900
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
260
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
490
CSC305 Lecture 08
javiergs
PRO
0
280
Developer Joy - The New Paradigm
hollycummins
1
370
Software Architecture
hschwentner
6
2.3k
Cursorハンズオン実践!
eltociear
2
1.2k
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
Pythonに漸進的に型をつける
nealle
1
130
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
500
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Building Adaptive Systems
keathley
44
2.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
The Invisible Side of Design
smashingmag
302
51k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
RailsConf 2023
tenderlove
30
1.3k
Unsuck your backbone
ammeep
671
58k
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
人間が学ぶべきなのは なのかもしれない
お わ り