claude-code-design-skills

🥈Silver

Claude Code skills automate design-to-code workflows. Operations teams use these skills to convert Figma designs into production-ready code. Connects to Claude Code for streamlined development processes.

3730Updated 1mo ago

Intermediate30min to implementautomation

Saves ~195 min per use

Quick InstallView Source

git clone https://github.com/scoobynko/claude-code-design-skills.git

Works with:

Claude

Overview

About This Skill

How to Use

[{"step":"Prepare your Figma design file. Ensure it's properly organized with components, styles, and naming conventions that match your production code standards. Share the Figma file URL with view access.","tip":"Use Figma's 'Share' feature to generate a link that allows view-only access. Organize your design with auto-layout containers and consistent naming for easier conversion."},{"step":"Open your terminal or IDE and run the Claude Code command with the generated prompt. Example: `claude -p \"Convert the Figma design file [URL] for MyApp into production-ready React components using Tailwind CSS\"`","tip":"For complex designs, break the conversion into smaller chunks by focusing on one component or screen at a time. Start with the most critical components first."},{"step":"Review the generated code in your IDE. Check for: 1) Proper component structure, 2) Responsive behavior, 3) Style consistency with your design system, 4) Accessibility compliance.","tip":"Use your IDE's linting tools to catch potential issues. Compare the generated code against your design system documentation to ensure consistency."},{"step":"Integrate the generated code into your project. Test on different devices and browsers to verify the implementation matches the original design.","tip":"Set up browser testing tools like BrowserStack or use Chrome DevTools' device emulation. Create a test suite to verify all interactive elements work as expected."},{"step":"Iterate based on feedback. Use the generated code as a starting point and refine it based on QA feedback or additional requirements.","tip":"Maintain a changelog for design-to-code conversions to track improvements and lessons learned. This helps refine the process for future 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/scoobynko/claude-code-design-skills

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

Convert the Figma design file [FIGMA_FILE_URL] for [PROJECT_NAME] into production-ready code. Focus on [PRIMARY_COMPONENT] (e.g., 'dashboard layout', 'mobile navigation bar'). Ensure the code follows [STYLING_FRAMEWORK] (e.g., Tailwind CSS, Material-UI) and is responsive for [DEVICE_BREAKPOINTS] (e.g., mobile, tablet, desktop). Include comments for key sections and export assets from the design file if needed.

Example Output

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analytics Dashboard | Project Alpha</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 font-sans">
    <!-- Main Dashboard Container -->
    <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
        <!-- Header Section -->
        <header class="flex justify-between items-center mb-8">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center">
                    <i class="fas fa-chart-line text-white text-lg"></i>
                </div>
                <h1 class="text-2xl font-bold text-gray-800">Project Alpha Dashboard</h1>
            </div>
            <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                Export Report
            </button>
        </header>

        <!-- Stats Cards Row -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-indigo-500">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">Total Revenue</p>
                        <p class="text-3xl font-bold text-gray-800 mt-1">$124,850</p>
                    </div>
                    <i class="fas fa-dollar-sign text-indigo-500 text-2xl"></i>
                </div>
                <p class="text-green-500 text-sm mt-2">+12% vs last month</p>
            </div>

            <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-green-500">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">Active Users</p>
                        <p class="text-3xl font-bold text-gray-800 mt-1">2,458</p>
                    </div>
                    <i class="fas fa-users text-green-500 text-2xl"></i>
                </div>
                <p class="text-green-500 text-sm mt-2">+8% vs last week</p>
            </div>

            <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-blue-500">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">Conversion Rate</p>
                        <p class="text-3xl font-bold text-gray-800 mt-1">3.2%</p>
                    </div>
                    <i class="fas fa-chart-bar text-blue-500 text-2xl"></i>
                </div>
                <p class="text-red-500 text-sm mt-2">-1.5% vs target</p>
            </div>
        </div>

        <!-- Chart Section -->
        <div class="bg-white p-6 rounded-xl shadow-sm mb-8">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">Revenue Trend (Last 30 Days)</h2>
            <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
                <!-- Chart.js implementation would go here -->
                <canvas id="revenueChart" width="400" height="200"></canvas>
                <script>
                    // Chart configuration would be dynamically generated
                    const ctx = document.getElementById('revenueChart').getContext('2d');
                    const revenueChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: ['Jan 1', 'Jan 7', 'Jan 14', 'Jan 21', 'Jan 28'],
                            datasets: [{
                                label: 'Revenue ($)',
                                data: [8500, 12400, 9800, 14200, 124850],
                                borderColor: '#6366f1',
                                backgroundColor: 'rgba(99, 102, 241, 0.1)',
                                tension: 0.4,
                                fill: true
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { display: false }
                            }
                        }
                    });
                </script>
            </div>
        </div>

        <!-- Bottom Section with Table -->
        <div class="bg-white p-6 rounded-xl shadow-sm">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">Recent Transactions</h2>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Customer</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-100">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jan 28, 2024</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Acme Corp</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$12,450</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jan 27, 2024</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Globex Inc</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$8,920</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jan 26, 2024</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Initech</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$5,230</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

/* Responsive adjustments */
@media (max-width: 768px) {
    .grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    body {
        padding: 0.5rem;
    }
}
```

**Assets Exported:**
- `chart-line.svg` (icon used in header)
- `chart-bar.svg` (icon used in stats cards)
- `users.svg` (icon used in active users card)
- `dollar-sign.svg` (icon used in revenue card)

**Key Implementation Notes:**
1. The design uses Tailwind CSS for styling as specified, with custom color palette matching the Figma design system
2. All interactive elements (buttons, table rows) include hover states for better UX
3. The chart section includes a placeholder for Chart.js integration - you would replace with actual implementation
4. Mobile responsiveness is handled through Tailwind's responsive prefixes
5. Font Awesome icons are used for consistency with the design system
6. The code includes semantic HTML5 elements for better accessibility
7. All color values match the exact hex codes from the Figma design file

To complete implementation, you would need to:
- Replace the chart placeholder with actual Chart.js configuration
- Connect to your backend API for dynamic data
- Implement any additional interactivity specified in the design
- Add proper error handling and loading states