UI Craft plugin for Grok Build
Design engineering system for AI coding agents — ship UI with craft-level quality. Install as an agent skill.
How to install UI Craft in Grok Build
grok plugin install educlopez/ui-craft --trustReview before you trust it. --trust lets this plugin's hooks, MCP servers and scripts run code on your computer. It's a community repo that neither xAI nor GrokStacks has reviewed, so read its code first.
We install this repo directly: Grok Build 1.0.62 can't install it through its own marketplace file. Then start a new Grok session, or press r in /plugins, to load it.
Command format: Grok Build's plugin guide
Runs a local MCP server (with npx, uvx or similar), so that tool needs to be installed, for example Node.js for npx.
What we checked: on Oct 18, 2026 it installed with grok 1.0.62 and Grok found 29 skills, 75 slash commands, 1 subagent. That's an install check only: we haven't run it in a live Grok session.
What it contains
Skills (25)
ui-craft— Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, lanui-craft-dense-dashboard— Dense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex + mono numbers, semantic palette, 4/8px grid, sparklines, tabular-nums. Trigger on: dashboard, admin panel, data-ui-craft-editorial— Editorial / magazine / long-form / Medium / Substack / content-heavy UIs. Locked knobs: CRAFT=9, MOTION=4, DENSITY=3. Serif display + humanist body, wide reading column, drop caps, OpenType. Trigger on: editorial, magazine, long-form, blog,ui-craft-minimal— Minimal / clean / Linear / Notion / Vercel / whitespace-heavy UIs. Locked knobs: CRAFT=8, MOTION=3, DENSITY=2. Monochrome + one accent, Inter/Geist, hairline borders over shadows. Trigger on: minimal, clean, Linear-like, Notion-like, Verceladapt— Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when adding a new screen that hasn't been tested across viewports, or when the user says "manimate— Motion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's animation stack. Use when the user asks to add animation, "make it feel smoother", fix janky transitions, or trim motioaudit— Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table.bolder— Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe, flat, or "template-y", or when the user says "bolder", "more personality", "more cbrief— Write or update the project's durable design brief at .ui-craft/brief.md.clarify— UX copy review across buttons, errors, empty states, and form hints — critiques by default, applies only on request. Use when copy feels vague, generic, or AI-sounding, or when the user says "fix the labels", "improve error messages", or "rcolorize— Color strategy pass — introduces a single accent at 3-5 intentional placements, or reduces an over-colored UI back to 90% neutral. Use when the UI has no color identity, uses blue by default, or is shouting with too many competing accents.craft— One-shot build pipeline for a complete surface from an outcome recipe — inputs (or defaults) → composition → theme → build order → acceptance bar. Use when the user asks for a whole surface ("build me a dashboard", "I need a landing page")critique— Design lens critique covering visual hierarchy, clarity, and anti-slop patterns — produces a findings table, no code edits unless asked. Use when the user wants a design review, says "what's wrong with this UI", or needs a second opinion bedelight— Delight pass — adds one or two memorable micro-interactions (copy specificity, hover choreography, state transitions, one signature detail) without decoration or confetti. Use when the UI works but feels generic, or when the user says "makedistill— Reduction pass — cuts content, structure, visuals, and dead code that doesn't answer a user question or drive an action, respecting CRAFT_LEVEL. Use when the UI feels cluttered, has too many CTAs, walls of text, or decorative noise, or whenextract— Refactoring pass — extracts repeated Tailwind class combos and markup into components, and lifts magic values into design tokens. Use when the codebase has obvious duplication, hardcoded hex values or pixel sizes, or when the user says "clefinalize— Pre-ship gate — runs detector, verifies brief and tokens, applies the 10-pass finish bar, ranks findings by feedback hierarchy. Use when the user wants to ship, merge, or finalize a surface and needs a verdict (READY / NOT READY / BLOCKED)harden— Production-readiness pass — audits and implements the full non-happy-path matrix: loading skeletons, empty states, error messages, partial data, i18n, offline, permissions, and first-run guidance. Use when preparing a surface for productionheuristic— Produce a scored heuristic critique of the UI using Nielsen's 10 + 6 design laws + optional persona walkthroughs. Outputs a machine-parseable scorecard plus a 0-100 UsabilityScore (the judged companion to the deterministic UICraftScore).polish— Final craft pass applying the compound details from the polish checklist — micro-typography, spacing rhythm, hover states, and a signature detail — directly to code. Use when the surface is functionally complete but feels unfinished, or whequieter— Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler", or "tone it dredesign— Redesign an existing site or app without losing what already works — audits the current surface first, classifies what to preserve (brand, IA, SEO, content), picks a refresh/reskin/rebuild scope, then modernizes deliberately. Use when the uremember— Record a learned design constraint from a correction into the project brief.sddesign— Full spec-driven pipeline — walks brief → tokens → shape (spec) → craft (build) → converge → ship in one guided run. Writes `.ui-craft/spec.md`. Run when starting a net-new surface from scratch.shape— Wireframe-first pass — outputs an ASCII layout + state list + content inventory + question list before any code. Use when starting a new screen from scratch or when the user's brief is still ambiguous.
Subagents (2)
ui-craft:a11y-auditor— Accessibility audit of UI — keyboard navigation, focus-visible, APCA contrast, ARIA roles and labels, touch targets, and reduced-motion. Use to audit a diff, file, or surface for accessibility issues.ui-craft:design-reviewer— Adversarial design critique on a diff, file, or rendered surface. Use to review UI/design quality or audit a diff/PR for design issues. One of a parallel verify team alongside a11y-auditor.
MCP servers (1)
ui-craft— stdio server
Hooks (1)
hooks
About this listing
UI Craft is a community plugin on GitHub by educlopez, written as a Claude Code plugin that Grok Build installs. We install-checked it in Grok; we haven't run it in a live session or reviewed its code. When we installed it, Grok found 25 skills, 2 subagents, 1 MCP server, 1 hook. Its license is MIT. We checked commit eb88d0a9ad63. It's one of 143 listings in the Design category on GrokStacks.
Stacks Weekly: every new Grok Build and Codex plugin, every Tuesday.
One short email for GrokStacks and CodexStacks readers, with each new plugin's install line and what it ships. Subscribe and get the free starter list: 20 Grok Build plugins worth installing first.
You'll get a confirmation email first. Unsubscribe anytime.
UI Craft FAQ
How do I install UI Craft in Grok Build?
Run grok plugin install educlopez/ui-craft --trust. We install-checked this command in Grok Build. We install this repo directly: Grok Build 1.0.62 can't install it through its own marketplace file. Then start a new Grok session, or press r in /plugins, to load it.
Is UI Craft an official Grok Build plugin?
No. UI Craft is a community plugin on GitHub by educlopez, not in xAI's official Grok Build marketplace. We checked that it installs and what Grok loads from it, but haven't run it in a live Grok session or reviewed its code.
What does UI Craft include?
According to what Grok loaded in our install check, UI Craft includes 25 skills, 2 subagents, 1 MCP server, 1 hook: ui-craft, ui-craft-dense-dashboard, ui-craft-editorial, ui-craft-minimal, adapt, animate….
Details
- Type
- Plugin
- Category
- Design
- Source
- Community Claude Code plugin, installs in Grok
- License
- MIT
- Author
- educlopez
- Version
- 1.0.0
- Keywords
- agent-skills, anti-slop, claude-code, codex, css, cursor, design, design-system, frontend, skills, ui
- Source repo
- https://github.com/educlopez/ui-craft
- Checked commit
eb88d0a9ad63- Homepage
- https://skills.smoothui.dev/
- Checked by GrokStacks
- Install-checked in Grok Build on Oct 18, 2026; not run in a live session
Something wrong or missing? Submit or improve this listing. Marketplace listings also refresh automatically every night.
For maintainers: badge and embeds
Maintain UI Craft? Add the badge; it links to this page.
Markdown
[](https://grokstacks.com/p/ui-craft/)HTML
<a href="https://grokstacks.com/p/ui-craft/"><img src="https://grokstacks.com/badge.svg" alt="Listed on GrokStacks" width="164" height="28"></a>Embed card (static HTML and inline CSS, no JavaScript). Preview:
<a href="https://grokstacks.com/p/ui-craft/" style="display:block;max-width:380px;box-sizing:border-box;padding:14px 16px;border:1px solid #2a2e3c;border-radius:12px;background:#0a0b0f;color:#e8eaf0;font:14px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;text-decoration:none"><span style="display:block;font-size:16px;font-weight:700;color:#e8eaf0">UI Craft</span><span style="display:block;margin:2px 0 8px;font-size:12px;color:#9aa0b1">Community plugin for Grok Build · 25 skills, 2 subagents, 1 MCP server, 1 hook</span><span style="display:block;margin:0 0 10px;color:#c9cdd8">Design engineering system for AI coding agents — ship UI with craft-level quality. Install as an agent skill.</span><span style="font-size:12px;font-weight:600;color:#7c9cff">View on GrokStacks →</span></a>Markdown summary
**[UI Craft on GrokStacks](https://grokstacks.com/p/ui-craft/)**: Community plugin for Grok Build with 25 skills, 2 subagents, 1 MCP server, 1 hook. Install: `grok plugin install educlopez/ui-craft --trust`More on badges, embeds and keeping your listing up to date: GrokStacks for plugin authors.
Also in Design
3dicon
One prompt in, a looping animated 3D icon out — with real transparency. A Claude Code skill.
3dviz Pro Max
Agent skill for creative 3D visualization: turn an idea into a Three.js/Blender scene worth exploring. Claude Code + Codex plugin, 223 recipes, 440 knowledge records, 22 proved kits, 37 runnable studies.
Adobe Premiere Pro MCP
Adobe Premiere Pro MCP. Tools for AI-driven video editing via MCP, for Codex, Claude, and other MCP clients.
Agent Sprite Forge
Agent Skill for generating 2D sprite sheets and map, transparent PNG frames, and animated GIFs from prompts.
Agent Storyboard
本地优先的 Agent 视频分镜工作台：让 Codex、Claude Code 通过 MCP 写分镜、生成图片/视频素材和配音，并自动回填。Local-first storyboard workbench for AI agents (Codex, Claude Code).
AI Business Skills
138 bilingual AI marketing skills (69 VN + 69 Global) for Claude Code, OpenCode, Codex, VS Code. Four role SOP packs — content, design, performance, leader ops — plus strategy, personal brand, AI avatar, dropshipping, design master, knowledge library. 4 regions (US/EU/SEA/LATAM) + Vietnam 2025-2026. Companion: opa-kit.