What is the bencium-controlled-ux-designer skill?
bencium-controlled-ux-designer is a UI and UX skill built on one rule: the agent must ask before it picks colors, fonts, sizes or layouts. Approved choices then follow set limits, such as WCAG 2.1 AA contrast, a 1.25x type scale, a 4px spacing base and borders in place of shadows.
bencium-controlled-ux-designer is the cautious design skill in the bencium-marketplace, a collection of 17 skills and tools. Its marketplace description calls it systematic UX design for production, with WCAG 2.1 AA, mathematical scales and an always-ask-first protocol.
The SKILL.md opens with a design decision protocol. The agent asks before any choice about colors, fonts, sizes or layouts, presents alternatives with trade-offs instead of one answer, and implements nothing until you say so.
What the skill pins down once you approve
- Color: four to five desaturated neutrals plus one to three saturated accents, each with a stated job.
- Type: two to three typefaces at most, a 1.25x scale from a 16px base, 1.5 line height and lines of 45 to 75 characters.
- Spacing: a 4px base with an 8, 16, 24, 32 and 48px scale, laid out with gap on grid and flex wrappers.
- Depth: borders and background shifts mark containers, and shadows are rejected as fake depth.
How it compares with its sibling
The same marketplace ships bencium-innovative-ux-designer for bold work such as landing pages and campaigns, where shadows, gradients and experimental type are allowed. The controlled skill is aimed at enterprise and regulated industries.
Who bencium-controlled-ux-designer is for
Best for
- Teams in enterprise or regulated settings, where an agent guessing at brand colors is a risk.
- Projects with an existing brand or approval process, since nothing visual lands before sign off.
- Builds that must pass accessibility review, with contrast, touch targets and keyboard navigation on a checklist.
Not for
- Fast one-shot prototypes. The ask-first rule adds a round of questions before output.
- Shadow-heavy or gradient-heavy looks, which the skill steers away from. For another approach, see frontend-design.
- Teams that want a pure audit pass; accessibility review is a narrower fit.
Use it with UiChemy
bencium-controlled-ux-designer settles the design system and the front end around it. To bring an AI build into WordPress, UiChemy AI to WordPress imports it, and Composer edits the result inside Elementor or Gutenberg. Click Get Started on uichemy.com.
If you also want review passes on the same output, improve UI and UI/UX design cover related ground and show how other skills frame the job.
How to install bencium-controlled-ux-designer Skill: Ask Before Every Design Call
/plugin install bencium-controlled-ux-designer@bencium-marketplaceAdd the marketplace
In Claude Code, run
/plugin marketplace add bencium/bencium-marketplace.Install the plugin
Run
/plugin install bencium-controlled-ux-designer@bencium-marketplace. The skill lives in bencium-controlled-ux-designer/skills/bencium-controlled-ux-designer.Using another tool
The README says the SKILL.md format works with tools such as Codex, Gemini CLI, Cursor and Windsurf. Copy the skill folder into that tool's prompt or context directory.
Ask for a component
Request a page or component. The agent should ask about colors, fonts, sizes and layout before writing any code.
Check that it loaded
Ask for a new pricing page. The agent should stop and ask about palette, typefaces, sizes and layout, offering alternatives, and only build once you approve.
Key features
- Design decision protocolThe agent must ask before choosing colors, fonts, sizes or layouts, offers alternatives and trade-offs, and waits for explicit instruction before making design changes.
- Generic pattern avoidanceIt warns against default AI styles such as excess bauhaus, liquid glass and generic SaaS looks. It points to photography, patterns, textures and slow, subtle looping animation for interest.
- Material honestyButtons signal affordance through color, spacing and type, and cards use borders and background shifts. Hierarchy comes from scale, weight and spacing, not elevation.
- Color system rulesA base palette of four to five neutrals and an accent palette of one to three colors, with hover, focus and disabled states defined. It also advises avoiding the default SaaS blue unless the brand fits.
- WCAG 2.1 AA contrastMinimum contrast is 4.5 to 1 for normal text and 3 to 1 for large text. Color must never be the only signal, so icons or labels back it up.
- Type scale and readabilityTwo to three typefaces, three weights each, a 1.25x ratio from a 16px base, 1.5 line height and 45 to 75 character lines. Form inputs stay at 16px minimum to prevent iOS zoom.
- Spacing and grid disciplineA 4px base with a fixed scale, consistent grids and gap based wrappers in place of margins on children.
- Purposeful motionAnimation must orient, relate, give feedback or guide attention. Interactive feedback stays under 300ms, with ease-out for entrances, ease-in for exits and prefers-reduced-motion respected.
- Seven point checklistBefore presenting a design the agent checks purpose, hierarchy, consistency, accessibility, responsiveness, uniqueness and whether approval was asked for.
- Companion reference filesThe skill folder adds ACCESSIBILITY.md, DESIGN-SYSTEM-TEMPLATE.md, MOTION-SPEC.md and RESPONSIVE-DESIGN.md for deeper detail on those topics.
Frequently asked questions
What is the bencium-controlled-ux-designer skill?
It is a UI and UX design skill from the bencium-marketplace. It tells your AI agent to ask before making any design decision, then applies fixed rules for color, type, spacing, motion and WCAG 2.1 AA accessibility once you approve.
How do I install bencium-controlled-ux-designer?
Add the marketplace with /plugin marketplace add bencium/bencium-marketplace, then run /plugin install bencium-controlled-ux-designer@bencium-marketplace. For other tools, copy the skill folder from the repository into the place your tool reads skills or context.
Which AI coding agents can use bencium-controlled-ux-designer?
The README calls the marketplace a Claude Code plugin marketplace and says the SKILL.md format also works with OpenAI Codex, Gemini CLI, Cursor, Windsurf and others, by copying the skill files into the tool's prompt or context directory.
Why does the skill always ask before designing?
Its SKILL.md makes asking a critical protocol. Colors, fonts, sizes and layouts are not changed until you explicitly instruct it, and the guidance below the protocol only applies once those choices are approved. It suits teams where design sign off matters.
How is it different from bencium-innovative-ux-designer?
The README describes the innovative skill as bold, committing to distinctive directions with shadows, gradients and experimental typography. The controlled skill is positioned for enterprise and regulated industries and favors borders over shadows with fixed scales.
What accessibility rules does it apply?
It follows WCAG 2.1 AA with 4.5 to 1 contrast for normal text and 3 to 1 for large text. It also says not to rely on color alone, and its checklist covers touch targets and keyboard navigation. A separate ACCESSIBILITY.md holds more detail.
What license does it use, and how active is the repository?
The repository is MIT licensed and has 445 stars. The last push was on October 4, 2026. It holds 17 skills and tools, so check the commits for this skill before relying on it in production.