From nano-banana-ultimate
Generates web design assets including hero backgrounds, landing page visuals, card images, section dividers, and motion keyframes with dark/light mode support using Gemini.
npx claudepluginhub agentic-dev3o/devx-plugins --plugin nano-banana-ultimateThis skill is limited to using the following tools:
**Input:** `$ARGUMENTS` (optional — asset type and visual description)
Builds complete frontend pages with React/Next.js, Tailwind, cinematic animations, AI-generated media assets, persuasive copy, and generative art for landing pages, marketing sites, and dashboards.
Builds production-quality websites and landing pages using Figma Make with Gemini 3 Pro. Prototypes from Figma Community inspiration, adds animated components from 21st.dev and video backgrounds.
Generates, edits, and optimizes marketing images such as blog heroes, social graphics, product mockups, and banners using AI tools like Gemini, Flux, DALL-E, Ideogram and design tools like Figma, Canva.
Share bugs, ideas, or general feedback.
Input: $ARGUMENTS (optional — asset type and visual description)
If $ARGUMENTS is provided, use it as the design brief and skip to prompt building. If empty, ask about the asset type and theme.
uv installedGEMINI_API_KEY environment variable set (get one at https://aistudio.google.com/apikey)Build every web design asset prompt using this structure:
[UI Element/Scene] + [Visual Hierarchy Direction] + [Theme Context: dark/light] + [Wide Cinematic Composition] + [Modern Digital Art / Gradient Mesh / 3D Abstract]
| Asset Type | Aspect Ratio | Resolution | Notes |
|---|---|---|---|
| Hero background | 16:9 | 2K | Wide composition, focal point offset for headline overlay |
| Card image | 3:2 | 1K | Contained composition, centered or subtly offset subject |
| Section divider | 21:9 | 1K | Ultra-wide, horizontal flow, seamless horizontal tiling |
| Motion keyframe | 16:9 | 2K | Dynamic composition, implied movement, animation-ready |
uv run "${CLAUDE_PLUGIN_ROOT}/scripts/banana.py" \
--prompt "<detailed prompt following the formula>" \
--output "<YYYY-MM-DD-HH-MM-SS-descriptive-name>.png" \
--resolution <1K|2K> \
--aspect-ratio <ratio> \
--model gemini-3-pro-image-preview
When the user provides an existing asset to modify (e.g., change palette, swap theme, adjust composition):
uv run "${CLAUDE_PLUGIN_ROOT}/scripts/banana.py" \
--prompt "<edit instruction: what to change AND what to keep>" \
--output "<YYYY-MM-DD-HH-MM-SS-descriptive-name>.png" \
--input-image "/path/to/source.png" \
--aspect-ratio <ratio>
For edits, describe both the change and what must stay identical:
"Convert this hero background to dark mode — shift the base to deep navy, change accent colors to luminous cyan. Keep the composition, shapes, and layout exactly the same."
Up to 14 input images can be passed (repeat --input-image for each).
See references/prompts.md for ready-to-use example prompts covering hero backgrounds, card illustrations, section dividers, dashboard mockups, and gradient mesh compositions for both dark and light themes.