デザイナー以外でも、Claude Codeでデザインを作れるために取り組んだこと｜坪田 朋

クラシルで、CPOをしている坪田です。 この記事は、「デザインハーネス」イベントで登壇した内容をnoteにしたものです。 チャレンジしたのは「Claude CodeでUIデザインを作りきれるか」。 「ハーネス」という仕組みを作ったことで、デザイナーではないPdMやエンジニアがClaude Codeでデザインシステム（DS）に沿ったUIを作れるようになり、すでにチームの運用として回っている。 この記事では、そこに至るまでに作った仕組みと、つまずいたポイントを共有する。 まず実物からこの通り、同じ依頼でも、ハーネスの有無で出てくるUIはここまで変わる。 この比較で頼んだのは、日本語で「レシピ一覧画面を作って」のひと言だけ。色もフォントも指定していないのに、右側はDSの思想に沿ったUIが出てくる。 出力は技術スタックに合わせられる。ウェブならHTML、アプリならSwiftのコードで、そのまま動く

[kenjou]

AIで作るにしてもデザイナーが監修した方がいいでしょ。

[merlion45]

AIが絡むと低品質なもの、として見られる傾向にあるよね。結果がおんなじだったとしても。

[nWY2RhxQPXKQloX3z]

黄ばんだスライドテンプレがAIっぽさを感じる。会社として統一しているんだろうけど、今ではAI臭さを感じる。ここをどうにかしたほうが良さそう

[unmarshal]

言葉の使い方として、「ハーネスあり」って言い方がとても違和感がある

[loomoo]

ここまでなると、一からデザインを勉強するのと努力量は変わらないんだと思うけど

[tu_no_tu]

Anthropicは専用のデザインツールのClaude Designを用意してて使い勝手も良いし、Clause Codeとも連携できるので、まずはClaude Designでデザインするのが良いと思うよ。

[yarumato]

“この通り、同じ依頼でも、ハーネス（指示書、検証、フィードバック）の有無で出てくるUIはここまで変わる。思想に沿ったUIが出てくる。頼んだのは、日本語で「レシピ一覧画面を作って」のひと言だけ。”

[khtokage]

デザイン側のノウハウは詳しくないので助かります！ 個人的なサービスとかコードの方に集中したいけど、そこそこデザインちゃんとした上でトンマナ合わせたいとは思うんですよね。

[toaruR]

珠玉やなぁ(*´д｀*)ってか丸っと欲しい

[ichiken7]

“デザイナー以外でも、Claude Codeでデザインを作れるために取り組んだこと”

[underhill]

同じ語尾を繰り返すな、体言止めは考えて使えと教わらなかったのかな…こんな文章を読まされる部下がカワイソ

[mayumayu_nimolove]

オレンジが緑になっただけに見える