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
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
450
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
260
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
810
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
500
CSC305 Lecture 10
javiergs
PRO
0
260
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.4k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
380
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
15k
The Cult of Friendly URLs
andyhume
79
6.6k
Music & Morning Musume
bryan
46
6.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
A Tale of Four Properties
chriscoyier
161
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Optimizing for Happiness
mojombo
379
70k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Building Applications with DynamoDB
mza
96
6.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Visualization
eitanlees
149
16k
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
人間が学ぶべきなのは なのかもしれない
お わ り