bencium-claude-code-design-skill

🥈Silver

Claude Code skills for UI/UX design guidance. Choose between controlled or innovative variants based on project needs. Integrates with design tools and workflows for streamlined design processes.

17450Updated 1mo ago

Intermediate30min to implementautomation

Saves ~75 min per use

Quick InstallView Source

git clone https://github.com/bencium/bencium-claude-code-design-skill.git

Works with:

Claude

Overview

About This Skill

Claude Code skills for UI/UX design guidance. Choose between controlled or innovative variants based on project needs. Integrates with design tools and workflows for streamlined design processes.

How to Use

1. **Prepare Your Files**: Ensure your design files (Figma/Adobe XD/Sketch) are up-to-date and accessible via a shared link or local file path. 2. **Define Scope**: Specify whether you need **controlled** (incremental improvements) or **innovative** (bold, experimental) design guidance. Use the prompt template to set clear priorities (e.g., accessibility, micro-interactions). 3. **Run the Skill**: Paste the prompt into Claude Code and let it analyze your design system. Review the generated recommendations in the output. 4. **Iterate**: Use the provided roadmap to implement changes in your design tool. For Figma users, leverage plugins like Stark or Contrast for validation. 5. **Validate**: Test the updated designs with tools like NVDA (screen reader) or browser dev tools (Lighthouse for accessibility). **Tip**: For innovative designs, ask the skill to generate 3 radical but feasible concepts for a specific component (e.g., a checkout flow) and compare them against your current approach.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/bencium/bencium-claude-code-design-skill

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Act as a senior UI/UX design consultant using Claude Code. For the project [PROJECT_NAME], analyze the current design system and provide [CONTROLLED/INNOVATIVE] design guidance. Focus on [SPECIFIC_AREA: e.g., accessibility, micro-interactions, or component library consistency]. Use [DESIGN_TOOL: Figma/Adobe XD/Sketch] to generate actionable recommendations. Prioritize solutions that align with [BUSINESS_GOALS: e.g., conversion rates, user retention, or brand consistency].

Example Output

For **Project Phoenix** (a fintech dashboard redesign), I analyzed the current Figma design system and identified critical gaps in accessibility compliance. The existing color palette failed WCAG 2.1 AA contrast ratios in 6 key components, including the primary CTA button and data table headers. My recommendations include:

1. **Color System Overhaul**:
- Replaced the current `#0066CC` primary blue with `#0052A3` (4.6:1 contrast against white) to meet WCAG AA standards.
- Introduced an 8-step grayscale palette (from `#111827` to `#F9FAFB`) for consistent text hierarchy.
- Added a new semantic color token system (e.g., `--color-semantic-error`, `--color-semantic-success`) to decouple design decisions from brand colors.

2. **Component Library Fixes**:
- Updated the button component to use the new palette, ensuring the primary button (`#0052A3` background, `#FFFFFF` text) passes contrast checks at all states (default, hover, active).
- Redesigned the data table header to use `--color-semantic-surface` (a light gray) with bold text to improve readability.
- Added a 2px focus outline (`#0052A3`) to all interactive elements for keyboard navigation compliance.

3. **Implementation Roadmap**:
- **Week 1**: Audit all existing components in Figma using the Stark plugin to identify contrast violations.
- **Week 2**: Update the color tokens in the design system file and propagate changes to all components.
- **Week 3**: Test the updated components with a screen reader (NVDA) and fix remaining issues.
- **Week 4**: Document the new palette and guidelines in the design system’s README file.

**Impact**: These changes are projected to improve accessibility scores by 40% and reduce support tickets related to color contrast issues by 60%. The new token system will also future-proof the design for dark mode and theming needs.

Would you like me to generate the updated Figma file with these changes or focus on another area first?