🇺🇸English
Gemini Designer — Your Design Partner
Delegate design tasks to Gemini via ZenMux API. Gemini creates HTML page designs, SVG icons, and provides design advice.
Critical rules
- ONLY interact with Gemini through the bundled shell script. NEVER call the API directly.
- Run the script ONCE per task. Read the output file and proceed.
- The script requires a ZenMux API key. It checks (in order):
ZENMUX_API_KEY env var, .env.local in current/parent dirs, ~/.config/gemini-designer/api_key file.
How to call the script
The script path is:
~/.claude/skills/gemini-designer/scripts/ask_gemini.sh
HTML page design
~/.claude/skills/gemini-designer/scripts/ask_gemini.sh "Design a modern landing page for a SaaS product called FlowSync" --html
SVG icon
~/.claude/skills/gemini-designer/scripts/ask_gemini.sh "Create a minimal settings gear icon, 24x24, stroke style" --svg
Design advice (text)
~/.claude/skills/gemini-designer/scripts/ask_gemini.sh "Suggest a color palette and typography for a developer blog"
Custom output path (auto-infers type from extension)
~/.claude/skills/gemini-designer/scripts/ask_gemini.sh "Design a pricing card component" \
-o ./designs/pricing-card.html
The script prints on success:
output_path=<path to output file>
Read the file at output_path to get Gemini's response.
Output types
html — Self-contained HTML file with inline CSS. Ready to open in browser. Use --html shorthand or --output-type html.svg — Clean SVG code. Can be saved directly or embedded in HTML/React. Use --svg shorthand or --output-type svg.text (default) — Design advice in markdown: color palettes, typography, layout suggestions.
If you pass -o with a .html or .svg extension and don't specify an output type, the type is auto-inferred from the file extension.
Configuration
ZENMUX_API_KEY - API key (required)ZENMUX_BASE_URL - API base URL (default: https://zenmux.ai/api/v1)ZENMUX_MODEL - Model name (default: google/gemini-3.1-pro-preview)
When to use
- Need a visual reference or HTML mockup for a UI component or page
- Need SVG icons or simple illustrations
- Need color palette, typography, or layout suggestions
- Need design feedback or critique on an existing design
- Want a quick single-page HTML prototype to show a concept
Workflow
- Only describe what the page/component is for and the core content — do NOT add your own design opinions (colors, fonts, layout style, etc.) unless the user explicitly specified them.
- Run the script with the appropriate output type flag (
--html, --svg, or default text).
- Read the output file.
- For HTML/SVG: save to the project and iterate if needed.
- For text advice: apply the suggestions to your implementation.
Tips
- Keep the task prompt short and focused on what it is, not how it should look.
- If the user didn't specify a style/color/font, don't invent one — let Gemini decide.
- Only pass explicit user preferences (e.g. "dark mode", "use blue") when the user actually said so.
- Chinese prompts work well — Gemini responds in the same language.
Weekly Installs
105
Repository
oil-oil/gemini-designer
GitHub Stars
6
First Seen
Feb 25, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
gemini-cli103
codex103
opencode103
cursor103
kimi-cli102
amp102
