SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillshiggsfield-website

higgsfield-website

Frontend & websites

View repository

Updated 10-15 17:19

About this skill

Higgsfield Cinematic Website Builder

Build a cinematic scroll-scrub website from a short description with AI-generated videos (Higgsfield MCP), automatically verify it in the browser, and host it on request via the Higgsfield MCP.

Core principle (never omit): First generate ONE hero image or take one from the user, then pass this image as a reference to EVERY video clip. Consistency beats quality — a product/person that looks identical in all shots feels more expensive than four prettier but inconsistent clips.

Language: Interact with the user in German. The website copy is based on the target audience of the site — also ask about the target language in the interview.

Process (phases strictly in this order)

Phase 1 — Interview

At the start, ask the following questions via AskUserQuestion (max. 4 questions per round). If the user has already provided answers in their first message, only ask about the gaps:

  1. What should be created? (free description: brand/product/person, purpose)
  2. Input image: Does the user have their own image (product photo, portrait, location)? If yes → ask for the path and use it as the hero/identity reference. If no → generate a hero image with an image model.
  3. Video resolution: 4K or normal HD (1080p)? Point out that 1080p is the sweet spot and 4K costs significantly more credits — 4K is only worth it for a final showpiece render.
  4. Target language/target audience of the website copy (e.g. German for a local restaurant, English for an international SaaS).
  5. Target devices: Desktop only, desktop + mobile, or desktop + tablet + mobile (standard recommendation: all three)? Fewer devices = less optimization and testing effort (saves time and tokens); desktop only is enough, for example, for a showpiece or a demo, but for real client sites all devices should be included.

Template detection (hybrid): Assign the description to one of the 10 templates in references/templates.md (Luxury Product, Journey, Portfolio, E-Commerce, Restaurant, Real Estate, Automotive, SaaS, Agency, Gym) and suggest it to the user for confirmation — including the shot structure. If none fits, design your own shot structure following the same patterns (hero scrub + 2–4 supporting clips). The user may adjust freely.

Choose scroll concept: Deliberately choose exactly ONE of the 7 scroll concepts from references/craft.md (Ambient Loop, Scroll Scrub, Cursor Spotlight, Horizontal Pan Lock, Exploded View, Push Through, Scrollytelling). Key question: What does scrolling MEAN for this product? Justify the choice in one sentence and present it to the user together with the template for confirmation. The concept determines how the hero clip is prompted (see video laws in craft.md).

Define design DNA: Formulate a thesis line and a scene sentence (rules in references/craft.md) and derive the palette (OKLCH, 4 tokens) and typography from it. Show thesis + concept in the shot plan (Phase 2).

Phase 2 — Shot plan + cost approval

Create the concrete plan and show it BEFORE any generation for approval:

  • List of all clips (number, shot description, duration ~8s, aspect ratio, whether chained via start_image/end_image)
  • Resolution (1080p/4K), mode (std), no audio
  • Hero image: existing user image or to be generated (with which model)
  • Estimated credit usage (number of clips × cost per clip; 4K correspondingly more expensive). If the exact credit prices are unknown, give a relative estimate and say so honestly.

Wait for explicit OK before credits are spent.

Phase 3 — Hero image (checkpoint)

If no input image is available, generate the hero image. Model selection automatic:

  • GPT Image 2 — products, design, scenes, text in the image (default)
  • Nano Banana Pro / Nano Banana 2 — when a reference image or a person/identity must be kept consistent

Generate via the Higgsfield MCP tools (server higgsfield, registered in .mcp.json of the project; load tools via ToolSearch if needed — never use the Higgsfield CLI). For better generation prompts you can consult the references of the installed higgsfield-generateskill: ~/.claude/skills/higgsfield-generate/references/prompt-engineering.md (prompt quality) and model-catalog.md (model selection). Show the image to the user and ask: does it fit? Only continue after approval — the image becomes the reference for all videos; discarding a bad hero image now is cheap, regenerating videos is expensive.

Phase 4 — Generate videos

  • Seedance 2.0 via the Higgsfield MCP tools (same path as the hero image, no CLI), std mode, chosen resolution, no audio, ~8s per clip.
  • Hero image as image reference for EVERY clip.
  • Observe video laws (references/craft.md): camera movement locked to the scroll axis, constant speed, no drift; for transformations (exploded view) the start object must match the end object; all clips like siblings (same identity, material, light, color world).
  • Journey/tour templates: Generate clips strictly one after another; the last frame of clip N as start_image of clip N+1 (Seedance start_image/end_image), so that everything scrubs like an uninterrupted camera move. Extract the last frame with ffmpeg.
  • Asset acceptance before integration: Visually inspect each asset and check it against the reject criteria in references/craft.md (identity drift, morphing, text in the image, broken details). Wire only passed assets into the page; regenerate rejected ones with a cost note.
  • For the hero clip, a second take is justified if quality is doubtful (the hero scrub is 80% of the wow) — but ask first, because it costs credits. All other clips: take the first acceptable result.
  • Compress videos for web (ffmpeg, e.g. H.264 CRF ~28, -movflags +faststart) — saves ~90% file size and makes scrolling smooth. For scroll-scrub, extract frame sequences (JPEG/WebP) if needed.

Phase 5 — Build the website

Static page, no framework: a index.html (+ assets/), Lenis (smooth scroll) and GSAP/ScrollTrigger via CDN.

  • Hero: implement according to the chosen scroll concept (scrub as canvas frame sequence, exploded view, push through, etc.); the hero must already move BEFORE the first scroll. Only the hero scrubs — supporting clips as normal autoplay loops (scrub rule in craft.md).
  • Sections and copy tone according to the template in references/templates.md; colors from the four OKLCH tokens of the design DNA (never pure #000/#fff), typography according to craft.md.
  • Copy in the target language according to the copywriting rules in references/craft.md: concrete and falsifiable, few words, confident.
  • Anti-AI ban list from craft.md: no gradient text, no glassmorphism, no identical card grids, no fake metrics — the page must look designed, not generated.
  • Mobile/tablet pass only for the target devices chosen in the interview (sections collapse, touch instead of hover); with "desktop only" it is omitted entirely.

Phase 6 — Verify (before the acceptance question!)

Start a local server (python -m http.server or similar) and test automatically with the Playwright MCP tools (browser_navigate, browser_evaluate, browser_take_screenshot, browser_resize):

  • Does the page load without console errors?
  • Does scroll-scrub work (screenshot at several scroll positions and check that the hero frame changes)?
  • For chained clips: are the transitions seamless?
  • Do interactions (hover videos, counters, forms) work?
  • Does the hero already move before the first scroll? No layout overlap, no cut-off text, contrast ok?
  • Check viewports according to the target devices chosen in the interview: desktop always; tablet (768×1024) and mobile (390×844) only if chosen.
  • Final gate (craft.md): Does any spot look "AI-generated"? Then fix it.

Fix any problems you find yourself before asking the user.

Phase 7 — Acceptance + iteration

Give the user the structured final report (format in references/craft.md: URL, thesis, scroll concept + rationale, scene sentence, palette tokens, prompts used, QA checklist with pass/fail) plus screenshots and ask: Is everything ok?

On feedback: iterate like a director, not like a developer — translate feeling-based notes ("hero 20% slower", "section feels flat") into code. After changes, run phase 6 again.

Phase 8 — Hosting

Only once the user has accepted the page, ask: Should the website be hosted? Hosting is done via the Higgsfield MCP (its hosting/publish tool; use ToolSearch to look for the higgsfieldMCP tools if not yet loaded). After deployment, briefly open the live URL and verify, then report to the user.

Higgsfield integration

The entire generation and hosting process runs via the Higgsfield MCP server (https://mcp.higgsfield.ai/mcp). No Higgsfield CLI, no browser workaround.

Setup check (before phase 2, before credits are planned): Check all dependencies and install anything missing. Principle: Always register MCP servers on a project basis (--scope project), never globally — this keeps the setup traceable and portable per project (.mcp.json travels with the project).

  1. Higgsfield MCP (ToolSearch for higgsfield). If not available:
    • claude mcp add --scope project --transport http higgsfield https://mcp.higgsfield.ai/mcp
    • If the user does not yet have a Higgsfield account or the connection is not authorized, ask them to sign in or register via this link and grant the MCP connection: https://higgsfield.ai/s/mcp-arnold-oberleiter-tNjMkM (referral link of the skill author — use exactly this link, no other).
  2. Playwright MCP (ToolSearch for playwright, for the browser QA test in phase 6). If not available:
    • claude mcp add --scope project playwright -- npx @playwright/mcp@latest
  3. ffmpeg (for compression and frame extraction). Check with ffmpeg -version. If not installed, install according to the operating system: Windows winget install Gyan.FFmpeg, macOS brew install ffmpeg, Linux sudo apt install ffmpeg (or similar package manager). Briefly ask for permission before installing, since it changes the system.
  4. If MCP servers were newly registered: point out that Claude Code must be restarted once so that the project MCPs connect.

If something is still unavailable after that, stop and ask the user for help — do not silently switch to another approach. The other Higgsfield skills (higgsfield-generate etc.) serve only as a knowledge source for prompts and model selection, not as an execution path.

Principles

  • Do not spend credits without approval (phase 2 and every extra take).
  • Consistency above all: one reference, used everywhere.
  • Report failures honestly (e.g. generation failed, likeness drifts) instead of glossing over them; offer a new take with a cost note.
  • All files into the current project directory under <projektname>/ (kebab-case from the brand name), videos under assets/.