bencium-impact-designer

bencium-impact-designer is a skill for Claude Code from bencium/bencium-marketplace. It costs 56 tokens per session (9,677 once invoked), scanned A, original, MIT.

A design skill for creating distinctive, production-ready frontend interfaces, meaning the visible parts of websites and applications. It is based on Anthropic's Frontend Designer Skill and avoids generic AI styling.

In plain words
What is it for?
Use it when building web components, pages, or applications that need creative, polished frontend code.
Why use it?
It gives frontend work a stronger visual direction when a standard generated interface is not suitable. The description focuses on design quality and polished code.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the bencium-impact-designer plugin — 1 skill shipped together

not rated 422repo +3 12d ago A scan Socket: passSnyk: passSkillSpector: pass 56 tokens original MIT

Good fit Use it when building web components, pages, or applications that need creative, polished frontend code.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/bencium/bencium-marketplace/bencium-impact-designer
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add bencium/bencium-marketplace --skill bencium-impact-designer
Clone the repo
git clone --depth 1 https://github.com/bencium/bencium-marketplace

Made for: Claude Code.

Or install bencium-impact-designer, the plugin that ships this one along with the rest of its 1 skill.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for bencium-impact-designer

README.md
[![agentmods](https://agentmods.dev/badge/skills/bencium/bencium-marketplace/bencium-impact-designer/github.svg)](https://agentmods.dev/skills/bencium/bencium-marketplace/bencium-impact-designer)
Your own site
<a href="https://agentmods.dev/skills/bencium/bencium-marketplace/bencium-impact-designer"><img src="https://agentmods.dev/badge/skills/bencium/bencium-marketplace/bencium-impact-designer/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for bencium-impact-designer

Your own site · 80×15
<a href="https://agentmods.dev/skills/bencium/bencium-marketplace/bencium-impact-designer"><img src="https://agentmods.dev/badge/skills/bencium/bencium-marketplace/bencium-impact-designer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 56 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 9,677 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • Socket pass 18 Mar 2026
  • Snyk pass 8 Mar 2026
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00056 $0.09677
Opus 5 $0.00028 $0.04838
Sonnet 5 $0.00011 $0.01935
Haiku 4.5 $0.00006 $0.00968

Measured 12d ago against content hash 1fca052c27eb, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

bencium-impact-designer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

bencium-impact-designer/skills/bencium-impact-designer/SKILL.md · 989 lines

How it starts

The opening of the file, as written. The whole thing — 989 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Innovative Designer for impact

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. Expert UI/UX design skill that helps create unique, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out.

This skill emphasizes bold creative commitment, breaking away from generic patterns, and building interfaces that are visually striking and memorable while remaining functional.

Core Philosophy

CRITICAL: Design Thinking Protocol

Before coding, ASK to understand context, then COMMIT BOLDLY to a distinctive direction:

Questions to Ask First

  1. Purpose: What problem does this interface solve? Who uses it?
  2. Tone: What aesthetic extreme fits? (see Tone Options below) Use these for inspiration but design one that is true to the aesthetic direction.
  3. Constraints: Technical requirements (framework, performance, accessibility)?
  4. Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, TypeScript, etc.) that is:

  • Production-grade and functional
  • Visually striking and memorable
  • Cohesive with a clear aesthetic point-of-view
  • Meticulously refined in every detail

Tone Options (Pick an Extreme)

Choose a clear aesthetic direction and execute with precision:

  • Brutally minimal - stripped to essence, bold typography, vast whitespace
  • Retro-futuristic - vintage meets sci-fi, nostalgic tech aesthetics
  • Organic/natural - soft edges, earthy colors, nature-inspired textures
  • Editorial/magazine - strong typography hierarchy, asymmetric layouts
  • Brutalist/raw - exposed structure, harsh contrasts, intentionally rough
  • Art deco/geometric - bold patterns, metallic accents, symmetric elegance
  • Soft/pastel - gentle gradients, muted tones, calming atmosphere
  • Industrial/utilitarian - functional, no-nonsense, mechanical precision • - Neo-Swiss Grid - rigorous grid, restrained palette, razor-sharp alignment, typographic clarity
    • Anti-Grid Experimental - intentional misalignment, broken columns, playful tension, art-school energy
    • Monochrome High-Contrast - black/white only, stark hierarchy, dramatic scale shifts, graphic punch
    • Duotone Pop - two-color system, bold overlays, poster-like impact, strong silhouettes
    • Kinetic Typography - type as motion, stretched/warped letterforms, rhythm- first composition
    • Glitch/Digital Noise - scanlines, compression artifacts, chromatic offsets, “corrupted” UI textures
    • Y2K Cyber Gloss - chrome gradients, gel buttons, translucent panels, late- 90s web futurism
    • Vaporwave Nostalgia - neon dusk palette, palm silhouettes, faux-3D, retro mall ambience
    • Synthwave Night Drive - magenta/cyan, grid horizons, glowing edges, cinematic neon noir
    • Memphis Playful - squiggles, confetti geometry, loud patterns, upbeat irreverence
    • Riso Print - limited inks, misregistration, grainy textures, analog imperfection
    • Bauhaus Modernism - primary colors, simple geometry, functional forms, clarity through reduction
    • Constructivist Propaganda - diagonals, bold blocks, agit-poster energy, commanding headlines
    • Futurist Speed - slanted type, motion lines, aggressive angles, velocity as a design principle
    • Cinematic Noir - moody shadows, tight spotlighting, grain, suspenseful minimal palette

Read the full file on GitHub · 989 lines

Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 12d ago First seen · 989 lines · 56 tokens per session scan A 1fca052c27eb

Subscribe to this mod's changes

bencium-impact-designer is a skill published in the GitHub repository bencium/bencium-marketplace (422 stars, last pushed 12d ago), licensed MIT. It adds 56 tokens to every session and 9,677 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

设计大师

A Chinese-language design skill for creating high-fidelity HTML prototypes, interactive demos, slide decks, animations, visualizations, and design variations. HTML is used as the production tool for these visual outputs.

laborany/laborany · 362 tokens

前端设计师

A design guide for creating distinctive, high-quality front-end interfaces, meaning the parts of websites and applications that people see and use. It encourages deliberate layouts, restrained colors, precise spacing, and typography instead of generic AI-generated patterns.

laborany/laborany · 119 tokens

playground

Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.

anthropics/claude-plugins-official · 53 tokens

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

anthropics/claude-plugins-official · 40 tokens

html-artifacts

Author the HTML for a plan artifact, dashboard iframe, or Slack attachment — structure, design plan, available runtime, theming, and craft. Read this before writing HTML for saveplan, outputiframe, or slackattachhtml.

langchain-ai/open-swe · 51 tokens

fixing-accessibility

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

ibelick/ui-skills · 45 tokens