Higgsfield Websites
Higgsfield AIOfficialPublished by Higgsfield AI
- Skill
- Workflow
- Software development
- MIT
- Medium risk
- Has scripts
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
The Higgsfield website builder is a comprehensive CLI tool for managing the full lifecycle of web projects. It supports three distinct product types: standalone websites, Higgsfield-integrated apps, and multiplayer browser games. Each project is built as a React 19 and TanStack Start SSR application deployed to a single Cloudflare Worker. The skill enforces strict design and architectural patterns, including the use of the Quanta design system for apps and specific flow-based pipelines for websites and games. It handles everything from project creation and asset generation to deployment and community feed publishing.
What it does
- Scaffolds full-stack React 19 and TanStack Start applications via CLI.
- Manages deployment to Cloudflare Workers with integrated D1, R2, KV, and DO support.
- Provides specialized workflows for standalone websites, integrated apps, and multiplayer games.
- Automates the creation of branded launch covers and metadata for feed-ready projects.
- Integrates Higgsfield AI services for app-specific generation and authentication.
- Handles game-specific logic, real-time multiplayer rooms, and procedural asset generation.
When to use it
- When you need to build a landing page, portfolio, or marketing site.
- When creating a SaaS dashboard or web application integrated with Higgsfield services.
- When developing a browser-based multiplayer or single-player game.
- When you need to deploy or publish a web project to the Higgsfield community feed.
Advantages
- Unified CLI workflow for the entire development and deployment lifecycle.
- Consistent architecture using React 19 and TanStack Start on Cloudflare Workers.
- Enforced design consistency through the Quanta design system for apps.
- Built-in support for AI-generated assets and branded launch covers.
- Streamlined deployment process with automated metadata and feed integration.
Usage examples
- “Build me a new landing page for my portfolio.”
- The agent will initiate the website creation flow, ask for the preferred animation style, and scaffold a standalone website project.
- “Create a SaaS dashboard that uses Higgsfield for image generation.”
- The agent will set up an app-type project, integrating the Quanta design system and the fnf SDK for authentication and generation.
- “Make me a multiplayer arcade game.”
- The agent will scaffold a game project with the arcade category, setting up the required logic structure for real-time multiplayer rooms.
- “Deploy my site and publish it to the community feed.”
- The agent will execute the deployment pipeline, ensure metadata and covers are generated, and list the project on the community marketplace.
Install
Download the skill as a ZIP:
https://autogineer.com/agent-skills/higgsfield-ai/higgsfield-websites/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip higgsfield-websites.zip -d .agents/skills
Documentation by Higgsfield AI
Higgsfield website builder (CLI) — three product types, three flows
You drive the whole lifecycle through the Higgsfield CLI (higgsfield website …), then edit code on the local filesystem with git + bun. You are
building ONE per-website Cloudflare Worker: a React 19 + TanStack Start app,
server-rendered (SSR), deployed as a single Worker at the product's own
subdomain. The project lives in app/ — run every bun/build command from
there.
The three types — and the REQUIRED --type on create
higgsfield website create requires --type, and it is the USER'S choice —
when the request doesn't make it obvious, ask the user before creating (one
question, up front):
--type website— a standalone product with NO Higgsfield integration and NO AI generation of any kind (no image/video/audio/text generation — not via Higgsfield, and not via some other provider): no "Sign in with Higgsfield", no requests to Higgsfield, no fnf SDK. Every website gets a fully independent brand: own palette, type, and chrome from a design brief, custom Tailwind/CSS only — never import@higgsfield/quanta/*or use q-prefixed tokens anywhere, and no "Powered by / Built on Higgsfield" badges or mentions in page content. The user's brand is the only brand on the page.higgsfield website create --type website--type app— a product tightly integrated with Higgsfield: its users Sign in with Higgsfield and generate images/videos through the fnf SDK (the full auth + D1 contract applies). An app must look and feel like a Higgsfield product: UI built with Quanta (references/quanta-design.md) — and, for anything Quanta lacks, your own component built from Quanta primitives (never a third-party UI library) — starting from a standard app layout (references/app-layouts.md). Quanta and the app layouts are app-only — never applied to a--type websitebuild. The independent-brand rule and the wow pipeline (design-taste-frontend, boards, wow catalog) are the website path; apps never get a custom brand — Quanta is the brand.higgsfield website create --type app--type game— a browser game: realtime multiplayer rooms on the game template, where the game itself is six pure functions inapp/src/logic.jsand the platform already owns sockets, rooms and persistence. Requires a game genre as--category(arcade,puzzle,shooter, …, fromhiggsfield website categories) and takes no--template— a game scaffolds from the only template it can use. Single-player counts: setminPlayers: 1. Seereferences/game-flow.md.higgsfield website create --type game --category arcade
Generation is ALWAYS an app. Any product that generates images, video,
audio, or other AI media runs on Higgsfield — build it as --type app (Sign
in with Higgsfield, generation on the user's Higgsfield credits). NEVER offer
the user an option to "bring your own image/video API" or plug in their own
generation key for a website — that path does not exist. --type website is
ONLY for sites with no generation and no tie to Higgsfield or any other
generation service. (A website may still use ordinary non-generation
third-party APIs — payments, maps, email — with the user's own keys; that is
unrelated to this rule.)
Quick tells: "landing page / portfolio / marketing site / SaaS with its own users, no AI generation" → website. "generates images/video/audio, or anything with Higgsfield models, credits, or generation history" → app. "something you play — a game, multiplayer or single-player" → game.
Games moved onto this pipeline from a separate engine that is being retired.
The higgsfield game … commands are gone: a game is created, deployed and
published exactly like a website. Any doc saying otherwise is out of date.
Always set a subdomain on create
higgsfield website create takes an optional --subdomain — it becomes the
site's slug, so the live URL is <subdomain>.<host>. Always set it: pick
one from the product's name or purpose; only omit it (which yields a random
slug) if the user explicitly wants a random one. Rules for a good subdomain:
More than 4 characters — short single words are reserved, so go a bit longer.
Memorable — derive it from the product name/purpose (e.g.
lumen-notes,pixelforge), not a random string.Allowed characters only — lowercase letters, digits, and single hyphens (DNS-safe). No spaces, underscores, uppercase, or leading/trailing hyphens.
A few reserved labels (e.g. api, www, app) and already-taken subdomains
are rejected — if that happens, try a close variant.
Prerequisites
If
higgsfieldis not on$PATH, install it:curl -fsSL https://raw.githubusercontent.com/higgsfield-ai/cli/main/install.sh | shIf
higgsfield account statusreportsSession expired/Not authenticated, ask the user to runhiggsfield auth login(interactive) and wait for confirmation.gitandbunare used locally once you clone the repo. The CLI itself handles create / repo / deploy / publish / status / db / secrets — and the asset generation jobs (higgsfield generate …,higgsfield model …).
Pick the path, then follow ONE flow end-to-end
Resolve the
--type(ask the user if unclear — it's their choice). In the SAME first question, also ask whether they want to publish it to the Higgsfield community feed (marketplace) when it's ready (yes/no). Remember the answer: if yes, publish automatically at the end (after deploy + metadata), no need to ask again; if no, only deploy. Don't block the build on it.Read the matching flow and follow it — it is the complete workflow for that type, including its own references, hard rules, editing map, and deploy/publish gates:
For every --type website build the intake ALWAYS asks the user to choose
between an Animated (recommended) website — a scroll-driven journey through
a generated film (references/scroll-scrub.md) — and a Non-animated one.
This question is mandatory: never skip it, even when the request seems to imply
a choice. Animated is the recommended default (used only when the user is
unreachable / doesn't answer); the flow below carries both paths and the full
pipeline.
Inside the animated path the default is a single-shot film — ONE continuous
~15s take, scrubbed end to end, no seams. The multi-scene chain is opt-in and
costs several extra minutes per leg; take it only when the brief genuinely
travels between distinct worlds. references/scroll-scrub.md owns that call.
| Type | Flow |
|---|---|
--type website | references/website-flow.md — phased pipeline (animated website by default): intake → concept → reference boards → asset system → build-to-boards → motion → cover + metadata → mechanical gate → deploy |
--type app | references/app-flow.md — the Quanta toolkit, the six code layouts, fnf SDK + auth + D1 contract, launch cover + metadata, publish gate |
--type game | references/game-flow.md — the six-function logic.js contract, realtime rooms, a game-genre --category, play-testing, deploy + publish |
A game's ART and AUDIO live here too, under the game- prefix, and
references/game-flow.md indexes them: references/game-design-system.md (read
first — profile, core loop, asset manifest), references/game-stylization.md
(the STYLE FORMULA every visual reuses), references/game-2d-animation.md,
references/game-textures.md, references/game-3d-animation.md,
references/game-procedural-animation.md, references/game-audio.md,
references/game-meshy-api.md and references/game-meshy-input-rules.md. The
GLB/rigging/texture tooling they drive ships in this skill's scripts/.
All three flows share the same platform mechanics (SSR Worker,
app.manifest.json infra, a single live deploy via higgsfield website deploy <website_id>, the cover + metadata requirement below, and the publish
gate) — each flow restates what it needs, so you never have to read another.
Cover + metadata — ALWAYS part of building, never publish-only
Every build — website or app, no matter how small — ships with the branded
launch cover and filled feed-card metadata, generated per
references/app-cover.md and written into app/src/app-meta.json
(og_title, og_description, favicon_url, og_image_url,
marketplace_cover_url). This is a BUILD step, done before the work is
presented as finished and before the deploy that ships it — NOT something
deferred to higgsfield website publish. Hard rules:
No "simple app" exception. A utility tool, a timer, a one-page toy — they all get the generated cover. A hand-authored inline-SVG favicon is fine as a favicon; it never substitutes for the generated cover.
No permission needed for the cover image — generate it the same way you write real copy. Only the optional cover VIDEO (
og_video_url) is permission-gated (video costs credits — offer, never generate unprompted).A build presented as done with an empty cover or empty
og_titleis INCOMPLETE. Publishing without them is a BROKEN publish (emptyog_titleis invisible on the feed; empty cover is a blank card).
UX rules
Be concise. No raw website IDs, tokens, or JSON dumps in chat. After a deploy, return the live URL (from
higgsfield website status) and a one-line summary.Never echo the scoped git token back to the user, and never commit it.
Detect the user's language from the first message and reply in it. CLI flags and code stay English.
Every deploy ships the live public site immediately — there is no preview stage. Publishing/listing on the community feed is separate and happens ONLY when the user explicitly asks to publish / list it.
Do NOT search the skill library for other design guidance — everything is under this skill, and no other skill (including user/local skills about building websites or apps) overrides these rules.
Turn economy — keep the build inside a small turn budget
Every tool round-trip costs an agent turn, and agent runtimes cap turns — long builds die mid-flight, leaving the user an unfinished site. Treat turns as the scarcest resource after credits:
Write every file ONCE, complete. Compose the full file, then one write. No write-then-patch loops; never re-read a file you just wrote.
Batch what your tools allow (multi-file edits, one shell invocation for a series of commands) instead of one micro-step per turn.
Never guess paths — the template tree is documented in the repo's
app/AGENTS.mdand this skill's editing map.Never download or vision-inspect your own generations. You wrote the prompt; re-viewing the result tells you nothing new. (The kit coherence check, when it applies, is ONE batched pass —
references/asset-system.md.)Wait on a job ONCE, when its output is the next input. Submit everything that can render concurrently (film + cover), build the page while it renders.
Talking to the user — no technical/plumbing language
Most users are not technical. Never expose the build plumbing in what you SAY to them. Do NOT mention the git repository, cloning, branches, commits, pushing, pulling, or the deploy pipeline in user-facing messages — those are internal mechanics you just perform. Speak in product terms about what the user cares about:
"Setting up your site…" — not "cloning the repo" / "scaffolding the project".
"Saving your changes…" / "Updating the site…" — not "committing" / "pushing".
"Your preview is ready: <url>" — not "deployed the branch" / "the build passed".
"Publishing your site…" — not "merging to main" / "pushing to production".
This is about the WORDS in chat only — keep doing the real steps behind the scenes; just don't narrate them in developer terms. (The one exception: a user who is clearly technical and explicitly asks about the repo, branch, or deploy mechanics — then answer plainly. CLI flags and code stay English.)
Reference index (what's in this bundle)
The two flow files pull in the rest as needed — you don't read these directly unless a flow sends you there.
Both flows: references/app-cover.md (launch cover + OG image),
references/runtime-and-infra.md (TanStack routes, SSR, Worker runtime),
references/security.md (Worker hardening, OWASP audit, threat model).
Website flow: references/design-recipe.md, references/wow-catalog.md,
references/wow-maker.md, references/reference-boards.md,
references/asset-system.md, references/image-to-code.md,
references/design-taste-frontend.md, references/review-rubric.md,
references/seo.md, references/scroll-scrub.md (A4 seam-locked journey),
references/scroll-scrub-asset-react.md,
references/scroll-scrub-asset-css.md, and
references/scroll-scrub-asset-video.md (bundled Markdown code assets loaded
only when A4 is selected).
App flow: references/app-quickstart.md (START HERE — the working critical
path: auth, generation submit/poll, result rendering, common Quanta components),
references/quanta-design.md, references/app-layouts.md,
references/fnf-sdk.md, references/fnf-react.md, references/auth.md,
references/containers.md, references/cover-animator.md (permission-gated
~5s cover video → og_video_url), references/contest.md (the $100k app
contest — the entry auto-publishes the app; submit with social links).
Files
- ATTRIBUTION.mdAdded by AutoGineer878 B
- LICENSELicence file added by AutoGineer1.0 KiB
- SKILL.md14.6 KiB
- references/app-cover.md31.4 KiB
- references/app-flow.md25.0 KiB
- references/app-layouts.md11.9 KiB
- references/app-quickstart.md11.5 KiB
- references/asset-system.md13.3 KiB
- references/auth.md14.2 KiB
- references/containers.md15.8 KiB
- references/contest.md4.5 KiB
- references/cover-animator.md4.6 KiB
- references/design-recipe.md10.6 KiB
- references/design-taste-frontend.md85.6 KiB
- references/fnf-react.md12.7 KiB
- references/fnf-sdk.md35.2 KiB
- references/game-2d-animation.md17.6 KiB
- references/game-3d-animation.md13.6 KiB
- references/game-audio.md3.3 KiB
- references/game-design-system.md15.8 KiB
- references/game-flow.md5.0 KiB
- references/game-meshy-api.md7.9 KiB
- references/game-meshy-input-rules.md4.5 KiB
- references/game-procedural-animation.md6.0 KiB
- references/game-stylization.md12.4 KiB
- references/game-textures.md12.0 KiB
- references/image-to-code.md6.4 KiB
- references/quanta-design.md34.0 KiB
- references/reference-boards.md6.5 KiB
- references/review-rubric.md8.5 KiB
- references/runtime-and-infra.md10.4 KiB
- references/scroll-scrub-asset-css.md5.6 KiB
- references/scroll-scrub-asset-react.md20.4 KiB
- references/scroll-scrub-asset-video.md2.0 KiB
- references/scroll-scrub.md19.9 KiB
- references/security.md37.4 KiB
- references/seo.md35.8 KiB
- references/website-flow.md30.1 KiB
- references/wow-catalog.md7.6 KiB
- references/wow-maker.md21.7 KiB
- scripts/fbx2glb.pyScript6.0 KiB
- scripts/glb_inspect.pyScript4.7 KiB
- scripts/glb_merge_anims.pyScript8.0 KiB
- scripts/glb_patch.pyScript2.7 KiB
- scripts/merge_anim_glbs.pyScript5.9 KiB
- scripts/pipeline.pyScript11.6 KiB
- scripts/proc_anim_dragon.pyScript6.5 KiB
- scripts/proc_rig_dragon.pyScript4.8 KiB
- scripts/proc_weights.pyScript2.7 KiB
- scripts/rig_transfer.pyScript8.1 KiB
- scripts/seamless.pyScript2.5 KiB
references/game-2d-animation.md
2D Sprite Animation (video-to-spritesheet pipeline)
Asset reference for game-generation. Use for ANY animated 2D asset — characters, objects, effects — delivered as a spritesheet. The pipeline: key-pose image →
higgsfield generate create(seedance1_5) → frame extraction (ffmpeg) → frame selection → per-frame background removal → spritesheet assembly. Style: the key-pose prompt embeds the STYLE FORMULA perstylization.md— open it first, as for every asset.
Why video instead of generating frames directly: an image model drawing N frames independently cannot hold the character identical across frames — limbs, proportions and details drift, and the animation "boils". A video model animates ONE image, so every frame is the same character by construction. We then sample the video back into frames. This trades prompt control for temporal coherence — the right trade for game sprites.
Native AutoSprite route — preferred
Use autosprite when present in the live model catalog. It owns animation, frame
selection, background removal, and sheet assembly:
higgsfield model get autosprite
higgsfield upload create ./character.png --json
higgsfield generate create autosprite \
--image_url "<stable URL from upload output>" \
--kind walk \
--video_tier turbo \
--frame_count 12 \
--frame_size 256 \
--remove_bg default \
--with_sound false \
--is_humanoid true \
--wait \
--jsonSupported standard kinds and isometric directions come from higgsfield model get autosprite. For kind=custom, pass both --prompt and --name; omit both for
standard kinds. Use the manual pipeline below only when AutoSprite is unavailable or
the project requires explicit control over extracted frames.
Pipeline at a glance
| # | Stage | Tool | Output |
|---|---|---|---|
| 1 | Source image | manifest / user / stylization.md pipeline | character or object image |
| 2 | Key-pose image | higgsfield generate create → flux_2 | full-body pose at the action's mid/peak phase |
| 3 | Animation video | higgsfield generate create → seedance1_5 | 4 s, 720p, AR = key-pose ratio (explicit); loop: start = end frame |
| 4 | Raw frames | ffmpeg | every frame of the video as PNG |
| 5 | Frame selection | local script | frame_count frames (2–64, default 25), evenly spaced, first + last always kept |
| 6 | Alpha | image_background_remover, per frame | transparent-background PNGs |
| 7 | Spritesheet | local assembly | grid PNG, metadata encoded in the filename |
Hard rules (each one is a known failure when violated):
The subject is NEVER cropped. Full body in frame at every stage, with visible empty margin above the head and below the feet. A key pose, a video frame, or a sheet cell that clips the subject is a rejected asset — regenerate, do not "fix in post".
The video model is
seedance1_5exactly. Notseedance_2_0, not the current default ofhiggsfield generate create. Verify availability viahiggsfield model listif a call errors, but do not silently substitute a model.start = end only for loops. Looping actions pass the SAME image as both start frame and end frame. One-shot actions (attack, death, hit, cast) pass only the start frame — forcing them back to the start pose ruins the action.
First and last extracted frames are always kept in the selection. For loops the last frame is then dropped at sheet assembly (see stage 7) — kept during selection, excluded from the sheet.
Background removal runs on FRAMES, one by one — never on the video.
Stage 1 — Source image
What goes in: the character/asset image from the manifest (generated per
stylization.md, FORMULA embedded) or supplied by the user. Character,
object, or both in one shot — the pipeline does not care what the subject is,
only that it is fully visible.
If the source already crops the subject (feet cut by the canvas, head at the edge), it cannot enter stage 2 as-is — regenerate or outpaint it to full body first. A cropped input guarantees a cropped animation.
Stage 2 — Key-pose generation (flux_2)
What: produce the subject in the mid/peak phase of the requested action. The video model animates around the image it is given; starting from the action's characteristic phase is what makes 4 seconds of video read as that action.
idle→ slight lean / relaxed breathing stancewalk/run→ mid-stride, one leg forwardattack→ wind-up (weapon raised / fist drawn back)jump→ crouched anticipationcast/effect→ energy gathered at the hands / pre-releaseflames, water, props → the shape at its most typical, not its extreme
How: higgsfield generate create with model flux_2, the source image as media
reference, the STYLE FORMULA verbatim in the prompt, plus the pose
instruction. The prompt MUST demand:
full body / full object in frame — head to feet visible;
empty margin above and below the subject — the motion needs headroom and footroom (a jump goes up, a stride extends down; without reserve space the video model crops);
a clean, uniform, uncluttered background — it is removed per-frame later, and a busy background degrades the matte. The background color must NOT appear anywhere on the subject — pick it by looking at the subject's palette first (green character → magenta background, red/pink character → green, neutral subject → any saturated key color per
stylization.md). A shared color is how the remover eats holes into the subject or leaves background patches stuck to it.
Why a separate key pose at all: feeding the neutral source straight into video gives generic swaying. The key pose is the steering wheel — it is the single biggest lever on what action the video actually performs.
Gate: subject fully inside the frame with visible margin top and bottom, nothing clipped, style matches the FORMULA. Cropped or off-style → reroll (regeneration budget per SKILL.md: 2 attempts, then best-of).
higgsfield generate create flux_2 \
--image ./source-character.png \
--prompt "<STYLE FORMULA>. <single key-pose instruction>. Full body in frame with empty margin above the head and below the feet. Clean uniform <key color> background." \
--aspect_ratio 1:1 \
--resolution 1k \
--wait \
--jsonStage 3 — Video generation (seedance1_5)
Fixed parameters:
| Param | Value |
|---|---|
| model | seedance1_5 |
| duration | 4 s |
| resolution | 720p |
| aspect_ratio | = the key-pose image's ratio, passed EXPLICITLY on every call — never omitted |
| start frame | the stage-2 key pose — always |
| end frame | the SAME image — looping actions only |
Aspect ratio is read off the key-pose file and passed explicitly (a 1:1
pose → aspect_ratio: "1:1", and so on). "Auto" does not exist as a real
parameter value: omitting the parameter does NOT mean "follow the input" —
it silently falls back to the TOOL's default (shipped failure: an unset
ratio on a 1:1 key pose came back as 3:4). A mismatched ratio reframes the
input, eats the top/bottom margins the key pose was built with, and is the
cheapest way to violate the "subject is never cropped" hard rule.
Why start = end for loops: the video model is forced to return to the
exact starting pose, so frame 1 and the final frame are identical and the
cycle closes seamlessly. Without it the loop visibly "jumps" at the wrap
point. Why not for one-shots: an attack that must end where it began
turns the strike into a rubber-band; one-shot actions get only the start
frame and play once (once in the filename, see stage 7).
Prompt = ONE action + a mandatory negative block. The positive part describes the MOTION and nothing else — not the subject (the image already is the subject), not the mood, not the scene: "smooth idle breathing cycle, subtle weight shift", "full walk cycle in place", "single sword slash, fast wind-up, sharp strike, follow-through". Exactly one action per video; any second verb in the prompt is a defect.
The negative block is NOT optional and is appended to EVERY animation prompt, because the model fills the fixed 4 seconds with improvisation wherever the prompt leaves freedom — a positive instruction alone only says what to do and stays silent about everything else. Two parts:
Camera lock (always):
camera locked, no camera movement, no zoom, subject stays fully in frame, plain static background— camera drift and zoom are the top causes of unusable frames.Prop & action inertia (always; expand when the subject holds anything):
the character performs ONLY this action, nothing else happens. If the subject carries a prop with an obvious action of its own (weapon, tool, instrument), name the prop and freeze it explicitly:the <prop> stays inert and is never used — no firing, no muzzle flash, no swinging, no raising it. Props carry their own learned scenarios (a raised pistol "wants" to fire, a bat "wants" to swing); an unfilled cycle duration plus an unconstrained prop is exactly how a run cycle gains a gunshot mid-video. Shipped failure: a 4 s "run cycle in place" where the model fired the held pistol twice — the negative block above is what prevents it.Facing lock (always):
the subject keeps facing the SAME direction for the entire video — never turns around, never rotates toward or away from the camera, no head turns past the shoulder. Game sprites are generated facing ONE direction (the engine mirrors them for the other side); a mid-video turn poisons every frame after it — half the selected frames face the wrong way and the sheet is garbage. Turning is the model's favorite filler for loopable actions (idle "look around", walk "glance back"), so the lock is mandatory even when the action seems direction-neutral. The ONLY exception: the requested action IS a turn — then it is a one-shot (start frame only,once), never a loop.
Loop example (omit --end-image for a one-shot):
higgsfield generate create seedance1_5 \
--start-image ./key-pose.png \
--end-image ./key-pose.png \
--prompt "<one action>. Camera locked, no camera movement, no zoom, subject stays fully in frame, plain static background. The character performs ONLY this action; nothing else happens. The subject keeps facing the same direction for the entire video." \
--duration 4 \
--resolution 720p \
--aspect_ratio 1:1 \
--generate_audio false \
--wait \
--jsonGate before moving on: scrub the video — subject never leaves the frame or gets clipped, no camera motion, facing direction is identical in the first and last frame and never flips in between, loop wrap is invisible (for loops). Fail → regenerate the video (adjust the motion prompt) before burning time on frames.
Stage 4 — Frame extraction (ffmpeg)
Download the result video into the workspace, then dump every frame:
ffmpeg -i anim.mp4 -vsync 0 raw/%04d.png4 s at native fps yields ~96–120 PNGs. Extract ALL of them — selection happens in stage 5 on the full set, never via ffmpeg's own fps filter (it cannot guarantee the exact first/last frames are kept).
Stage 5 — Frame selection (frame_count)
What: pick frame_count frames, evenly spaced across the full range,
always including the first and the last extracted frame.
import numpy as np
idx = np.unique(np.round(np.linspace(1, total, frame_count)).astype(int))(linspace endpoints guarantee first + last; unique guards tiny counts.)
Range: 2–64. Default: 25 when nothing in the context says otherwise.
Choosing by context — the question is "how much does the silhouette change per beat of this action":
| Action / context | frame_count |
|---|---|
| idle, breathing, hover, flame flicker | 8–16 |
| walk / run cycle — pixel art | 8–12 |
| walk / run cycle — HD sprites | 16–24 |
| attack, hit, jump, one-shot actions | 10–20 |
| fluid motion: cape, water, fire burst, magic FX (HD) | 24–48 |
| unclear / no signal | 25 |
Why fewer is often better: every frame is a sheet cell — memory, texture size, and background-removal calls all scale linearly with it. A walk cycle reads perfectly at 8 frames (the entire 8/16-bit era proves it); 60 frames of walk is waste. Spend frames only where the silhouette genuinely changes fast.
Stage 6 — Background removal (per frame)
Each selected frame: pass its local path to image_background_remover; the CLI
uploads it automatically and the completed job returns the transparent PNG:
higgsfield generate create image_background_remover \
--image ./selected/0001.png \
--wait \
--jsonWhy per-frame and not the whole video: the per-image matte is computed independently and cleanly per frame; the video path optimizes for temporal smoothness and smears edges across frames — on sprites that shows up as a halo that flickers. Frames it is, accepting the N calls.
Submit the frames in parallel, poll all to completion (fire-and-forget does NOT apply — the sheet needs every frame). Gate: spot-check 3–4 frames at 2× zoom — no leftover background patches, no eaten thin parts (blades, hair, flame tips). A bad matte on the same spot across frames means the stage-2 background was too busy or shared a color with the subject → fix there (change the key color), not by hand-editing mattes.
Stage 7 — Spritesheet assembly
All transparent frames are composed into ONE grid PNG:
Union bounding box. Compute the bounding box of non-transparent pixels across ALL frames, take the union, crop every frame to that SAME box. This anchors the subject identically in every cell — per-frame cropping makes the sprite jitter in-game.
Uniform cell. Pad the union box to a uniform cell size; anchor bottom-center (feet stay planted on the ground line across frames).
Loop de-duplication. For looping animations drop the LAST frame from the sheet — it is identical to frame 1 (start = end), and playing both makes the loop stall for one beat at the wrap. One-shot animations keep every frame.
Grid, not strip. Lay frames into a near-square grid (24 frames → 5×5 with the tail row partial). A horizontal strip of 64 cells exceeds GPU texture limits. Total sheet dimension ≤ 4096 px on either side — if it does not fit, downscale the cells, never drop frames.
PNG with alpha, no compression artifacts.
Metadata lives in the filename — no sidecar JSON. The consumer (stage-3 game code) parses everything it needs from the name:
{asset}_{action}_f{count}_{cellW}x{cellH}_g{cols}x{rows}_fps{n}_{loop|once}.png
knight_idle_f15_192x256_g4x4_fps12_loop.png
slime_attack_f12_160x160_g4x3_fps14_once.png
torch_flame_f10_96x192_g4x3_fps10_loop.pngf = frames actually in the sheet (after loop de-dup); g = grid; cells
fill left-to-right, top-to-bottom; trailing cells of the last row are empty
and transparent.
Playback fps is a recommendation baked into the name: pixel art 8–12,
HD sprites 12–24, default 12. Note fps is decoupled from frame_count —
15 frames at 12 fps is a 1.25 s loop; pick fps for the feel of the motion,
not to "use up" the frames.
Pixel-art sprites — the quality envelope
Small pixel sprites pass through the same pipeline but only look good inside these limits — choose parameters from them, not from the HD defaults:
The video is still generated at 720p from a full-size key pose; the pixel-art look is applied at the END — downscale the assembled cells with nearest-neighbor (no smoothing, no anti-aliasing) to the target size from the manifest (e.g. 32/48/64 px).
frame_count 8–16, no more. At small sizes extra frames add shimmer, not smoothness — sub-pixel drift between video frames turns into visible pixel crawl.
Subtle, readable motions survive the downscale (sway, bob, stride, blink). Fine detail motion (fingers, facial expression, thin particles) dies below ~64 px — do not request it.
fps 8–12. Higher framerates at small sizes read as noise.
If the manifest asks for a pixel sprite whose action violates this envelope (e.g. a 32 px character with a 48-frame cloth simulation), simplify the action to fit the envelope — that is a planning fix, not a generation fix.
Failure recovery
| Symptom | Cause | Fix |
|---|---|---|
| Subject clipped in the video | key pose lacked top/bottom margin, or camera drifted | back to stage 2: more margin; add "camera locked" to the video prompt |
| Loop visibly jumps at wrap | end frame not passed, or model ignored it | re-check start=end were both set; regenerate video |
| One-shot looks rubber-banded | end frame was passed on a non-loop action | drop the end frame, regenerate |
| Sprite jitters in-game | per-frame cropping instead of union bbox | reassemble the sheet with the union box |
| Flickering halo around edges | busy key-pose background | back to stage 2: flat uniform background |
| Holes in the subject / background patches stuck to it | background color also present on the subject | back to stage 2: pick a key color absent from the subject's palette |
| Subject turns around / changes facing mid-video | facing lock missing from the negative block, or the action invites turning | regenerate with the facing lock; rephrase the action to be direction-neutral ("walk in place" not "walk around") |
| Pixel sprite shimmers | too many frames / AA downscale | cut frame_count to 8–12; nearest-neighbor only |
| Loop stalls one beat at wrap | duplicated last frame left in the sheet | drop the final frame (loops only) |
Regeneration budget per SKILL.md: 2 attempts per stage, then take the best and compensate downstream.
Requirements and compatibility
Written for: Claude Code
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Needs: Declares allowed tools, Claude Code frontmatter, Needs network access, Needs Python
Security
What our scanner noticed· Medium risk
- Instructions that use the network
- Downloads piped into a shell
- Scripts that your agent may run
This skill includes scripts that your agent may run. Read them before you use it.
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Published by
- Higgsfield AI
- Publisher
- Higgsfield AI (Official)
- Source
- higgsfield-ai/skills · higgsfield-websites · commit 2700040
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by Higgsfield AI or Higgsfield AI.
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download higgsfield-websites.zip