vibe codingで作ったウェブサイトが、デザイナーが作ったように見えるまで
How our vibe coded website looks like a designer made it
Railcode創業者のYakko Majuri氏が、コーディングエージェントを活用してデザインセンスを磨き、遊園地をテーマにしたウェブサイトを制作した過程を語る。初期のローラーコースターのプロトタイプから、アトラクションのストリップ、色の調整、ナビゲーションの動的な変化まで、試行錯誤を重ねて完成に至った。同氏は、LLMによる画一的なデザインが話題になる中で、コーディングエージェントのおかげでむしろデザインへの興味が高まったと述べ、センスの良いデザインを目指すことを勧めている。
LLMのデザインスロップについて多くが語られる一方で、コーディングエージェントのおかげで、私はむしろデザインにもっとワクワクするようになった。
HNでの議論
77- fiatpandas
OP、あなたはデザイン学校で教えられているデザインプロセスをうっかり発明してしまったね。公式に自分をデザイナーと名乗っていいよ。
1) 高レベルな機能目標を持つ
2) インスピレーションを得て、モチーフを考える
3) そのモチーフの中で広く探索する
4) 一つの方向性に絞り込んで反復する
5) 創造的に満足し、ステップ1の目標をデザインが満たすまで細部を微調整する。
- ananmays
デザイナーが作ったんだよ！あなたが行ったプロセスはデザインと呼ばれるものなんだ！
- jjcm
彼らの初期の試みの多くは、初期のgptの出力かclaudeのデザイン出力のように見えるね。どれも同じような匂いがする。でも、最近のimage->htmlのフローの良さを人々は過小評価しているよ。
私はgeminiにこのウェブページをプロンプトとして記述させて、それをimage -> codeパイプラインに投入した。私からの入力は0だということに注意してほしい:
https://html.non.io/railcode-animated
これはOpus 5.5がlow effortで構築したもので、そう、スペックはすでに元のサイトから作られていたけど、紫のグラデーションやclaude brownにならない0->1は今や十分に可能だよ。
- quicklywilliam
ここで一番のヒント: 色やフォントのような細部を調整するときは、Claudeにサイト内で使い捨てのピッカーツールを作らせるといい。
振り返ってみれば完全に当たり前のことだけど、思いつかなかった（おそらく25年間、ツールを再利用可能なコンポーネントという観点で考えてきたせいだろう）。
書いてくれてありがとう！
- chmod775
答え: なぜなら人間が反復プロセスでデザインしたからだ。LLMはただコードを書いただけだ。