SHITAJIはFigmaのファイルを直接は読み込めませんが、Figmaのデザイン画面を スクリーンショットで生成AI（ChatGPT・Claude・Geminiなど）に見せ、 見た目を再現したHTML/CSSを書いてもらうことで、そのデザインをSHITAJI経由でStudioに 持っていけます。
1
Figmaのデザイン画面をスクリーンショットで保存する
Figmaで開いている画面を、画像として保存してください。スマホ向けの画面も 別途デザインしている場合は、そちらも保存しておくと、あとで生成AIに両方渡せます。
2
この指示文をコピーし、スクリーンショットと一緒に生成AIへ貼り付ける
指示文を生成AIチャットに貼り付けたら、続けて保存したスクリーンショットも添付して 送信してください。画像を読み込める生成AI（ChatGPT・Claude・Geminiなど）であれば お使いいただけます。
ヒント：ChatGPT・Gemini の「Canvas」、Claude の「Artifacts」など、コードをその場で 編集・プレビューできる機能があれば、先に有効にしてから貼り付けてください。 通常のチャット欄よりコードが壊れにくくなります。
コピーして生成AIに貼り付けてください
Figma（またはそれに近いデザインツール）で作った画面のスクリーンショットを、続けて貼り付けます。
この画像に写っているデザインを、そのままの見た目で再現した1つの静的なWebサイト（HTML/CSS）を作ってください。
【画像の再現について】
・配置・余白・文字の大きさ・色・写真やアイコンの位置を、画像を見ながらできるだけ忠実に再現する
・画像に写っている文章・数値・写真はそのまま使い、写っていない内容を新しく作り足さない
・画像は主にパソコン向けの1つの画面幅を表しています。スマホの画面幅で見たときも文字が
潰れたりはみ出したりしないよう、要素を縦に積み直すなどしてレイアウトを自動で調整してください
（スマホ版の見た目そのものは画像に無いため、そこは判断にお任せします）
・パソコン版・スマホ版など複数の画像を渡した場合は、それぞれ対応する画面幅の見た目として扱ってください
・画像には写っていない動き（ホバー効果・アニメーションなど）は、無理に付け足さなくて構いません
・使われているフォントが分かる場合はそのフォント名を、分からない場合は近い雰囲気の代替フォントを指定してください
続けて、次の一般的な制作ルールも必ず守ってください。
生成AIでWebサイトを作ってください。次のルールを必ず守ってください。
【出力】
・「トップページ」「会社概要」「お問い合わせ」のように内容ごとに複数のHTMLファイルへ分割しない。ページが複数あるように思える内容でも、すべて1つのファイルの中に、ページ内リンク（<a href="#id">であるセクションへ移動する形）で行き来する1枚の縦長ページとしてまとめる
・単一の静的HTMLファイルを1つだけ出力する（<!doctype html>から</html>まで）。ビルドや変換が要らない形にする
・<script>タグ、onclick等のon*属性、href="javascript:..."は使わない（後ですべて動かなくなります）
・コードだけを出力し、説明文やコードフェンス（```）は付けない
【レイアウト】
・中央寄せのコンテナには、max-widthだけでなくwidth:100%も必ず一緒に書く
・横並び（flex）の行の中に文字を入れるときは、その文字の要素にflex:1 1 auto; min-width:0を付ける
・複数の項目を2列以上に折り返して並べたい行は、親要素に必ずflex-wrapを付ける（子の幅を50%等の割合にしただけでは折り返さず、1行に押し込まれて文字が潰れる）
・要素の幅はcalc()のような計算式ではなく、単純な%かフラクション（w-1/2等）で指定する（計算式は変換・保存の過程で途中の画面幅の数値に固定されてしまうことがある）
・縦方向のmargin:autoは使わない
・見た目を揃えるためだけに<table>を使わない（本当の表組み以外では使わない）
【文字】
・アイコンと地の文（普通の文章）を同じ要素の中に混ぜない。<a>タグやボタンの中身も同様で、<span>アイコン</span><span>ラベル</span>のように別々の要素にする
・文章の一部分だけに背景色・枠線・パディングを付けたいときは、その部分を独立した要素として文章の外に出す
・見出し（h1〜h6）の中には文字だけを入れる。位置調整のための空の飾り要素は見出しの外に置く
・1つの文章の中で、色違いの強調を何箇所も作らない（強調したい色は1つにまとめる）
【画像・アセット】
・インラインSVGの色は、外部CSSではなくSVGタグ自身にfill="#xxxxxx" / stroke="#xxxxxx"として書く
・font-familyの先頭には、実際に<link>等で読み込んでいるWebフォントの名前を書く
・画像は実在するプレースホルダー画像サービスのURL等を使い、存在しないローカルファイルパスを書かない
【繰り返し要素】
・カード一覧などの繰り返し部分は、各アイテムの子要素の数・構成をすべて揃える（1つだけタグの数が違う、等をしない）
・項目ごとに絵柄が変わるアイコンは、アイコンフォントではなく画像（SVGの<img>など）にする
【動き】
・ホバー効果は:hoverとtransitionのCSSだけで作る
・出現アニメーションはopacity:0とtransitionの組み合わせか、@keyframesの中でtransform: translateY(...)のようにまとめて書く（translateだけを単独のプロパティとして分けて書かない）
・@keyframesを使うときは、0%（またはfrom）と100%（またはto）の両方を必ず書く（片方だけを省略しない）
・アコーディオン（開閉するFAQ等）はJSを使わず<details><summary>質問</summary>回答</details>の形で書く
・モーダル・カルーセル・スライダーなど、JSでの開閉が前提になる複雑な部品は作らない
【構造】
・<main>はページに1つだけにし、入れ子にしない。<main>自体にはclassやstyleを付けない
・内容のかたまりごとに<section>を分け、それぞれに見出し（h1〜h6）を1つ入れる
・リンクは、実際にそのページの中に存在するidや、実在するページのパスにだけ張る