Webflow Style OG Image: Image Skill for Claude Code

A white page with the Plexmoor badge and name, a small list card and a two-line headline at the left and three linked cobalt icon circles above a curving lilac grid sheet of floating tiles at the right

Runs in

Install guides

Claude Code Cursor

Generates with

Host Agent LLM

Uses tools

FAL

Similar Skills

View all

Pale gray poster card for Reeltorch with stacked black capitals on the left and a thin orange arrow pointing down along the right

FREE

Runway Style OG Image

Asana Style OG Image

A seamless light gray backdrop with a hand holding the pale teenage engineering TP-7 field recorder, its big split disc, small display reading MEMO and a glowing red light

Teenage Engineering Style OG Image

Algolia Style OG Image

Wise Style OG Image

Notion Style OG Image

A white dot-grid page with the centered stacked words Develop. Preview. Ship., the last in a coral-to-amber gradient, and the small black Vercel triangle at the lower right

Vercel Style OG Image

Plaid Style OG Image

What you get

One 16:9 WebP card with lilac tiles and cobalt icons on white, your brand and headline exact
The exact prompt it sent plus the saved FAL task file; rerunning resumes that request rather than buying a new one
A review of spelling, the 6% safe margin and the 16:9 frame before the card reaches you

Good fit

No-code, design and website-building tools
Product updates and new features
A name and a brief headline

Not for

Photo-led, dark or loud identities
Dense data or long headlines
Redrawing an existing illustration

Social mediaProduct launchMake an OG imageog imagesocial cardno-codeweb designminimal

Good forMake an OG image

About this Skill

You say/ours-webflow-style-og Formcraft is a no-code form builder for event organizers. Our update post needs an OG card with the headline "Forms that build themselves" in deep blue.

For website builders and no-code tools, this OG image skill for Fable 5 leaves most of the card white. Soft lilac glows drift across it, pale translucent 3D tiles, cubes and bars float in the space, and thin cobalt line icons, arrows and cursors hint at an editor at work. In the open area between them rest your small logo, your name and a brief headline set in deep blue. The agent arranges new pieces for your product, GPT Image 2 on FAL renders the 16:9 WebP, and every letter is checked first.

How it works

Agree on the name, one headline and one picture idea; drop anything that blurs at thumbnail size
Lay out the card from references/visual-system.md and fit your colors to its four style anchors
Strip out outside names, marks, faces, screens and slogans, then invent the tiles and line icons for your brand
Write a prompt about visible things only: frame, layout, light, palette, subject and type position
Send one request with the bundled FAL helper and keep the task file it writes
Read each letter, check the 6% margins and the 16:9 frame, and only then run validate-output.mjs
If a flaw remains, propose one prompt change and wait for your OK before a second paid request

Checked before delivery

validate-output.mjs passes with --require-format webp --require-16-9, and the prompt file has no emoji, arrows or symbol characters
Brand and headline read correctly letter by letter, with key text and faces inside a 6% margin on every side
Every source name, logo, slogan, person, interface and watermark is replaced by the user's own identity or a new one, and the layout is new for this subject
Exactly one paid request per approved generation

What you need before you start

You bring: Brand or project name, spelled as it should appear on the card · One short headline · What the page, product or audience is · Optional: brand colors, a logo the user may use, a mood, owned reference images, a platform safe zone
Dependencies: Node.js 20+ to run the included FAL script · Your own FAL API key, set as FAL_KEY; FAL charges for each image
Outside costs: FAL_KEY
Last tested: v0.1.0 — Claude Code / Codex / Cursor

User reviews

Loading reviews…

FAQ

What do the floating icons stand for?

Thin cobalt arrows, cursors and line icons hint at an editor; they are plain line shapes, arranged new for your product. Your name, headline, colors and any logo you may use make the card yours, and no existing illustration is copied.

Can it work from an image I already have?

If the image is yours or you may use it, yes. Hand it over with --reference and GPT Image 2 runs in edit mode instead. Only mood, color and layout are taken from the picture; nothing in it is reproduced on the card.

Is there a cost beyond the Skill?

Yes: FAL bills every image to your own account. The helper never retries by itself, and running the same command again only picks up the saved request, so checking on a slow job never pays for a second one.

Preview gallery