もしアプローチが再利用可能じゃなくて、再構築可能だとしたらどうなる？私たちは、新しいデザインにプラグインできるコンポーネントを作るという考え方に縛られている。好きなコンポーネントができたら、その定義をマークダウンで作成するようツールに頼んでもいいんじゃない？後で、そのコンポーネントを再利用したい新しいデザインをする時に、ツールにマークダウンを読ませて、そのコンポーネントを使う時にそれを使うように指示すればいい。未来はもっと柔軟で面白くなると思う。

クラウドデザインが再利用可能で見栄えのいいコンポーネントやレイアウトをデザインする根本的なストーリーブックの問題を解決するとは思えない。FWIW、クラウドコードは良いサンプルがあればそれを基にスキャフォールディングするのは得意だけど、今後は変更や抽出がほぼ「無料」になるから、そういうのは必要ないっていう意見もある。私はあまり納得してないけど、その意見は理解できる。

PenpotのUI自体はSVGで作られてなかったっけ？それとも途中で変えたのかな？

私が出会ったUXデザイナーたちは、主に製品全体の一貫性を確保する役割を担ってたよ（多くの開発者はスペーシングやフォントサイズに対してかなり無頓着だから）。時々、特に製品に新しい色を加える必要があるときに、新しいフローやレイアウトを提案してくれる。だからFigmaみたいなツールは、その点では便利だね。いろんなプロパティをいじるだけだから、反復が簡単なんだ（簡単なものから難しいものへ：ホワイトボード|紙にスケッチ、Balsamiqのようなワイヤーフレームツール、Figma|Sketch、CSSコード）。Figmaは直接フィードバックが得られるけど、コードはコンパイルが必要な場合もあるしね。

笑った。少なくともエージェンシーの世界では、ここ数年の一般的なアプローチは、デザイナーがFigmaでピクセルパーフェクトでコンポーネントベースの真実のソースを作成することだった（これも進化する！静的で完璧に納品されるわけじゃない）。これがクライアントが見るものでもあり、承認するものでもあるし、少なくとも彼らはFigmaデザインを取り入れたブランドデッキのスライドを見ることになる。とにかく、フロントエンドはFigmaからCSSに再実装するんだけど、通常は最良の近似（ピクセルパーフェクトじゃない）になる。なぜなら、Figmaが要素の「CSSをコピー」することを許可しても、それはほとんど使えないインラインCSSだから（親子関係やCSSで維持している変数、クラス階層などには気づいてないことが多いし）、測定単位も両者で必ずしも同じではないから。さらに、複数のフロントエンド開発者が独立してコンポーネントを再作成することが多くて（チーム作業として）、それがドリフトや異なる実装を引き起こすことがあって、面白いよね。で、技術スタックによっては、フロントエンドがStorybook [0]のような「フロントエンドの真実のソース」でこれらのコンポーネントを構築していることもあって、それがReactやNextJSアプリに直接注入されたり、時にはCMSのバックエンドコンポーネントに部分的または完全に再実装されたりすることもある（例：Sitefinity）。その後、人々はどれが真実のソースかを尋ねるけど、実際には「電話ゲーム」のような真実のソースの連鎖になっていて、典型的な「ブランドバイブル」には見えないんだ。さらに、メインプロジェクトの外にホストされたプロモーションランディングページのような、アウトオブボックスの将来のクライアントの取り組みが加わると、同じデザインの一部が全く異なるシステムで再実装されることになるかもしれない。[0] https://storybook.js.org

「コードを変えずに」というのはよくわからないけど、Figmaが製品に対して何か権威的なものを表しているという考え方は見たことがある。製品が自分自身のために権威的であるべきなのに。私も似たような経歴を持っているから、この見方にはアレルギー反応が出るんだ。

@kevinsyncの答えは100%正しいし、少なくともここ20年くらいはずっとこうだったよね。前は「フォトショップのファイルが（デザインの）真実を持っている」って言われてたけど、今はフィグマだ。でも、確かに「デザインからコードへのギャップ」は、デザイナーの意図が台無しにされるところで、フロントエンド開発者がデザインを見て「この文字列はもっとスペースが必要だ」とか、「コンポーネントに要素が多すぎたり少なすぎたりしたらどうする？」とか、「実際にどうスクロールするべきか」とか、「さまざまな画面サイズにどう反応するか」とかを考えなきゃいけないところだよね。この短いミーム動画は面白い/面白くないけど、あまりにも身近すぎて笑えない - https://www.youtube.com/shorts/r6JXc4zfWw4 - でも、確かに「デザイナーはコードを書かず、開発者はデザインをしない」って感じで、もちろん両方を上手くやる人もいるけど、そういう人はかなり珍しいよね。 :-)

そうだね、Figmaは大企業（と一部の小企業）でデザイナーがUIデザインを開発者に引き渡すための事実上の標準になってる。正直言って、あんまり良くないけど、前の選択肢よりはマシかな。でも、コードと直接連携して、視覚デザインをコードに翻訳する手間をほとんど自動化するツールには勝てないよね。Claude Designは試したことないけど、Figmaは楽しめないって感じてる（デザイナーってほどでもないし、GUIのページやオプションの山よりはコードの方が楽だな）。

大きな会社ではそうだね。エンジニアがスタイルの違いなく、同じ方法で実装することが求められるから。

ほとんどの人は自転車か車が欲しいだけだよね。みんなが飛行機を必要としてるわけじゃない。これはフィグマにかなり影響するだろうな。

クラウドデザインは明らかに製品のUIデザインに特化してる。ロゴを作るための製品を目指してるわけじゃないんだよね。

アンスロピックには画像生成モデルはないよね？CSSや絵文字、もしかしたら自転車に乗ったペリカン（SVG）を使ったLLMがあるけど。

Claude Designはただの意見満載のプロンプトだよね。https://www.lobsterpack.com/blog/claude-design-trenchcoat/ それに、SVGを描くのがあまり得意じゃないって自覚してるから、無理にやらせない限りはやらないみたい。ロゴを作るなら、バニラのClaude Codeで別プロジェクトみたいに描いてみるのがいいよ。「デザインエージェンシー」に質問をしてもらって、それに答えて、描きたいものの詳細なブリーフを作って、何をどこに描くかの正確な計画を出力させて、最後にチャットボットに個々のコンポーネントを描かせるためのサブエージェントを使って実際に描かせるのがいいと思う。それに「ラスタにレンダリングして、ちゃんと見えるか確認する」ステップも追加してね。

QuiverのArrow SVGモデルを試してみて。あれはその手のことに特化して作られてるから、もっと良いはずだよ。

そうそう、あれは彼らのプレイグラウンドを基にしてるから、「遊び道具」って表現がぴったりだね。あれはその周りのラッパーみたいなもんだ。Claude Codeからのデザイン出力は確かに良くなってるけど、真剣なデザインの競合を置き換えるにはまだまだ時間がかかりそう。

一つのデザインシステムをちゃんと設定した後、すぐに使用量がなくなった経験があるよ。二つ目もかなり近いところまで行ったけど。でも、これはリサーチプレビューだから、きっと変わるよね。最初のデザインシステムで作ったものには結構満足してる。IPAASスタートアップのために新しいフッターセクションが欲しかったんだけど、四つのオプションを生成してくれて、その中の四つ目がかなり良かった。少し改良してからClaude Codeに取り込んで（その統合機能はめっちゃクール）、CCが作って、デプロイして、完了！興味があったら、https://tediware.com/の下の部分を見てみて。「Origin story」が左にあって、右にサインアップパネルがあるところだよ。特に複雑な構築ではなかったけど、彼が発展させたコンセプトが気に入ったし、すごく簡単に実現できた。UIのアイデアはすごくいいと思う。まだ粗いけど、これがどこに行くかは見えるし、ポテンシャルがめっちゃあるね。

これはリサーチプレビュー中だよ。制限が低いのはわざとだと思う。参考までに、アプリの異なるページのスクリーンショットを12枚渡したら、すごく良い感じに修正してくれた。週のクォータの40%しか消費しなかったけど、まだ高いね。ただ、これは人によるかもしれない。

今日は、ロゴやブランディング、フォントなどを含む、以前に作ったデザインシステムを見直すために使ったよ。この言語を使ってるってことは、たぶん普通の人よりも進んでるし、期待も高いんだろうね。義理の妹が小さなアパレル会社をやってるんだけど、彼女は過去6年間でかなりのスキルを身につけたけど、最初は本当に苦労してた。素晴らしいアイデアはあったけど、それを実際に適用するのが難しかった。彼女を助けるために何かあれば、絶対に試す価値があったと思う。

注意すべきこと: • Claude DesignはOpus 4.7を使っていて、以前のモデルより高価だよ。 • まだ2日目だから、完成品じゃない。Anthropicの進化の速さには驚かされるね。 • もしClaudeをしばらく使ってるなら、Designはもう君のスタイルや好みを把握してるよ。他のAIデザインツールを使うなら、最初からやり直しになる。長い目で見れば、それが良い結果を生むと思うよ。

10分で素晴らしい結果が出たんだけど、その後の使用制限がきつくて、今は1週間待たなきゃいけない。ZIPファイルのエクスポートはできたけど、ZIPの中身をStitch With Googleに入れてみたけど、あんまりうまくいかなかった。

Claude Designを使って、数週間取り組んできたデザインをどう出力するか見てみたんだ。十分なプロンプトと要件書を与えたら（ビジュアルは与えなかったけど）、出力はかなり良かったよ！スタイルには全然合わなかったけど、論理的なコンテンツのグルーピングやIAの決定をしてくれたから、自分の探索に取り入れることにした。全体的に良い印象を持ったよ。それからTwitterをスクロールしてたら、他の誰かが自分の「成功ストーリー」を投稿してて、そのデザインがClaude Designが作ったモックアップとほぼ同じだった。笑。均質化の問題は、AI生成のテキストやコード、画像が均質的なトーンや感触を持つのと同じように、こういうツールにもあるだろうね。

わあ、これはかなり悪い結果を生んだね（アプリ）。Claude Designの方がずっと役立つけど、どちらも20分くらいしか使ってないんだ。