「Figmaライクに」と指示すると、Figmaで編集しやすいワイヤーにしてくれます。 「Figmaライクに」と指示しない場合↓ 「Figmaライクに」と指示した場合↓
ClaudeはSVGで生成することがあるため、「HTML/CSSで」と指示するのがお薦めです。
「code.to.design」のプラグイン↓ https://www.figma.com/community/plugin/1222554159237609568/code-to-design-playground プラグインをRUNし、Claudeで生成したコードをペーストする。その後、「Update canvas」を押すとFigmaにフレームが配置されます。 Claudeで生成したコードがSVGだと、中の要素はフレームじゃないのでAutoLayoutも適用されていません。手動でグループセクションからフレームセクションに変更し、AutoLayoutする作業が必要です。 コードがHTML/CSSであれば、フレーム化され、AutoLayoutも適用されています。 ぽちぽちするだけで複数ページを作成できました。
「Figma to Code」のプラグイン↓ https://www.figma.com/community/plugin/842128343887142055/figma-to-code-html-tailwind-flutter-swiftui プラグインを起動中にフレームを選択するとコードが表示されます。 そのコードをCreateにペーストすると、下記のような画面が生成されました。