Octopus UI/UX Design Skill: Style Guides, Palettes and Specs

What is the octopus-ui-ux-design skill?

The octopus-ui-ux-design skill lives inside the nyldn Octopus plugin repository, in its skills folder. Its description is short: design UI and UX systems with style guides, palettes, typography and component specs for new interfaces.

It is a strict workflow, not a style prompt. The skill's execution contract says the agent must run a BM25 design search script at least three times before it recommends anything, so answers come from curated data rather than memory alone.

What a run looks like

1. Four blocking questions come first: product type, tech stack, deliverables and how adventurous the design should be.
2. A provider check runs, and a banner lists which external models and tools are available.
3. A preflight confirms the vendored search script and python3 exist. If either is missing, the workflow stops and tells you how to repair the install.
4. The agent runs the design searches. With three or more providers available, it asks each for an independent direction and shows a comparison board.
5. It writes a design direction, puts it through adversarial critique, then moves to tokens, components, layouts and validation.

What the skill will not let the agent do

• Ship one of three banned looks: cream with serif and terracotta, near-black with an acid accent, or purple and violet gradients.
• Default to Inter, Roboto, Space Grotesk, Fraunces or Instrument Serif without a reason tied to the brief.
• Skip critique. Five dimensions are checked: accessibility, practicality, fit, gaps and slop. Two or more slop checklist misses fail the direction.
• Clamp a bad dial. A missing or out-of-range variance, motion or density value stops the run until you give a valid one.

Who the octopus-ui-ux-design skill is for

Best for

• A new interface where you want style direction, tokens and component specs settled before anyone writes code.
• Teams that already run several model providers and want independent design directions to compare.
• People who prefer enforced steps and a recorded rationale over a single free-form answer.

Not for

• A quick tweak to one existing component. The mandatory questions, banner and searches are heavy for that. Try polish instead.
• A finished, coded site. The output is direction, tokens, specs and layouts, not a built page.
• Native Windows shells. The README lists Git Bash, MSYS2 and Cygwin as unsupported and points to WSL.

Use it with UiChemy

The skill ends in specs, not a WordPress page. If you design in Figma, UiChemy Figma to WordPress converts the frames. If an agent builds the front end from these specs, AI to WordPress imports the result. Click Get Started on uichemy.com, then review it in the editor.

The skill's search script comes from a vendored copy of ui-ux-pro-max. For the outputs, see design-token and component-spec, and run critique on the result when you want another independent review.

How to install Octopus UI/UX Design Skill: Style Guides, Palettes and Specs

claude plugin marketplace add https://github.com/nyldn/plugins.git && claude plugin install octo@nyldn-plugins

1. Add the marketplace

   In a terminal, not inside a Claude Code session, run claude plugin marketplace add https://github.com/nyldn/plugins.git. The README lists Claude Code v2.1.14 or newer as the minimum runtime.

2. Install the plugin

   Run claude plugin install octo@nyldn-plugins. The skill ships inside this plugin, so there is no separate download for the skill folder.

3. Run setup

   Inside Claude Code, run /octo:setup. It detects installed providers, shows what is missing and walks through configuration. Zero external providers are needed to start, because the host model is built in.

4. Codex route

   For Codex CLI, run codex plugin marketplace add https://github.com/nyldn/plugins.git, then codex plugin add claude-octopus@nyldn-plugins. Restart Codex, and skills appear automatically, invoked with a dollar sign name.

5. Invoke it by hand

   The skill sets disable-model-invocation, and the README says Octopus stays dormant until you run its commands. Run /octo:guide to browse the commands in your installed version.

Check that it loaded

Start the skill explicitly. It should ask four questions first, run the provider check, display its banner, then call search.py at least three times before any design recommendation. If it reports a missing search script, reinstall or update the plugin.

Read the official instructions on GitHub

Key features

• Blocking questions firstBefore anything else the agent asks about product type (SaaS, e-commerce, landing page, mobile app), stack, deliverables and how adventurous the design should be. Skipping this step breaks the contract.
• Style dialsVariance, motion and density are integers from 1 to 10. Presets run from Conservative at 3, 2, 4 to Maximal at 9, 8, 6. A named style in your brief, such as brutalist, sets them automatically.
• Enforced BM25 searchThe agent must call search.py at least three times. Domains include product, style, color, typography and ux, plus a stack search and a full design-system draft that takes the dial values.
• Provider check and bannerA helper script checks which external providers are installed, and the banner reports real results for Codex and Antigravity alongside the host model, plus whether the Figma and shadcn MCPs are configured.
• Design shotgun modeWith three or more providers available, the same brief goes to each in parallel. Each returns a style name, palette, fonts, layout philosophy and feel, and you pick a variant or mix and match.
• Design direction documentThe agent synthesizes a style recommendation, a palette with hex values and contrast ratios, a font pairing with an import, a layout approach, three to five principles and a taste compliance line.
• Taste gateA design-taste checklist bans three recognizable AI looks and unjustified default fonts. The direction must show boldness in one place and must not be what another model would produce from the same brief.
• Three-way adversarial critiqueThe direction goes to up to three independent reviewers who check accessibility with WCAG AA ratios, practicality on the stack, fit, research gaps and slop, stating what is wrong and what to do.
• Deliverable optionsYou choose among design tokens as CSS or Tailwind config, component specs with anatomy, states and props, wireframe-level page layouts, and a style guide with rationale.
• Figma context hooksIf you provide a Figma URL, the agent pulls existing designs with get_design_context and uses get_screenshot for visual reference before it forms a direction.

Frequently asked questions