2026/04/19 4:19
Claude のデザインに関する考察と感情
RSS: https://news.ycombinator.com/rss
要約▶
日本語翻訳：
要約：中心的な論点是、Figma の専用でロックされたファイル形式がネイティブのスキーマを持たず、深いエイリアシングおよび未文書化されたプリミティブに依存を迫られること（例：946 色の変数を含むネストされたグループのあるファイル）であり、これがコードトレーニング済みの AI モデルが設計論理を正確に解釈することを妨げる。LLM はこれらの特定の不透明な Figma 構造ではなくコードに対してトレーニングされているため、「Figma Make」のような現在のツールは、設計ファイルが依然として規範的であると示唆することでユーザーを誤導し、実質的にワークフローを新しいエージェント時代と不相容の専用エコシステムにロックしている。その対応として、Claude Design とような新たなツールは、「HTML と JS をすべて徹底する」というアプローチを取り、コードと直接統合してレポジトリから AI エージェントへ供給される統一されたフィードバックループを創出する。著者は業界における分岐の予測を行う：一方は誠実なコード連結による生産ツールへの道筋、他方は Photoshop に似た制約のない探求環境への道筋となる。クリーンなコードからのこの転換を批判しつつも、著者は Sketch などの競合業者に対してネイティブ機能に安住するのではなく、粒子エフェクトやメッシュ変換などの特定機能を備えた革新を促し、Figma の形式が AI エージェントに必要なトレーニングデータへの含まれにくさを指摘している。
テキストを翻訳
（必要に応じて；そうでない場合は元のものを繰り返す）：
Summary:
The core argument is that Figma's proprietary, locked-down file format lacks a native schema, forcing reliance on deep aliasing and undocumented primitives (exemplified by files containing 946 color variables within nested groups) that prevent code-trained AI models from accurately interpreting design logic. Because LLMs were trained on code rather than these specific, opaque Figma structures, current tools like "Figma Make" are misleading users by suggesting the design file remains canonical, effectively locking workflows into a proprietary ecosystem incompatible with the emerging agentic era. In response, new tools like Claude Design adopt an "HTML and JS all the way down" approach, integrating directly with code to create a unified feedback loop where repositories feed AI agents. The author predicts a fork in the industry: one path toward honest, code-linked production tools, and another for unconstrained exploration environments similar to Photoshop. While criticizing this shift away from clean code, the author also urges competitors like Sketch to innovate with specific features (particle effects, mesh transforms) rather than resting on native capabilities, noting that Figma's format prevents its inclusion in necessary training data for AI agents.
本文
前日、Claude Design を試し、この全体像がどのように定着していくかについての説得力のある仮説を持つに至りました。
プロダクトチームが拡大し、デザイン部門がエンジニアリング組織内で自らの存在意義を証明し始めた頃、システム化への圧力がかかりました。そこで Figma は、それを実現するための独自の primitives（基本要素）――コンポーネント、スタイル、変数、props など――を編み出し、これらを駆使しました。これらの概念にはプログラミング由来のものと独自のものがあり混在しており、全体として何にも綺麗に対応付けることはできません。ガイドラインは進化し続ける一方、移行作業が積み重なり、そのいずれかを自動化しようとすると、結局は質の低い数かつかりのプラグインに頼ることになってしまいます。この生物はすでに毛深い状態であり、今では専門的なデザイン職種の役割の一つとして、「システム自体を整理整頓すること」が求められています。
Figma とコードの間には、どちらが「真実（source of truth）」となるべきかという緊張関係が常に存在しました。Sketch を破って Figma が勝利した部分の要因は、そのツールを正典と位置づけた点にあります。
しかし、その勝利には見えない代償がありました。プログラム的に操作するには扱いにくく、大きく文書化されていない形式を採用した結果、Figma は意図せずして、エージェント（自律型 AI）時代のトレーニングデータから自らを外れてしまいました。LLM が学習したのはコードであり、Figma の primitives ではなく。その結果、モデルたちはそれら从未学ぶことになりました。コードがデザイナーによる記述變得いになり、エージェントもまた進化し続けるに従い、「真実」の所在は自然と再びコードへと移行していくことになります。そして、Figma が過去 10 年間にわたって導入した那些複雑に組み合わされたインフラストラクチャと比較すると、まるで狂気の沙汰に見えます。「そのものの失われた近似値を細工し続けるよりも、実際にそこで生きている媒体で直接作業する方が合理的ではありませんか？お皿を作るつもりなら、なぜ器の水彩画を描くのではなくて粘土を直接成形すればよいのに？」
職場では、コードに直接実装されたデザインの変更内容を Figma へ反映させるための逆移植（back-porting）に相当多くの時間を費やしており、それは決して楽しいものではありません。このファイルを共有することはできませんが、公平な比較のために、Figma が自社製品のために作成した独自のデザインシステムファイルをお見せします。これは可能な限り能力のある最高のデザインシステムチームによって構築されたはずです。しかしながら……
- Figma の変数パネルには、946 のカラー変数がネストされたグループ「bg/desktopBackgrounded」などに整理されており、選択した単一の変数を展開すると、Light、Dark、FigJam-Light、FigJam-Dark、DevMode-Light、DevMode-Dark、Slides-Light、Slides-Dark という 8 つのモード固有の値が表示されます。
- モダルフッターコンポーネントがバリエーションプロパティエディタに開かれており、12 のバリエーションを示しています。ドロップダウンメニューには「DS Library Swap」「QA Plugin」「Growth Stepper」「Sharing Actions」といった様々な値が詰まっています。右側のパネルには「Border」「Second CTA」「Helper Text」などの 8 つの prop がリストされています。
- スライダーコンポーネントのエフェクトスタイルパネルで、「light/elevation-300-tooltip」というスタイル名が表示されています。これを展開すると、その完全な定義――黒色の 30% の深さを持つ 0.5px のドロップシャドウ――全体が現れます。これは CSS 変数に対応するものを文書化するための唯一の方法であるため、独自の命名されたスタイルとして定義されています。
- コボ（複合）入力コンポーネントには 16 のバリエーションがあります。レイヤーパネルの親要素は、「Default, Default, Close Button=False」「Default, Focused, Close Button=True」といった名称付けられています。
これらは Figma 自身のファイルです。Figma の自チームによって構築されたものです。これはゴールドスタンダードと呼ぶべきものです。
間違っているように見える色をデバッグしようと考えたとしましょう。コンポーネントを確認します。そのコンポーネントは変数を使用しており、その変数は別の変数へのエイリアスを指しています。さらにその変数はモードを参照しており、そのモードはインスタンスレベルで上書きされています。そして、そのインスタンスは、ライブラリスワップが適用されたネスト型コンポーネントの内部に存在します。この時点で、あなたはコードを書くことを考慮するかのほかに、田舎へ移住して羊飼いになることを検討しなければならないでしょう。なぜなら、もう少しだけこの作業を続けると、あなたの神様の心までもが壊れてしまうからです。
したがって、「真実」が再びコードへとシフトしていく中で、Figma は奇妙な立場に追い込まれています：かつてないほど非公式で、エージェント時代以前の手作業中心のシステムを保持している状態です。理性を持って設計する者が誰も今日からはじめようとしないようなものです。
私はここから先、デザインツールは 2 つに明確に分岐すると考えます――まるで Figma と、2016 年に同一の問い「私、デザイナーがアイデアを最も迅速に出すのを助けてくれるのは誰か？」に答えるために競合する全てのツールの間にある時計のリセットボタンかのようです。
spoiler: それは Figma Make ではありません。Figma Make は、すでに Kool-Aid（過信）を飲み干した人々が主にお得になるように感じられます。それは Figma のスタイル、コンポーネントライブラリ、そして独自の props（私がこれを「Prop Props」と呼びたがります）を読み取りますが、この新しい landscape においてのみ、デザインファイルを正典と pretenting（主張する）に留まる唯一のツールです。システムの中に留まりたい（あるいは留まらざるを得ない）人々のためのツールです。
Claude Design はその 2 つのツールの一つであり、全く異なる賭けを仕掛けます。「素材への真実（truth to materials）」というアーツ・アンド・クラフツの原則がありましょう――あるものはそれ自身の正体と作り方を正直に示すべきで、他のものを偽装すべきではないということです。Figma はその正反対の結果となりました：極めて硬直したスキーマの集合体に、「ただのフィーリングさ、人間よ」というフリーフォーマンのコスチュームを被せたようなものです。まるで Type-A パーソナリティが物理的にリラックスすることができず、内心で「フレームがネストされていない」「トークンが分離している」「何一つグリッドに乗っていない」と叫びながら、表面上は冷静な演技を強いられているようなもの。Claude Design は粗さを伴いますが、少なくとも自分が何であるかを正直に示しています：HTML と JS をすべて通じて。
そして、巨大な構造的利点を持っています：その sibling（兄弟）が Claude Code であることを考えれば。将来的には、Claude Design が直接アイテムを Claude Code に輸出し、逆に Claude Code から輸入する光景を想像できます。現在のオンボーディング機能ですでにリポジトリのインポートが可能になっています。デザインと実装の間でのフィードバックループ――人類誕生以来の摩擦源であったもの――は、たった一つの会話に収まります。
もう一つのこの瞬間から生まれてくるツールは、コードへの期待 вообще持たないでしょう。それは純粋な探求環境であり、長方形をドロップし、レイヤースタイルを重ね、ブレンディングモードやグラデーションをいじくり、システムやプロンプト慣習に縛られることなく完全に狂気に走ることができます。iPad アプリでペンスupport を兼ね備え、素早く多数の長方形を描いてみるのも良いでしょう。37signals は今すぐ本当に面白いことをできるかもしれません。あるいは反対の方向へ向かうのかもしれません――CSS エフェクトでできることの天井に縛られなくなった今、高忠実度なコラージュ制作に全振りし、想像力を解放するような、Photoshop のようなものになってもよいでしょう。Figma が 90% 以上の間、レイヤエフェクトの唯一の選択肢がドロップシャドウかブラーだったというのは、少し奇妙ではありませんか？
Sketch が Figma に襲いかかるその時間が急速に近づいています。もしこの話をヴィクトリア朝の子供に話したなら、おそらく脳卒中を起こしたでしょう。
Post Script
以下のメッセージは、Sketch と Figma の背後にあるチームのみを対象としています。どちらにも該当しない場合は、さっさと逃げておいてください。
- Figma へ： この投稿が Figma 内部の Slack で大きな反響を呼ぶ世界を目にしています。もしそれが事実で、あなたが Figma からこの文章を読んでいるなら：これは私が去年面接を受けていた時に雇用されたら防げた出来事です。あなたの損失よ、大所帯。
- Sketch へ： 頭から尻尾まで出しましょうか！悪辣にいきましょう！パーティクルエフェクトを追加してください。デボスエフェクトを追加してください。メッシュトランスフォームを追加してください。Fuck it、メタルシェーダーも追加してください。狂ってください。Mac ネイティブであることで安住することに甘んじてはいません。Cocoa を飲んでいるのをやめて、血を渇かせてください。
- お母さんへ： 悪口を言いましたのでご容赦ください。
Post-Post Script
Twitter の @jonnyburch は、同様の考えを持つブログ記事をリンクで共有しており、より深く探究したい方であれば非常に良きものです。