Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/skillmds/skillmdnpx agentmods add skills/skillmds/skillmd/grok-designerWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/skillmds/skillmd/grok-designer)<a href="https://agentmods.dev/skills/skillmds/skillmd/grok-designer"><img src="https://agentmods.dev/badge/skills/skillmds/skillmd/grok-designer/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/skillmds/skillmd/grok-designer"><img src="https://agentmods.dev/badge/skills/skillmds/skillmd/grok-designer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00180 | $0.05756 |
| Opus 5.5 | $0.00072 | $0.02302 |
| Sonnet 5 | $0.00036 | $0.01151 |
| Haiku 4.5 | $0.00018 | $0.00576 |
Grade A, and why
grok-designer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 302 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Grok Designer — UI, UX, and Visual Design Advisor
Use Grok 4.5 as an external advisor for visual design, UI finish, UX task flow, interaction friction, art direction, and lightweight design artifacts.
Critical rules
- ONLY interact with Grok through the global
grok-designerCLI. Do not call the API or provider-specific scripts directly. - When this skill is used, call
grok-designerbefore giving UI advice, UX advice, design imagery, art direction, critique, visual advice, HTML, or SVG output. Do not write those deliverables from the agent's own judgment. - Call
grok-designerdirectly in the normal path. If the command is missing, install it silently with the bundledscripts/install_cliscript, then retry. - For visual/UI review of existing files, use
grok-designer ui. - For UX, task-model, component-choice, interaction-flow, friction, or state-behavior review, use
grok-designer ux. - For requests that need both UI and UX review, run
uianduxindependently. You may use the CLI's comma-separated form, such asgrok-designer ui,ux ..., or run separate commands in parallel. - For broad art direction, use
grok-designer direction. It may include files as background context. - For design imagery markdown, use
grok-designer directionand read the generated markdown before responding. - For new standalone HTML/SVG design drafts, use
grok-designer htmlorgrok-designer svg. - For a single handwritten SVG brand wordmark, lettering mark, signature mark, or logo-like text asset, use
grok-designer svg. - For a comparison sheet with multiple wordmark candidates, use
grok-designer html. - If the user provides screenshots, mockups, moodboards, or visual references, include relevant images with
-i / --imagewhen they help Grok judge visual style, layout, hierarchy, mood, fidelity, interaction sequence, or state transitions. - Grok is stateless. It does not know the current project, prior conversation, screenshots, local files, design rules, or previous Grok outputs unless they are included in the current command.
- Do not ask Grok to review code quality, technical debt, CSS lint, engineering consistency, performance, or architecture unless the user explicitly asks. Keep Grok focused on what users can perceive and operate.
- Do not ask Grok to output code patches or diffs for existing files. Use its design advice, then make the actual edits yourself.
- After Grok returns UI advice, UX advice, design imagery markdown, visual direction, or an HTML mockup, show the output or a concise summary to the user and wait for confirmation before implementing it in project code, unless the user explicitly asked to implement immediately.
- Because UX changes often affect state logic, routing, form behavior, data loading, or validation, present a summary of structural/logic changes and wait for confirmation before refactoring component logic unless the user explicitly asked to implement immediately.
- After
htmlorsvgreturns, do not start an extra AI review, visual critique, browser screenshot check, grep/tail completeness check, or refinement loop unless the user explicitly asked for checking or iteration. The CLI performs structural integrity checks before writing generated HTML/SVG. Read enough to know what Grok returned, then present it to the user. - For ordinary HTML, SVG, or icon requests, run the script ONCE per task. Read the output file and proceed.
- Pass the user's stated requirements and concrete project context. Do not add the agent's own style labels, layout choices, color choices, metaphor choices, interaction concepts, or evaluation criteria unless the user explicitly said them.
- Do not pre-design for Grok. For creative generation, state the user goal, source material, output format, and hard constraints only. Do not name visual directions, metaphors, layouts, palettes, typography, materials, animations, or interaction models unless the user explicitly provided them.
- For multiple alternatives, ask Grok for independent, clearly different options. Do not assign the options names like "dashboard direction", "editorial direction", or "radar direction" unless the user gave those directions.
- The CLI manages its own configuration and authorization. Do not pre-check authorization. If a call fails with
error=not_authorized, report that Grok Designer is not authorized.
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 302 lines · 180 tokens per session scan A d35920276d35
grok-designer is a skill published in the GitHub repository skillmds/skillmd (1 stars, last pushed yesterday), licensed MIT. It adds 180 tokens to every session and 5,756 once invoked, about $0.0007 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-19.
Other skills, from other repositories
get-context
Mandatory design-brief gate for clarifying the product and outcome. Use before ideation, image-to-code builds, redesigns, or product UI work to clarify missing product information and play back the brief before proceeding.
frontend
Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way.
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
antv-x6-editor
A skill for creating and troubleshooting interactive diagrams with AntV X6, a JavaScript engine for editors made of connected nodes and lines. It supports diagram types such as flowcharts, dependency graphs, entity-relationship diagrams, and organization charts.
antv-infographic
Create beautiful infographics based on given text content. Use when users request to create infographics.
app-screenshot-debug
Drive the running termio app via AppleScript / System Events to reach a UI state (focus the window, click a sidebar project, a terminal pane, a control), capture a pixel-accurate screenshot of just that window, and read it back for visual analysis — for diagnosing layout / spacing / alignment / 'this looks ugly'…