oil-oil

Grok Designer — Design skill for Claude Code

Design community

Agent skill for delegating UI/UX review, design direction, HTML, and SVG tasks to Grok 4.5 via ZenMux.

How to install Grok Designer

This entry records only its repository, not the path inside it, so there is no exact command to give. Open oil-oil/gemini-designer and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Grok Designer does

Agent skill for delegating UI/UX review, design direction, HTML, and SVG tasks to Grok 4.5 via ZenMux.

Alternatives in Design

Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm) 3.6k ★
Designer Skills — Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, i 2.3k ★

README

Grok Designer

Grok Designer is a Grok 4.5 design advisor skill for agents. It helps with UI critique, UX critique, component-choice review, interaction-flow review, design direction, HTML mockups, SVG icons, handwritten wordmarks, and file-based design feedback.

The skill asks Grok 4.5 for design judgment through the bundled `grok-designer` CLI, then lets the main agent decide how to apply the advice in the current workspace.

Install

The easiest way is to give this GitHub repository to an agent such as Codex, Claude Code, or Cursor and ask it to install the skill:

https://github.com/oil-oil/grok-designer

You can also install it directly from a terminal:

npx skills add oil-oil/grok-designer

After installation, agents should use the `grok-designer` skill when a task needs external design judgment.

Authorization

The CLI reads local configuration from:

~/.config/grok-designer/config.toml

By default, the API key is read from:

~/.config/grok-designer/api_key

Do not commit API keys or local config files. The repository ignores common local secret files, including `.env`, `config.toml`, and `api_key`.

What Agents Should Know

Grok is stateless. It only sees the current prompt, files passed with -f, and images passed with -i.
For visual/UI review, use grok-designer ui.
For UX, component-choice, task-flow, interaction, friction, or state-feedback review, use grok-designer ux.
For combined UI + UX review, use grok-designer ui,ux or run ui and ux separately.
For broad art direction or design imagery markdown, use grok-designer direction.
For new standalone HTML mockups, use grok-designer html.
For SVG icons, simple illustrations, and single handwritten wordmarks, use grok-designer svg.
Pass complete relevant files when Grok needs to judge an existing design.
Pass screenshots or visual references with -i when the visible result or state sequence matters.
Do not ask