お店のサイトを、AIで作り直すプロンプトとスキル

0準備：スキル2つと、Higgsfield

Claude Codeのターミナルで、下の2行を1つずつ貼ります。動きの気持ちよさと、デザインの仕上げをClaudeに覚えさせるスキルです。

npx skills@latest add emilkowalski/skills

コピーする

npx skills add pbakaus/impeccable

コピーする

次に、このサイト作りの手順をまとめたスキルを入れます。ファイルを保存して、プロジェクトの .claude/skills/shop-site-remake/SKILL.md に置いてください。

スキルを保存する（SKILL.md）

最後に、Claudeの「設定 → コネクタ → カスタムコネクタを追加」で、下のURLを貼ります。これで、ClaudeがHiggsfieldで写真と動画を作れるようになります。

https://mcp.higgsfield.ai/mcp

コピーする

Higgsfieldの写真と動画は、クレジットを使います。見本では、写真3枚と動画2本を作りました。

1お店を選んで、情報をコピー

Googleマップで、評価は高いのに、サイトが古いお店を探します。店名、住所、電話、営業時間、定休日、メニューと値段、口コミを全部コピーします。商品の写真も2枚（商品だけの写真と、出し方がわかる写真）保存します。

2Claudeに、これを貼るだけ

空のフォルダをClaude Codeで開いて、写真2枚を入れ、下の文章を貼ります。[ ] のところを自分のお店に書き換えて、最後にコピーした情報を貼ります。

Read the skill shop-site-remake and follow it step by step.

Shop: [SHOP NAME], [CITY]
Google Maps info (pasted below): name, rating, address, phone, hours, closed days, menu with prices, reviews.
Current site: [URL] (keep their story, menu, media mentions and Instagram; never invent facts or prices).
Hero product photo: attached (product.jpg). Serving photo: attached (served.jpg).

Build a one-page premium scroll site:
1. Higgsfield: make 3 stills of EXACTLY this product (hero on dark / exploded layers on light / served), show them to me before any video.
2. Two 5 s clips with start + end frames (hero to exploded, exploded to served), then split them into frames for desktop and phone.
3. index.html: sticky canvas scrubbed by scroll, leader-line labels on the exploded layers with the shop's real selling points, then all the shop's real sections (pillars, menu, story, media, reviews, Instagram, access with tap-to-call and map).
4. Use the motion skill and impeccable for the design and the final polish.
5. Smooth on phones: wait for all frames, rAF loop with inertia, DPR cap 2.
6. Footer line "Concept redesign, not the official site" + noindex. Deploy a preview link.
Ask me for anything you need before you start.

[paste the Google Maps info here]

コピーする

Claudeが写真を3枚作って見せてくるので、商品が本物と同じかを確認してから「OK」と返します。

3実際に使った、写真のプロンプト

見本のバーガーで使った文章です。自分の店の商品に合わせて、材料のところを書き換えてください。商品の写真を参考画像として添付します。

① 完成の写真

Photorealistic restaurant food photograph. Recreate EXACTLY the burger in the first reference photo, copying it ingredient by ingredient: tall glossy golden-brown brioche top bun with a few scattered white sesame seeds and a wooden pick stuck in the top; THREE thick, wide, hand-formed beef patties made of coarse ground meat with craggy, crumbly, uneven edges and a deep brown seared crust (rough and irregular like in the reference, not smooth discs); thin American cheese slices, deep yellow, placed exactly as in the reference: one slice just under the top bun peeking out on the right edge, one slice between patty 1 and patty 2 melting into a big glossy drip at the front left, one slice between patty 2 and patty 3 with a smaller drip at the front left (cheese only drips in those places, the rest is tucked inside); TWO long dill pickle slices cut lengthwise (sandwich-style planks, not round chips) lying across under the patties with their ends sticking out; one thick raw white onion ring slice; two thin red tomato slices; ruffled green leaf lettuce overhanging all around; toasted bottom bun with a thin line of yellow mustard. Composition copied from a premium burger website hero: the burger sits on a crumpled sheet of white wax paper laid diagonally on a dark charcoal wooden table, camera slightly above at a 3/4 angle looking down about 15 degrees, 70mm lens, burger placed centre-right and filling about half the frame height, generous dark empty space on the left for headline text. Deep charcoal-black background fading to near black, warm key light from upper left, subtle rim light, real juicy textures. No text, no logo, no hands, no other props.

コピーする

② バラバラの写真（①を参考画像に）

Photorealistic high-speed food photograph, dynamic mid-air exploded burger: the EXACT burger from the first reference image (same brioche bun with sesame seeds, same three craggy coarse-ground seared patties, same deep-yellow American cheese, same two long lengthwise dill pickle slices, white onion ring, two tomato slices, ruffled green leaf lettuce, toasted bottom bun with yellow mustard) has been tossed upward and its layers are flying apart in the air. NOT a neat straight stack: each layer floats at its own slight tilt (5 to 20 degrees, some tipped toward camera, some away), layers drift slightly left and right of the centre line, gaps between layers are uneven, the top bun tilts back showing a hint of its toasted underside, the cheese slices sag and drape over the patties and stretch in melted strands, the two long pickle slices tumble at an angle, onion ring and tomato slices rotate, lettuce flutters, a few sesame seeds, crumbs and tiny droplets of juice float around. Order top to bottom: top bun, patty with cheese, patty with cheese, patty with cheese, pickles, onion, tomatoes, lettuce, bottom bun. The whole exploded burger fits in frame with margin, placed slightly left of centre, clean empty space on the right for labels. Seamless warm cream background (#F3EBDD), bright soft studio light, crisp frozen motion, soft shadows. Camera at eye level, 3/4 view, 85mm. No text, no logo, no plate, no hands.

コピーする

③ 出したときの写真（①と、出し方の写真を参考画像に）

Photorealistic restaurant food photograph. The EXACT burger from the first reference image (tall glossy sesame brioche bun with a wooden pick, three craggy coarse-ground seared beef patties with deep-yellow American cheese dripping at the front left, two long lengthwise dill pickle slices, white onion ring, tomato slices, ruffled green leaf lettuce, toasted bottom bun) served exactly like the second reference image: inside a rust-brown woven wicker basket lined with crinkled white wax paper folded up over the rim, burger on the left side, a generous pile of golden crinkle-cut fries on the right. The basket sits on a dark charcoal wooden table, camera at a low 3/4 angle, 50mm, whole basket in frame, centred, some dark space around. Warm moody diner light from upper left, faint warm bokeh lights far behind, a little steam. No text, no logo, no hands, no drinks.

コピーする

4実際に使った、動画のプロンプト

動画AIに「最初の1枚」と「最後の1枚」を渡して、5秒の動画を2本作ります。

A：①から②へ（バラバラになる）

Premium slow-motion food commercial shot, photoreal. The burger resting on white wax paper on a dark wooden table slowly lifts straight up off the paper and floats toward the camera; the wax paper and table fall away out of the bottom of frame. As it rises, the burger gently comes apart in mid-air: the top bun tilts back and drifts up, the three seared patties separate with the melted yellow cheese stretching into long glossy strands between them, the two long pickle slices tumble out, the onion ring and tomato slices rotate apart, the lettuce flutters, sesame seeds, crumbs and tiny juice droplets spin in the air. Each layer turns slowly at its own angle, no layer moves in a perfectly straight line. At the same time the dark background brightens smoothly into a seamless warm cream studio backdrop, and the camera settles at eye level. Smooth continuous motion, no cuts, the same burger throughout, consistent ingredients, no new objects, no text.

コピーする

B：②から③へ（カゴに戻る）

Premium slow-motion food commercial shot, photoreal. The burger layers floating apart in mid-air over a cream backdrop drift back together and re-stack in order, bottom bun first: lettuce, tomato, onion ring, the two long pickle slices, the three seared patties with melting yellow cheese, then the top bun settles on top and a wooden pick drops in. The assembled burger descends and lands softly into a rust-brown woven wicker basket lined with white wax paper that rises into frame, while golden crinkle-cut fries tumble down and pile up on the right side of the basket. As it lands, the cream backdrop darkens smoothly into a warm dark diner with soft bokeh lights and the basket comes to rest on a dark wooden table, a little steam rising. Smooth continuous motion, no cuts, same burger throughout, no new objects, no text.

コピーする

最後の1枚を無視されたときは、逆の動きを作って、逆再生すると、ぴったり止まります。

つまずきやすいところ

• スマホでカクカクする：コマを全部読み込んでから動かす、が一番効きます。スキルに書いてあるので、Claudeに「スマホでなめらかにして」と言えばOKです。
• スマホでぼやける：小さいコマを引き伸ばしているのが原因です。スマホ用は、商品のまわりを切り出したコマを使います。
• 商品の形が変わる：プロンプトで材料を1つずつ書いて、「EXACTLY」を入れると、ずれにくくなります。
• お店に見せるまでは、検索に出ない設定（noindex）と、「非公式のリメイク」の一言を入れておきます。