界 界 与 界 界 界 方向 方向 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 方向 及 及 及 及 及 及 方向 方向 及 方向 方向 及 及 及 方向 及 及 方向 方向 方向 方向 及 。 。 。 。 方向 。 。 。 。 。 。 。 。 。 。 。 方向 方向 。 。 方向 方向 。 方向 。 。 方向 及 。 。 及 及 及 。 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及 及

スキルは、バンドルされた[grok-designer]を介して設計判断のためにGrok 4.5を尋ね、その後、メインエージェントは、現在のワークスペースでアドバイスを適用する方法を決定します。

インストール

最も簡単な方法は、Codex、Claude Code、CursorなどのエージェントにこのGitHubリポジトリを渡すことです。

端末から直接インストールすることもできます。

インストール後、タスクが外部設計判断を必要とするとき、エージェントは[grok-designerスキルを使用する必要があります。

認証

CLI はローカル設定を次のものから読み込みます。

デフォルトでは、API キーは以下から読み込まれます。

API キーやローカルコンフィグファイルをコミットしないでください。 リポジトリは、 [.env、 [config.toml]]、 [api_key] を含む一般的なローカルシークレットファイルを無視します。

エージェントが知っておくべきこと

• Grokは無状態です。 現在のプロンプト、-fで渡されたファイルと-iで渡された画像のみが表示されます。
• ビジュアル/UIレビューは[grok-designer ui]を使用します。
• UX、コンポーネント選択、タスクフロー、インタラクション、摩擦、またはステートフィードバックレビューの場合は、[grok-designer ux]を使用します。
• UI + UXレビューを組み合わせるには、[grok-designer ui,ux]またはuiと[ux]を別々に使用してください.

Grok Designer

委托外部设计顾问评审界面与交互，输出改进建议、视觉方向及 HTML、SVG 草稿。

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 Grok to patch project files directly. Use its advice, then apply the changes in the workspace.

CLI

可以直接使用 bundled 脚本；只有用户要求全局安装时才安装命令：

grok-designer

Typical examples:

grok-designer ui "给这个页面提视觉/UI设计建议" -f ./design.html -o design-page-ui.md
grok-designer ux "评审这个页面的任务流、交互摩擦和状态反馈" -f ./design.html -o design-page-ux.md
grok-designer ui,ux "同时从 UI 和 UX 角度评审这个标签编辑组件" -f ./TagEditor.tsx -o tag-editor-review.md
grok-designer direction "给这个产品生成设计意象 markdown" -o product-design-imagery.md
grok-designer html "生成一个完整的产品页面设计稿" -f ./brief.md -o ./designs/product-page.html
grok-designer svg "为 Museon 生成一个手写 SVG 字标" -o museon-wordmark.svg

Bare output filenames are saved under .grok-designer/ in the current workspace.

For multi-command markdown review, a single -o value is suffixed per command. For example, -o tag-editor-review.md writes tag-editor-review-ui.md and tag-editor-review-ux.md.

Repository Layout

SKILL.md
scripts/grok-designer
scripts/install_cli

SKILL.md tells agents when and how to use Grok. scripts/install_cli installs the CLI into the user’s local bin directory. scripts/grok-designer is the command agents call.