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 3mo 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

How to Use

[{"step":"Define the design scope","action":"Fill in [SCREEN_TYPE], [PRODUCT_NAME], [PRIMARY_USER], [USER_GOAL], and [DESIGN_SYSTEM] placeholders with your specific requirements. Be as precise as possible about the user's goal - 'Help sales reps close deals faster' is better than 'improve CRM interface'.","tip":"Use the Jobs-to-be-Done framework to articulate the user's core goal. Ask yourself: What job is the user trying to get done when they use this screen?"},{"step":"Generate the initial design","action":"Paste the completed prompt into Claude Code or your preferred AI assistant. Specify your desired output format (Figma JSON, Adobe XD, or Sketch JSON) if you need machine-readable output for further processing.","tip":"For complex screens, break the design into smaller components first. Design the header separately, then the main content areas, and finally the footer."},{"step":"Refine and validate","action":"Review the generated design against your requirements. Check if all JTBD principles are addressed and if the Dieter Rams principles are properly applied. Use the design notes section to identify any gaps or areas for improvement.","tip":"Create a checklist from the design principles and verify each one is met. For example: 'Is the design as simple as possible?' or 'Does every element serve a clear purpose?'"},{"step":"Iterate with context","action":"Provide additional context about your product's design system, brand guidelines, or specific user research findings. This helps the AI refine the design to better match your existing ecosystem.","tip":"Include examples of designs you like or dislike. For instance: 'Avoid the dashboard style in [LINK], prefer the clean layout of [LINK]'"},{"step":"Export and implement","action":"Use the generated design file (Figma/Adobe XD/Sketch) to create high-fidelity mockups. For development teams, generate the corresponding component library or design tokens.","tip":"Use the spacing unit and color palette values to create a consistent design system that can be reused across multiple screens."}]

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 [SCREEN_TYPE] for [PRODUCT_NAME] following Jobs-to-be-Done (JTBD) principles and Dieter Rams' 10 principles of good design. Focus on [PRIMARY_USER] and their goal of [USER_GOAL]. Use [DESIGN_SYSTEM] components. Include: 1) Wireframe layout, 2) Color palette with hex codes, 3) Typography hierarchy, 4) Micro-interactions for key actions, and 5) Accessibility considerations. Prioritize simplicity, clarity, and functionality. Output in [FORMAT: Figma/Adobe XD/Sketch JSON].

Example Output

{"design_id":"crm-dashboard-v2.3","design_principles_applied":["Jobs-to-be-Done: Help sales reps close deals faster by surfacing critical account insights","Dieter Rams: Good design is as little design as possible - only essential elements remain","Consistency: All interactive elements follow the same visual language","Feedback: Every action provides immediate visual confirmation"],"wireframe":{"layout":"3-column grid with sticky header and footer","sections":[{"name":"Account Overview","elements":["Company logo","Revenue trend chart","Next meeting card","Deal pipeline mini-chart"],"priority":"high"},{"name":"Recent Activity","elements":["Activity feed with timestamps","Collapsible sections by date","Quick action buttons"],"priority":"medium"},{"name":"Quick Actions","elements":["New note button","Schedule meeting CTA","Add contact button"],"priority":"high"}]},"visual_system":{"color_palette":{"primary":"#2563EB","secondary":"#1E40AF","accent":"#06B6D4","background":"#FFFFFF","surface":"#F8FAFC","text":{"primary":"#1E293B","secondary":"#64748B","muted":"#94A3B8"},"status":{"success":"#10B981","warning":"#F59E0B","error":"#EF4444"}},"typography":{"font_family":"Inter","sizes":{"heading_1":"2.25rem","heading_2":"1.875rem","heading_3":"1.5rem","body":"1rem","caption":"0.875rem"},"weights":{"regular":400,"medium":500,"bold":700}},"spacing":{"unit":"8px","scale":[0,4,8,12,16,24,32,48,64]}},"interactions":{"micro_interactions":[{"trigger":"hover on deal card","action":"subtle shadow elevation + slight scale up","duration":"150ms"},{"trigger":"click on deal card","action":"expand to show details + fade in related contacts","duration":"200ms"},{"trigger":"form submission","action":"success toast appears for 3s + subtle confetti animation","duration":"300ms"}],"transitions":{"default":"ease-in-out","duration":"250ms"}},"accessibility":{"contrast_ratios":{"primary_text_on_white":"11.2:1 (WCAG AAA)","secondary_text_on_surface":"6.8:1 (WCAG AA)","interactive_elements":"4.5:1 minimum"},"features":["Keyboard navigation support","Screen reader labels for all interactive elements","Reduced motion option","High contrast mode toggle"]},"design_notes":"The layout prioritizes the most critical information for sales reps: account health indicators and immediate next steps. The color palette uses a cool blue theme to convey trust and professionalism while the accent color (teal) draws attention to important actions. Typography hierarchy ensures scannability at a glance. All interactive elements have a minimum target size of 44x44px for touch targets."}