claude-designer-skill

🥈Silver

Claude Designer Skill automates UI/UX design with Jobs-style perfectionism and Rams-style functionalism. Operations teams benefit from consistent, high-quality designs. It integrates with Claude Code and Jobs-style design principles to streamline workflows.

3200Updated 4w ago

Intermediate30min to implementautomation

Saves ~120 min per use

Quick InstallView Source

git clone https://github.com/joeseesun/claude-designer-skill.git

Works with:

Claude

Overview

About This Skill

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/joeseesun/claude-designer-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

Design a mobile app interface for [COMPANY] in the [INDUSTRY] sector. The app should follow Jobs-style design principles with a focus on user experience and aesthetics. Include a home screen, product listing page, and checkout process. Use a color palette of [COLORS] and ensure the design is accessible and functional.

Example Output

# Mobile App Interface Design for GreenTech Solutions

## Home Screen
- Clean, minimalist layout with a prominent search bar
- Featured products carousel with high-quality images
- Navigation menu with icons for easy access
- Subtle animations for interactive elements

## Product Listing Page
- Grid layout with product images, names, and prices
- Filter options for category, price range, and ratings
- 'Add to Cart' button with hover effect
- Product quick view modal for detailed information

## Checkout Process
- Multi-step form with progress indicator
- Secure payment options with clear icons
- Order summary with editable quantities
- Confirmation page with order details and estimated delivery

**Color Palette**: #2E7D32 (Green), #FFFFFF (White), #E0E0E0 (Light Gray), #000000 (Black)
**Typography**: Roboto (Regular, Medium, Bold) for a modern and clean look