claude-ui-design-system

🥈Silver

@apexscaleai

Complete UI/UX design system for React Native & Next.js - Claude Code skills for greenfield and brownfield projects

1030Updated 1mo ago

Intermediate30min to implementautomation

Saves ~150 min per use

Quick InstallView Source

git clone https://github.com/apexscaleai/claude-ui-design-system.git

Works with:

Claude

Overview

About This Skill

Complete UI/UX design system for React Native & Next.js - Claude Code skills for greenfield and brownfield projects

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/apexscaleai/claude-ui-design-system

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

Create a comprehensive UI/UX design system for a [COMPANY] in the [INDUSTRY] sector. The design system should include components for both React Native and Next.js. Include a color palette, typography, spacing, and common UI components like buttons, cards, and navigation elements. The design system should be adaptable for both greenfield and brownfield projects. Provide the code for the design system in a structured format.

Example Output

## UI/UX Design System for [COMPANY] in the [INDUSTRY] Sector

### Color Palette
- Primary: #2A5C8A
- Secondary: #4A8FAA
- Accent: #FFA07A
- Background: #F5F5F5
- Text: #333333

### Typography
- **Headings**: Montserrat (Bold, Semi-Bold)
- **Body**: Open Sans (Regular, Medium)
- **Font Sizes**:
  - Headings: 24px, 20px, 18px
  - Body: 16px, 14px

### Spacing
- **Padding**: 16px (Standard), 24px (Large)
- **Margins**: 16px (Standard), 24px (Large)
- **Gutters**: 16px (Standard), 24px (Large)

### Components
#### Buttons
```jsx
const Button = ({ title, onPress }) => (
  <TouchableOpacity onPress={onPress} style={styles.button}>
    <Text style={styles.buttonText}>{title}</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2A5C8A',
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontFamily: 'Montserrat-SemiBold',
    fontSize: 16,
  },
});
```

#### Cards
```jsx
const Card = ({ title, content }) => (
  <View style={styles.card}>
    <Text style={styles.cardTitle}>{title}</Text>
    <Text style={styles.cardContent}>{content}</Text>
  </View>
);

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  cardTitle: {
    fontFamily: 'Montserrat-Bold',
    fontSize: 20,
    marginBottom: 8,
  },
  cardContent: {
    fontFamily: 'OpenSans-Regular',
    fontSize: 16,
  },
});
```