CLI power feature

The /design option — full field guide

How design slash workflows work in Grok Build on PowerShell: skills, plan documents, UI craft rules, and prompts that produce non-generic interfaces.

When people say “the /design option” in Grok Build, they mean the design-first slash workflow in the CLI TUI: either a dedicated design skill you invoke with /design, or the family of plan + design-system behaviors that make the agent stop coding long enough to get taste right.

How slash commands map to skills

In Grok Build, /<skill-name> is shorthand for a skill file. User skills live in ~/.grok/skills/ or ./.grok/skills/. Bundled agents also expose plan/imagine style commands. If /design is not installed yet, create the skill once (below) and it becomes a permanent superpower.

Install / create the design skill

Create a skill directory so every session can run /design …:

PowerShell — create skill skeleton

# User-global skill (available in every project)
New-Item -ItemType Directory -Force "$HOME\.grok\skills\design" | Out-Null

@'
---
name: design
description: >
  Design systems, UI polish, and visual direction before or during coding.
  Use for landing pages, dashboards, component restyles, design tokens,
  typography, spacing, and anti-generic UI passes.
---

# Design skill

When invoked via /design:

1. Clarify product surface (marketing, app chrome, dashboard, game overlay).
2. Define a token system: ≤5 colors, ≤2 fonts, spacing scale, radii.
3. Ban AI-slop: no purple gradients, no emoji icons, no lorem, no random radii.
4. Propose structure (nav, hierarchy, states) before writing large UI code.
5. Prefer shadcn/Radix + Tailwind tokens when the stack allows.
6. Deliver: token CSS, component map, and only then implementation diffs.
7. Verify mobile (~390px) and contrast.

## Output format
- Design brief (audience, tone, constraints)
- Token table
- Wire hierarchy (text)
- Implementation plan with ordered file touches
- Optional /plan handoff for multi-file builds
'@ | Set-Content -Encoding utf8 "$HOME\.grok\skills\design\SKILL.md"

# Verify Grok sees it
grok inspect

How to invoke /design

Inside an interactive grok session:

Invocation patterns

/design Redesign the pricing page for a B2B analytics product.
Dark, editorial, high contrast. Audience: CTOs. Must feel expensive, not startup-sloppy.

/design Audit current src/components for inconsistent spacing and radii.
Propose tokens, then apply only to the shell + primary buttons.

/design Create a design system for this monorepo apps/web.
Output tokens + component inventory. Do not implement yet.

/design vs /plan vs normal chat

	/design	/plan	Normal prompt
Primary output	Visual system + UI structure	Architecture + task graph	Direct code changes
Best for	Look & feel, brand, polish	Multi-file features, migrations	Small fixes, known changes
Approval	Review tokens & hierarchy first	Approve plan nodes first	Per-file write approvals
Pairing	Often → /plan to implement	Often after /design brief	Use when scope is tiny

Power move

Pro sequence: /design for taste → /plan for engineering → Normal mode for tight follow-ups. That three-step ladder is the difference between “AI website” and “shipped product.”

What a great /design run contains

1. Design brief (always)

Audience and job-to-be-done
Tone words (e.g. “editorial”, “industrial”, “clinical”) — pick 2–3
Hard constraints (brand colors, accessibility, performance budget)
Surfaces in scope (pages/components) and out of scope

2. Token system (non-negotiable)

Example token block the agent should produce

@theme {
  --color-bg: #08090b;
  --color-surface: #101216;
  --color-fg: #e8eaed;
  --color-muted: #9aa3b2;
  --color-accent: #5eead4; /* one accent only */
  --color-border: #2a303a;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-display: "Syne", system-ui, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

3. Anti-slop checklist

No purple/violet default “AI aesthetic”
No emoji as icons — use Lucide / SVG
No giant mesh gradients as decoration
No identical radius on nested padded cards
No placeholder gray boxes in final UI
≤3–5 colors, ≤2 type families, consistent spacing scale

4. Hierarchy before components

Force the agent to list: primary action, secondary actions, navigation, empty/loading/error states. Only then generate JSX.

High-leverage /design prompt recipes

Full copy-ready set also lives in the prompt library.

Landing page

/design Build a design direction for a Hostinger Cloud Startup consultancy site.
Sections: hero, proof, services, case studies, FAQ, contact.
Tone: confident, quiet luxury. Mobile-first. Include token CSS and
copy outline. Prefer performance: system or 2 web fonts max, no carousels.
Host: dedicated IP, CDN, static-export or managed Node web app.

Dashboard polish pass

/design Polish the existing dashboard without changing data models.
Fix density, table alignment, empty states, and chart card hierarchy.
Keep the current brand accent. Produce a before/after note per surface.

Using references inside /design

Reference-driven design

/design Match the density and typography spirit of ./refs/linear-settings.png
but keep our teal accent and darker chrome. Do not copy logos or exact layout.
List divergences intentionally.

How this differs on Web Build Mode

On the web, you often do not type a slash command — you describe the product and the agent loads design playbooks automatically. Paste the same brief structure: audience, tone, tokens, bans. See Web Build Mode and CLI vs Web.

Little-known /design moves

Design-only freeze: “do not write application code yet.”
Token PR first: land styles, then components.
Concentric radii: outerRadius = innerRadius + padding.
390×844 self-test required in the skill.
Pair with /skillify so house style persists.

Verification checklist

Tokens live in one place; no raw hex sprinkled in JSX
Primary CTA is obvious; secondary actions quieter
Body contrast is readable on every surface
Mobile: no horizontal scroll; tap targets ≥ 44px
Empty, loading, and error states exist
Motion is subtle; respects reduced-motion

Tip

Hostinger production constraints: Website design.