product-designer

仓库: borghei/claude-skills
安装量: 2.2K
排名: #834

安装

npx skills add https://github.com/borghei/claude-skills --skill product-designer

Product Designer

Expert-level product design for digital products.

Core Competencies User experience design User interface design Design systems Prototyping User research Interaction design Visual design Design thinking Design Process Double Diamond ┌─────────────────────────────────────────────────────────────┐ │ DISCOVER │ │ Diverge: Research, explore, understand the problem │ └──────────────────────────┬──────────────────────────────────┘ │ ┌──────────────────────────▼──────────────────────────────────┐ │ DEFINE │ │ Converge: Synthesize, insights, problem statement │ └──────────────────────────┬──────────────────────────────────┘ │ ┌──────────────────────────▼──────────────────────────────────┐ │ DEVELOP │ │ Diverge: Ideate, prototype, test solutions │ └──────────────────────────┬──────────────────────────────────┘ │ ┌──────────────────────────▼──────────────────────────────────┐ │ DELIVER │ │ Converge: Refine, build, launch │ └─────────────────────────────────────────────────────────────┘

Design Sprint (5 Days) Day Activity Output Monday Map & Target Challenge map, interview experts Tuesday Sketch Solution sketches, crazy 8s Wednesday Decide Storyboard, testable hypothesis Thursday Prototype Realistic prototype Friday Test User feedback, learnings UX Design User Journey Mapping PERSONA: [Name, role, goals]

JOURNEY: [Process being mapped]

┌─────────┬────────────┬────────────┬────────────┬────────────┐ │ STAGE │ AWARENESS │ CONSIDER │ PURCHASE │ RETENTION │ ├─────────┼────────────┼────────────┼────────────┼────────────┤ │ Actions │ Searches │ Compares │ Checks out │ Uses │ │ │ for │ options │ Pays │ regularly │ │ │ solution │ │ │ │ ├─────────┼────────────┼────────────┼────────────┼────────────┤ │ Touch- │ Google │ Website │ Checkout │ App │ │ points │ Social │ Reviews │ Email │ Support │ ├─────────┼────────────┼────────────┼────────────┼────────────┤ │ Emotions│ 😟 Confused │ 🤔 Curious │ 😰 Anxious │ 😊 Happy │ ├─────────┼────────────┼────────────┼────────────┼────────────┤ │ Pain │ Too many │ Hard to │ Complex │ Missing │ │ Points │ options │ compare │ forms │ features │ ├─────────┼────────────┼────────────┼────────────┼────────────┤ │ Opport- │ SEO │ Comparison │ Streamline │ Onboard │ │ unities │ content │ tools │ checkout │ tutorials │ └─────────┴────────────┴────────────┴────────────┴────────────┘

Information Architecture

Card Sorting:

Open Sort: Users create categories Closed Sort: Users place items in predefined categories Hybrid: Combination of both

Analysis: - Similarity matrix - Dendrograms - Category labels

Site Map:

Home ├── Products │ ├── Category A │ │ ├── Product 1 │ │ └── Product 2 │ └── Category B ├── About │ ├── Team │ └── Careers ├── Resources │ ├── Blog │ └── Help Center └── Account ├── Profile └── Settings

Wireframing

Low-Fidelity:

┌─────────────────────────────────────┐ │ [Logo] [Nav] [Nav] [Nav] │ ├─────────────────────────────────────┤ │ │ │ ┌─────────────────────────────┐ │ │ │ │ │ │ │ Hero Image │ │ │ │ │ │ │ └─────────────────────────────┘ │ │ │ │ [Headline Text Here] │ │ [Supporting text goes here] │ │ │ │ ┌───────┐ ┌───────┐ ┌───────┐ │ │ │ Card │ │ Card │ │ Card │ │ │ │ │ │ │ │ │ │ │ └───────┘ └───────┘ └───────┘ │ │ │ └─────────────────────────────────────┘

UI Design Design Principles

  1. Hierarchy

Visual weight guides attention Size, color, contrast indicate importance Group related elements

  1. Consistency

Reuse patterns and components Maintain visual rhythm Predictable interactions

  1. Feedback

Acknowledge user actions Show system status Indicate loading states

  1. Accessibility

Color contrast (4.5:1 minimum) Focus indicators Screen reader support Color System / Primary Colors / --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8;

/ Neutral Colors / --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-500: #6b7280; --color-gray-900: #111827;

/ Semantic Colors / --color-success: #10b981; --color-warning: #f59e0b; --color-error: #ef4444; --color-info: #3b82f6;

Typography Scale / Font Sizes / --text-xs: 0.75rem; / 12px / --text-sm: 0.875rem; / 14px / --text-base: 1rem; / 16px / --text-lg: 1.125rem; / 18px / --text-xl: 1.25rem; / 20px / --text-2xl: 1.5rem; / 24px / --text-3xl: 1.875rem; / 30px / --text-4xl: 2.25rem; / 36px /

/ Line Heights / --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75;

Spacing System / 4px base unit / --space-1: 0.25rem; / 4px / --space-2: 0.5rem; / 8px / --space-3: 0.75rem; / 12px / --space-4: 1rem; / 16px / --space-5: 1.25rem; / 20px / --space-6: 1.5rem; / 24px / --space-8: 2rem; / 32px / --space-10: 2.5rem; / 40px / --space-12: 3rem; / 48px / --space-16: 4rem; / 64px /

Design Systems Component Structure Button/ ├── Variants │ ├── Primary │ ├── Secondary │ ├── Tertiary │ └── Destructive ├── Sizes │ ├── Small │ ├── Medium │ └── Large ├── States │ ├── Default │ ├── Hover │ ├── Active │ ├── Focus │ ├── Disabled │ └── Loading └── Anatomy ├── Label ├── Icon (optional) └── Container

Component Documentation

Button

Buttons trigger actions or navigation.

Usage

  • Use primary buttons for main actions
  • Use secondary for supporting actions
  • Use tertiary for low-emphasis actions
  • Use destructive for irreversible actions

Do's

  • Use clear, action-oriented labels
  • Keep labels concise (1-3 words)
  • Use icons to reinforce meaning

Don'ts

  • Don't use multiple primary buttons
  • Don't use vague labels like "Click here"
  • Don't disable without explanation

Accessibility

  • Minimum touch target: 44x44px
  • Include focus state
  • Use aria-label for icon-only buttons

Design Tokens { "color": { "primary": { "50": {"value": "#eff6ff"}, "500": {"value": "#3b82f6"}, "600": {"value": "#2563eb"} }, "semantic": { "success": {"value": "{color.green.500}"}, "error": {"value": "{color.red.500}"} } }, "spacing": { "xs": {"value": "4px"}, "sm": {"value": "8px"}, "md": {"value": "16px"}, "lg": {"value": "24px"} }, "borderRadius": { "sm": {"value": "4px"}, "md": {"value": "8px"}, "lg": {"value": "12px"}, "full": {"value": "9999px"} } }

Prototyping Prototype Fidelity Fidelity Purpose Tools Time Paper Quick exploration Paper, pen Minutes Low-Fi Flow validation Figma, Sketch Hours Mid-Fi Usability testing Figma Days High-Fi Dev handoff, final testing Figma Days-Weeks Interaction Patterns

Navigation:

Tabs Drawers Breadcrumbs Bottom navigation

Data Entry:

Form fields Dropdowns Date pickers File uploads

Feedback:

Toasts Modals Inline validation Progress indicators Usability Testing Test Plan

Usability Test Plan

Objectives

  • Validate new checkout flow
  • Identify usability issues

Participants

  • 5-8 users
  • Mix of new and existing users

Tasks

  1. Find and add product to cart
  2. Complete checkout process
  3. Modify order

Metrics

  • Task completion rate
  • Time on task
  • Error rate
  • SUS score

Materials

  • Prototype link
  • Task script
  • Recording consent
  • Compensation

Task Script Task 1: Find a product

"Imagine you're looking for a new laptop. Please find a laptop that meets your needs and add it to your cart. Think aloud as you go."

Success Criteria: - [ ] Navigated to products - [ ] Used filters/search - [ ] Added to cart

Observations: - [Notes]

Time: [Duration]

Reference Materials references/design_principles.md - Core design principles references/component_library.md - Component guidelines references/accessibility.md - Accessibility checklist references/research_methods.md - Research techniques Scripts

Design token generator

python scripts/token_generator.py --source tokens.json --output css/

Accessibility checker

python scripts/a11y_checker.py --url https://example.com

Asset exporter

python scripts/asset_export.py --figma-file FILE_ID --format svg,png

Design QA report

python scripts/design_qa.py --spec spec.figma --impl https://staging.example.com

← 返回排行榜