web-visuals
From the author
Make images, textures, illustrations and background video for a website or app you are building, with Glif, and wire them into the code. Use when: "add a hero image", "this page needs visuals", "replace these stock photos", "placeholder images", "background texture", "seamless pattern", "paper grain", "section backgrounds", "feature illustrations", "SVG illustration", "empty state art", "404 illustration", "infographic", "blog cover", "OG image", "social share image", "product cutouts for the shop", "looping background video", "scroll animation video", or when a page you're building has empty image slots. NOT for: editing an existing image (use edit-images), images not tied to a site (use make-images), logos or icons (use app-icons-and-logos), store or launch graphics (use app-promo-materials), demo videos (use app-demo-videos), game art (use game-assets).
Install
npx skills add glifxyz/glif-mcp-server --skill web-visuals -a claude-code
Installs to .claude/skills/web-visuals/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 84
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- make-imagesglifxyz/glif-mcp-serverMake new still images from a brief with Glif and save them to a folder: concept art, a series of variations, mockups, posters, illustrations, wallpapers, reference boards or any picture that isn't tied to a web page, app store or game engine. Use when: "make an image of", "generate a picture", "draw me", "I need some concept art", "make 10 variations", "one in each of these styles", "mockup of", "poster for", "wallpaper", "fake screenshot of", "what would X look like as Y", "mood board images", "images for my deck or doc". NOT for: editing an existing image (use edit-images), images that go into a site you're building (use web-visuals), logos or icons (use app-icons-and-logos), store or ad graphics (use app-promo-materials), game art (use game-assets), video or audio (use audio-and-video).Documents★ 215
- audio-and-videoglifxyz/glif-mcp-serverMake or edit audio and video with Glif, from a text brief or from a reference image, video or audio file. Use when: "make music", "add fitting music to my video", "jingle", "voiceover", "narrate this", "text to speech", "sound effect", "UI sounds", "ambient loop", "make a video", "video clip", "UGC video", "talking avatar", "lipsync", "dub this into Spanish", "GIF", "add captions", "trim or combine these clips", "split the vocals", "remove background noise", "animate this photo", "turn this product photo into a video ad", "make this photo dance", "bullet time", "one continuous shot around this", "make a music video for my song", "drive this character with my video", "show this room renovated", "use this video's structure for my product". NOT for: editing a still image (use edit-images), demo videos of an app (use app-demo-videos), new still images (use make-images).Media★ 215
- app-promo-materialsglifxyz/glif-mcp-serverPlan and make launch, store, ad and campaign graphics with Glif: real app screens turned into store listings and launch posts, or a coordinated set of product photos, ads, a short video and a jingle for any product. Use when: "App Store screenshots", "Play Store feature graphic", "launch graphics", "Product Hunt images", "social posts for the launch", "carousel", "promo banner", "static ad", "Meta ads", "ad creatives", "ad concepts", "angles to test", "UGC-style ads", "turn these reviews into ads", "product photos for my shop", "Amazon or Shopify listing images", "lifestyle shots of this product", "social media calendar", "a week of posts", "launch campaign", "poster series", "mood board", "storyboard this ad", "resize this ad for every format", "headline variations", "YouTube thumbnail", "X header", "email header". NOT for: logos and icons (use app-icons-and-logos), images inside the site or OG images (use web-visuals), demo videos (use app-demo-videos), one-off edits (use edit-images).Testing★ 215
- app-icons-and-logosglifxyz/glif-mcp-serverDesign a logo, app icon, favicon set, icon set or brand kit with Glif for an app or site you are building, then export every size and wire it into the code. Use when: "help me design a logo", "make a logo", "design an app icon", "we need a favicon", "PWA icon", "iOS app icon", "Android adaptive icon", "SVG logo", "custom icon set", "illustrated icons for these features", "emoji or sticker pack", "Discord emoji", "mascot", "animate our logo", "logo intro", "make the logo glossy 3D", "brand kit", "visual identity", "brand guidelines", "make it look like our site". NOT for: page images or textures (use web-visuals), editing an existing image (use edit-images), store or launch graphics (use app-promo-materials), game characters (use game-assets).Design★ 215
- game-assetsglifxyz/glif-mcp-serverMake art and media for a game you are building with Glif: character reference sheets, consistent characters, pixel-art sprite sheets with animation cycles, seamless and PBR textures, 3D models, item and ability icons, and trailers. Saves files where the engine expects them. Use when: "character sheet", "let's create a character sheet", "same character in every scene", "sprite sheet", "run cycle", "pixel art character", "tileset", "seamless texture for my game", "PBR materials", "3D model for Unity/Godot/three.js", "ability icons", "game trailer", "I need a cool logo for my game". NOT for: the game's logo or app icon (use app-icons-and-logos), music and sound effects (use audio-and-video), store graphics (use app-promo-materials).Media★ 215
- edit-imagesglifxyz/glif-mcp-serverEdit an existing image with Glif: remove the background, erase or replace objects, expand the canvas, restore or upscale, retouch, restyle or change one detail. Saves the result next to the original without overwriting it. Use when: "remove the background", "make this a transparent PNG", "cut out the product", "erase X from this photo", "replace the sky", "expand this image to landscape", "make it 16:9 without cropping", "upscale this", "restore this old photo", "retouch this portrait", "restyle this as pixel art", "edit this image", "keep everything else identical". NOT for: new images from scratch (use make-images), animating an image (use audio-and-video), logos (use app-icons-and-logos).Writing★ 215
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in