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.

7050Updated 2w 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.

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

I'm designing a [UI/UX] for [COMPANY], a [INDUSTRY] company. I need design guidance for [SPECIFIC DESIGN TASK]. Please use your [controlled/innovative] variant. Here's the [DATA] I have so far: [DATA]. Can you suggest [SPECIFIC DESIGN ELEMENTS] that align with [COMPANY]'s brand guidelines and [INDUSTRY] standards?

Example Output

# UI/UX Design Recommendations for GreenTech Solutions

## Header Design
- **Controlled Variant**: Based on your brand guidelines, I recommend a header with your logo left-aligned, a navigation menu centered, and a call-to-action button right-aligned. The color scheme should be #2E8B57 for the background and #FFFFFF for the text.
- **Innovative Variant**: Considering current design trends in the tech industry, I suggest a sticky header with a semi-transparent background (#2E8B57 with 80% opacity) and a hamburger menu for mobile responsiveness. The call-to-action button could be a gradient from #2E8B57 to #3CB371 to draw attention.

## Color Palette
- **Controlled Variant**: Your current color palette of #2E8B57, #3CB371, #FFFFFF, and #000000 works well. I recommend using #2E8B57 for primary buttons and #3CB371 for secondary buttons.
- **Innovative Variant**: To modernize your design, consider adding a secondary color palette with #48D1CC for accents and #F5F5F5 for backgrounds. This will create a more dynamic and engaging user interface.

## Typography
- **Controlled Variant**: Continue using the Roboto font family for consistency. Use Roboto Bold for headings and Roboto Regular for body text.
- **Innovative Variant**: To enhance readability and visual appeal, consider using the Poppins font family. Use Poppins SemiBold for headings and Poppins Regular for body text. This will give your design a more modern and clean look.