Stitch使ってデザインファイル作ってみた

先日参加したイベントでStitchを知ったので、絶賛AI-DLCでリニューアル作業中の保活手帳で使ってみました。

Stitch

私がまず入れたプロンプトはこちら。添付にPRD.mdと、Claudeと事前に壁打ちしていたカラーパレットを添付しました。

保活手帳というWebアプリを開発しています。いまHCDベースでリニューアルを検討しており、添付のPRDファイルをもとに作成を進めています。 画面遷移等はiPhoneの入力遷移（右chevronがあって、遷移してから入力等）を使ったりして、なるべく使う人がWebリテラシーがなくても使いやすいものを作りたいと思っています。 カラーパレットはchildcare-palette-v3ファイルで一応考えてはいますが、やわらかい雰囲気にしたいです。

出てきたスタイルガイドはこちら。わりとしっかりしているけど、特にフォント名とか書かれてないしまじでお手軽版って感じですね。
でも雰囲気はつかめるのでよさそう。

出てきたデザインはこちら。なんか一枚やけにぐにゃってますが気にしない。

丸ゴシックにしたいなと思って指示出したら遠くに別ファイルが作られました。（変にファイルの位置関係いじらなかったらちゃんと整列してくれそう）
「あれ、直ってないじゃん」って思ったら画面外で追加されるの結構困りますね。

コードベースからプロンプト作るとどうなるのか気になって作ってみたのがこちら。

こっちは特にカラーパレットを指定しなかった（というか現状のリニューアル版はまだモノクロメイン状態）ので、かなりシンプルな色味ですね。
でも結構いいものができてる気がします。園を追加するときにTIPS表示したりは思い付いてなかったので取り入れたいと思いました。

2パターン作ってみて、具体的なイメージができてる方がより作りたいものに近いものができるというのはコードと変わらないな、とは思いました。とはいえ、私はデザイナーじゃないのでアイデアが欲しいとか、いくつかデザインパターンを作って比較したい！ってときはここまで詰めなくてもいいのかも。パターン出しはStitch、作り込みはFigmaという感じかな？
ちなみにFigma Makeでも同じことできるのかなと思ってやってみましたが、現在のコードベースと似たものができました。

今までデザインはちょっと苦手意識があったりしたのですが、こうやってビジュアルが見える形で補助があればちょっと乗り越えられそうだなと思えたのもいいですね。自分の知識を増やしたり目を肥やせばいいパターンを作れる………！がんばりたいですねえ。