GenAI Mesh Gradient skill
A skill that turns a visual brief into a mesh gradient recipe, then builds editable Figma layers or a layered SVG fallback.
- 153 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- With a Figma tool the skill writes layers into the file you name.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/genai-mesh-gradientDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- With a Figma tool the skill writes layers into the file you name.
This is third-party code. Review the repository files before installing.
What it does
GenAI Mesh Gradient is a skill for controllable image generation that carries a task from brief to finished artwork. The agent asks about use case, aspect ratio, brand colors and the area reserved for text, compares several palettes on the same composition, and then builds the result. The repository holds six Figma studies: sky, dreamlike, flower, diffuse, heightmap and multipoint. Each lists layers, blur and settings. The result is checked in its real slide or page and refined from feedback.
Who it is for. Designers and developers who need presentation covers, website heroes and thumbnails in one style and want to edit layers in Figma instead of regenerating an image.
Good fit when
- A 16:9 presentation cover needs a gradient with a quiet area for the title.
- Three palettes are compared on one composition before choosing.
- A Figma gradient must stay editable with a note on changing colors.
- A brand thumbnail set needs a repeatable recipe.
Not a fit when
- You need a photo or an illustration with objects rather than an abstract background.
- There is no Figma connection but the result must be native layers.
- You want a finished image in one request with no iteration.
Example request
Use $genai-mesh-gradient for a 16:9 presentation cover. Compare three palettes on one composition, keep the left third quiet for a dark title, and after I choose build layers in my Figma file.Limitations
Installing the files does not enable automatic invocation in every client or create a Figma connection. Native output needs a tool that can write to the canvas, and the agent must check its actual capabilities. The old name `mesh-gradient-generation` has no automatic alias. The repository samples use one blue and apricot palette, other colors are chosen by the agent from the skill references, so judge the result by eye.
How to disable. Delete the `genai-mesh-gradient` folder from the skills directory and reload the client skill list. Files created in Figma stay in your project.
FAQ
Is Figma required?
No, but then the output is a layered SVG. Native editable Figma layers need a connected tool that can write to the canvas.
What size are the samples?
The six samples are 1536 by 1024 pixels, 3:2, and share one blue, apricot and warm white palette.
How do I install it?
Clone the repository into the client skills directory. For Codex that is `~/.codex/skills/genai-mesh-gradient`. Other agents load skills by their own rules.
What about an older install?
Rename the folder to `genai-mesh-gradient`, update its contents and saved prompts, then reload the client.
What does it cover beyond the six samples?
The `effects.md` reference describes related effects: fluid, pigment, oil and brush, and silhouette rendering. They follow the same brief and review loop.
Discussion
No questions or reviews yet.
Related
SkillsA TypeUI Figma plugin that reads a file's styles and generates DESIGN.md and SKILL.md for Claude Code, Codex and Cursor
A skill for Figma design systems: read-only audits with WCAG checks, component building and token export to code.
A skill that draws interactive isometric illustrations in SVG, with WebGL shaders and React output, explaining an idea as a working machine
Paper Figure to Figma
paper-figure-to-figma
Skill that redraws a paper figure as editable Figma or PowerPoint, keeping labels as text and shapes as vectors.
design-to-code: a website from a design image
design-to-code
A skill that turns a screenshot, mockup, Figma frame or live page into a responsive site and checks it against the design
A skill for creating, redesigning and reviewing web interfaces: one design thesis and system instead of generic SaaS looks.
README in short
The skill draws on research into controllable visual generation and links intent, design constraints and feedback to editable gradients.