⚔️

CursorとWindsurfの二刀流! AI駆動開発でコーポレートサイトを昨日リリースしました!

に公開

tl;dr

  • 昨日リリースしたコーポレートサイト構築を振り返って、徒然なるままに
  • AIと人間は掛け算なので、0->1の創造性と100にする品質の責任は人間が担うしかない
  • コーポレートサイトを化石にしない。自社や製品を対外的に発信する装置・プロダクト
  • AIの力を借りても、コーポレートサイト作るのは大変!

昨日リリースしたコーポレートサイト構築を振り返って、徒然なるままに

昨日、創業のプレスリリースならびに、コーポレートサイトのリリースを迎えました。paid workとしてwebsiteをデザインしたことすらないデザイナーである、私がCursorとWindsurfを駆使して実装しました。もちろん、1人でやったわけではなく、周りのプロフェッショナルの協力もありながら、です。紆余曲折あり、正味2週間以下くらいで、創業に向けて、プロダクトの設計もやりながらというタイトなプロジェクトでした。ターゲットに向けてクオリティも担保しながら、なんとか間に合わせられたのは、CursorとWindsurfのおかげ! だけども、めっちゃ疲れた!という話を書きます。
https://www.dress-code.com/
(英語がメイン、日本語訳くらいのノリで作っているので、英語も見ていただけたら喜びます。)

AIと人間は掛け算なので、0->1の創造性と100にする品質の責任は人間が担うしかない

まずは、Good/Badの箇条書き。

良かった、楽しめたところ

  • 正味2日で最低ラインのWebsiteの外形を作ることができた
    • この心理的安全性ったら計り知れなかったです… リリースが間に合わないことへの焦りが減った
  • Tab補完機能が便利!
    • 単純な作業を連続してやるときに、とても助かった。(確認コストを考えるとAgentより効果的な場面が多かった)
    • Tailwind CSSもほぼ覚えてなかったが、なんとかなった
  • 記法を細かく覚えていなくても進められる
    • ReactやらTypeScriptちゃんと書いた経験ゼロでもいけた
      (複雑な実装のないWebsite程度のことなので、アレですが)
      • デザイナー的には、Stateとかどうやって書くのか何も知らなかったけど、動くものできた
    • 複雑なものじゃなければ、便利な辞書とともに英語書いている感覚
  • WindsurfとCursorを二刀流
    • Agentにやらせるものは、指示出してそれ待っている間に、自分は一方のEditorで書く
    • 月500回の高速リクエスト枠を使い切ったあとは、待ち時間長い問題への解決策としても
    • それぞれWrite mode, Agent modeを同時進行させたり
    • マルチタスク野郎には、ありなのかも(ただし、疲れも2倍)

もやっとポイント

  • 「道中の作業が速くなった」であって、「楽になった」わけではない
  • Tab補完をもっと速く出してもらえるような課金がしたい
  • Agentで作らせたページのスタイリングのお直しが大変だった
  • コンテンツを作る、0->1するのは、人間がPromptしなきゃいけない

どんな感じでやってたとか、具体的な部分は、以下の記事で紹介してくれてます!
https://zenn.dev/dress_code/articles/7b5c02fda4d436

総括すると、、、
AI Agentとの格闘を通じて、「誰かに何かを作ってと指示する仕事(AIへの指示を含む)を頼むこと、それすなわち自分が作ること」ということが、身に染みました。お仕事の基本かもしれません。

自然言語的に表現するなら、以下のような感じ。

AIと人間は掛け算。人間が0にしかならないときは、AIと掛けても0のまま。クオリティなどを100にする、つまりは、完成させるには、人間が100を作らない限り、AIだけで100は作れない。

もう少し厳密に表現しようとするなら、以下のような感じ?

R₁ = i
Rₙ₊₁ = i · (Rₙ)^a (n ≥ 1)

iが人間で、aがAIの力。

ページやコンポーネントなど、設計開発対象それぞれにおいて、0->1の産みの苦しみと、99->100の送り出しは、現時点ではAIに任せきりにできない。一方で、1->99の工程は加速している分、サイクルが早く回ってくる。いわゆる発想や意思決定とかが、頻度高く求められるような感覚を持ちました。AIに限らず、ヒトの手を借りてやる仕事は全部そうかも。

90対90の法則と照らし合わせて考えてみると、90%の仕事はAIに任せて、最後の10%の仕事は人間がやっている。その大変さは、釣り合っているはず。AIって人間に大変なところ押し付けてくる仕事できないやつか🤷

AI使って楽になるんやーとか思ってたんですが、全く違いました。しかし、楽したいので、もっとAIに裁量を持たせて育てて、仕事をまるっと任せていきたいと思います。AI育成ゲームを始めたい。「なんかいい感じにやっといて」という指示でやってくれるように。

コーポレートサイトを化石にしない。自社や製品を対外的に発信する装置・プロダクト

コーポレートサイトが化石と化していくことは、あるあるだと思います。自分で実装までやってしまった分、愛着が湧いているので、今後も育てていきたいと思っています。
「コンパウンドプロダクト開発組織」として、核となるプロダクトだけでなく、コーポレートサイトも対外的に発信する装置として、コンパウンドプロダクトの一部として捉えるのが、良いのかもしれません。
これからのデジタルプロダクトデザイナーは、アウトプットの形式に囚われてはいけないのだろうなと、しみじみ。

AIの力を借りても、コーポレートサイト作るのは大変!

AIで簡単にWebsiteが作れるぞ、とか言ってる人、思っている人、気をつけてください!
AIの力を借りても、大変なものは大変です! めっちゃ疲れます!

とはいえ、プレスリリースがリュウに勝てて、社内で盛り上がったり、苦労も少しは報われました。
社内Slackでの盛り上がり
プレスリリースランキングトップ

この記事は、コーポレートサイトのリリース日(4月24日)に書いたので、できたてほやほやです。この記事も例に漏れず、Cursorで書いてますが、0->1も99->100も、私が書いてます。
とても疲れたので、今日はお休み。

Command+Pでファイル移動する癖がついて、Browserを触ってるときもCommand+Pして、印刷モーダルを開いてしまう後遺症に悩まされています。エンジニアあるあるでしょうか。
Browserのショートカットキーを変更してきます。

DRESS CODE TECH BLOG

Discussion