product-designer by borghei/claude-skills
npx skills add https://github.com/borghei/claude-skills --skill product-designer该智能体作为资深产品设计师运作,提供以用户为中心的设计解决方案,涵盖用户体验研究、用户界面设计、设计系统、原型设计和可用性测试。
| 天数 | 活动 | 产出 |
|---|---|---|
| 周一 | 映射问题,访谈专家 | 挑战地图,目标领域 |
| 周二 | 构思解决方案,疯狂8分钟 | 解决方案草图 |
| 周三 | 决策,故事板 | 可测试的假设 |
| 周四 | 构建原型 | 逼真的可点击原型 |
| 周五 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 与5名用户测试 |
| 已验证/未验证的假设 |
PERSONA: Sarah, Product Manager, goal: find analytics insights fast
STAGE: AWARENESS CONSIDER PURCHASE ONBOARD RETAIN
Actions: Searches Compares Signs up Configures Uses daily
Touchpoint: Google Website Checkout Setup wizard App
Emotion: Frustrated Curious Anxious Hopeful Satisfied
Pain point: Too many Hard to Complex Slow setup Missing
options compare pricing features
Opportunity: SEO content Comparison Simplify Quick-start Feature
tool flow template education
卡片分类方法:
示例网站地图:
Home
+-- Products
| +-- Category A
| | +-- Product 1
| | +-- Product 2
| +-- Category B
+-- About
| +-- Team
| +-- Careers
+-- Resources
| +-- Blog
| +-- Help Center
+-- Account
+-- Profile
+-- Settings
/* Color tokens */
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-gray-50: #f9fafb;
--color-gray-900: #111827;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
/* Typography scale */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
/* Spacing (4px base unit) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
Button/
+-- Variants: Primary, Secondary, Tertiary, Destructive
+-- Sizes: Small (32px), Medium (40px), Large (48px)
+-- States: Default, Hover, Active, Focus, Disabled, Loading
+-- Anatomy: [Leading Icon] Label [Trailing Icon]
{
"color": {
"primary": {"50": {"value": "#eff6ff"}, "500": {"value": "#3b82f6"}},
"semantic": {"success": {"value": "{color.green.500}"}, "error": {"value": "{color.red.500}"}}
},
"spacing": {"xs": {"value": "4px"}, "sm": {"value": "8px"}, "md": {"value": "16px"}},
"borderRadius": {"sm": {"value": "4px"}, "md": {"value": "8px"}, "full": {"value": "9999px"}}
}
# Usability Test: New Checkout Flow
## Objectives
- Validate that users can complete purchase in < 3 minutes
- Identify friction points in address and payment steps
## Participants
- 6 users (3 new, 3 returning)
- Mix of desktop and mobile
## Tasks
1. "Find a laptop under $1,000 and add it to your cart" (browse + add)
2. "Complete the purchase using a credit card" (checkout flow)
3. "Change the shipping address on your order" (post-purchase edit)
## Success Criteria
| Task | Completion Target | Time Target |
|------|-------------------|-------------|
| Browse + Add | 100% | < 60s |
| Checkout | 90%+ | < 180s |
| Edit address | 80%+ | < 90s |
## Metrics
- Task completion rate
- Time on task
- Error count per task
- System Usability Scale (SUS) score (target: 68+)
| 保真度 | 目的 | 工具 | 时间线 |
|---|---|---|---|
| 纸质 | 快速探索 | 纸、笔 | 分钟级 |
| 低保真 | 流程验证 | Figma, Sketch | 小时级 |
| 中保真 | 可用性测试 | Figma | 天级 |
| 高保真 | 开发交接、最终测试 | Figma | 天至周级 |
# 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
references/design_principles.md - 核心设计原则references/component_library.md - 组件指南references/accessibility.md - 可访问性检查清单references/research_methods.md - 研究技术根据尼尔森十大可用性原则和可访问性标准评估用户界面设计。生成结构化的评估报告,包含严重性评级、合规性得分和优先改进建议。
| 标志 | 类型 | 默认值 | 描述 |
|---|---|---|---|
--checklist | flag | - | 生成用于评估的空白检查清单 |
--answers | string | - | 已完成的检查清单 JSON 文件路径 |
--json | flag | False | 以 JSON 格式输出 |
python scripts/design_critique.py --checklist
python scripts/design_critique.py --checklist --json > checklist.json
python scripts/design_critique.py --answers completed_checklist.json
python scripts/design_critique.py --answers completed_checklist.json --json
创建结构化的用户旅程图,包含情感曲线、痛点识别和机会分析。包含针对 SaaS、电子商务和移动应用旅程的预构建模板。
| 标志 | 类型 | 默认值 | 描述 |
|---|---|---|---|
--template, -t | choice | - | 预构建模板:saas, ecommerce, mobile_app |
--stages, -s | string | - | 自定义阶段 JSON 文件路径 |
--json | flag | False | 以 JSON 格式输出 |
python scripts/journey_mapper.py --template saas
python scripts/journey_mapper.py --template ecommerce --json
python scripts/journey_mapper.py --stages custom_journey.json
根据可用性测试数据计算系统可用性量表得分和任务性能指标。提供个体和聚合分析,包含等级解释和基准比较。
| 标志 | 类型 | 默认值 | 描述 |
|---|---|---|---|
action | positional | - | "sample" 用于创建示例 CSV 文件 |
--sus-responses | string | - | 包含 SUS 回复的 CSV(参与者,q1-q10) |
--task-data | string | - | 包含任务数据的 CSV(参与者,任务,完成情况,time_seconds,errors) |
--json | flag | False | 以 JSON 格式输出 |
python scripts/usability_scorer.py sample
python scripts/usability_scorer.py --sus-responses responses.csv
python scripts/usability_scorer.py --task-data tasks.csv
python scripts/usability_scorer.py --sus-responses responses.csv --task-data tasks.csv --json
| 问题 | 原因 | 解决方案 |
|---|---|---|
| SUS 得分低于 68(基准) | 严重的可用性问题 | 首先关注来自 design_critique 的关键严重性发现 |
| 任务完成率低(<80%) | 任务流程过于复杂或不清晰 | 简化流程;添加渐进式披露;减少步骤 |
| 用户找不到功能 | 信息架构不佳 | 进行卡片分类;重新设计导航;添加搜索 |
| 表单错误率高 | 验证和引导不足 | 添加内联验证、智能默认值和上下文帮助 |
| 跨屏幕设计不一致 | 缺少或被忽视的设计系统 | 使用 design_critique 进行审计;强制执行令牌使用 |
| 可用性测试参与者不具代表性 | 招募标准不佳 | 筛选目标用户画像匹配度;混合新用户和回头客 |
| 旅程图情感曲线平淡 | 研究数据不足 | 进行更深入的访谈;观察真实使用场景 |
| 标准 | 目标 | 如何衡量 |
|---|---|---|
| SUS 得分 | >68(行业平均),目标 >80 | usability_scorer 聚合得分 |
| 任务完成率 | 核心流程 >85% | usability_scorer 任务指标 |
| 任务耗时 | < 预期时长的 2 倍 | usability_scorer avg_time_seconds |
| 设计评估合规性 | >80% 检查清单通过率 | design_critique compliance_score |
| 可访问性合规性 | 所有屏幕符合 WCAG AA 标准 | design_critique 可访问性部分 |
| 旅程图覆盖范围 | 所有关键用户画像均已映射 | 已完成的旅程图数量 |
| 可用性测试频率 | 每个冲刺或发布都进行测试 | 每季度测试次数 |
范围内:
范围外:
| 工具 / 平台 | 集成方法 | 使用场景 |
|---|---|---|
| Figma | 将旅程图和评估结果作为设计规范 | 将研究转化为设计变更 |
| Maze / UserTesting | 导出任务数据 CSV 供 usability_scorer 使用 | 对远程测试平台的测试结果进行评分 |
| Dovetail / Condens | 导出访谈主题供 journey_mapper 使用 | 从研究资料库构建旅程图 |
| Jira / Linear | 将 design_critique JSON 优先级作为工单 | 在冲刺待办事项中跟踪可用性改进 |
| Notion / Confluence | 所有工具的人类可读输出 | 记录研究发现和设计决策 |
| Miro / FigJam | journey_mapper JSON 输出 | 协作式旅程图研讨会 |
每周安装量
2.4K
仓库
GitHub 星标数
53
首次出现
Jan 24, 2026
安全审计
安装于
opencode2.1K
gemini-cli2.1K
codex2.1K
github-copilot2.1K
kimi-cli2.0K
amp2.0K
The agent operates as a senior product designer, delivering user-centered design solutions spanning UX research, UI design, design systems, prototyping, and usability testing.
| Day | Activity | Output |
|---|---|---|
| Monday | Map problem, interview experts | Challenge map, target area |
| Tuesday | Sketch solutions, Crazy 8s | Solution sketches |
| Wednesday | Decide, storyboard | Testable hypothesis |
| Thursday | Build prototype | Realistic clickable prototype |
| Friday | Test with 5 users | Validated/invalidated hypothesis |
PERSONA: Sarah, Product Manager, goal: find analytics insights fast
STAGE: AWARENESS CONSIDER PURCHASE ONBOARD RETAIN
Actions: Searches Compares Signs up Configures Uses daily
Touchpoint: Google Website Checkout Setup wizard App
Emotion: Frustrated Curious Anxious Hopeful Satisfied
Pain point: Too many Hard to Complex Slow setup Missing
options compare pricing features
Opportunity: SEO content Comparison Simplify Quick-start Feature
tool flow template education
Card Sorting Methods:
Example Site Map:
Home
+-- Products
| +-- Category A
| | +-- Product 1
| | +-- Product 2
| +-- Category B
+-- About
| +-- Team
| +-- Careers
+-- Resources
| +-- Blog
| +-- Help Center
+-- Account
+-- Profile
+-- Settings
/* Color tokens */
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-gray-50: #f9fafb;
--color-gray-900: #111827;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
/* Typography scale */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
/* Spacing (4px base unit) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
Button/
+-- Variants: Primary, Secondary, Tertiary, Destructive
+-- Sizes: Small (32px), Medium (40px), Large (48px)
+-- States: Default, Hover, Active, Focus, Disabled, Loading
+-- Anatomy: [Leading Icon] Label [Trailing Icon]
{
"color": {
"primary": {"50": {"value": "#eff6ff"}, "500": {"value": "#3b82f6"}},
"semantic": {"success": {"value": "{color.green.500}"}, "error": {"value": "{color.red.500}"}}
},
"spacing": {"xs": {"value": "4px"}, "sm": {"value": "8px"}, "md": {"value": "16px"}},
"borderRadius": {"sm": {"value": "4px"}, "md": {"value": "8px"}, "full": {"value": "9999px"}}
}
# Usability Test: New Checkout Flow
## Objectives
- Validate that users can complete purchase in < 3 minutes
- Identify friction points in address and payment steps
## Participants
- 6 users (3 new, 3 returning)
- Mix of desktop and mobile
## Tasks
1. "Find a laptop under $1,000 and add it to your cart" (browse + add)
2. "Complete the purchase using a credit card" (checkout flow)
3. "Change the shipping address on your order" (post-purchase edit)
## Success Criteria
| Task | Completion Target | Time Target |
|------|-------------------|-------------|
| Browse + Add | 100% | < 60s |
| Checkout | 90%+ | < 180s |
| Edit address | 80%+ | < 90s |
## Metrics
- Task completion rate
- Time on task
- Error count per task
- System Usability Scale (SUS) score (target: 68+)
| Fidelity | Purpose | Tools | Timeline |
|---|---|---|---|
| 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 |
# 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
references/design_principles.md - Core design principlesreferences/component_library.md - Component guidelinesreferences/accessibility.md - Accessibility checklistreferences/research_methods.md - Research techniquesEvaluates a UI design against Nielsen's 10 Usability Heuristics and accessibility standards. Generates a structured critique report with severity ratings, compliance scores, and prioritized improvement recommendations.
| Flag | Type | Default | Description |
|---|---|---|---|
--checklist | flag | - | Generate empty checklist for evaluation |
--answers | string | - | Path to completed checklist JSON file |
--json | flag | False | Output as JSON |
python scripts/design_critique.py --checklist
python scripts/design_critique.py --checklist --json > checklist.json
python scripts/design_critique.py --answers completed_checklist.json
python scripts/design_critique.py --answers completed_checklist.json --json
Creates structured user journey maps with emotion curves, pain point identification, and opportunity analysis. Includes pre-built templates for SaaS, e-commerce, and mobile app journeys.
| Flag | Type | Default | Description |
|---|---|---|---|
--template, -t | choice | - | Pre-built template: saas, ecommerce, mobile_app |
--stages, -s | string | - | Path to custom stages JSON file |
python scripts/journey_mapper.py --template saas
python scripts/journey_mapper.py --template ecommerce --json
python scripts/journey_mapper.py --stages custom_journey.json
Calculates System Usability Scale (SUS) scores and task performance metrics from usability test data. Provides individual and aggregate analysis with grade interpretation and benchmarking.
| Flag | Type | Default | Description |
|---|---|---|---|
action | positional | - | "sample" to create sample CSV files |
--sus-responses | string | - | CSV with SUS responses (participant, q1-q10) |
--task-data | string | - | CSV with task data (participant, task, completed, time_seconds, errors) |
--json | flag | False | Output as JSON |
python scripts/usability_scorer.py sample
python scripts/usability_scorer.py --sus-responses responses.csv
python scripts/usability_scorer.py --task-data tasks.csv
python scripts/usability_scorer.py --sus-responses responses.csv --task-data tasks.csv --json
| Problem | Cause | Solution |
|---|---|---|
| SUS score below 68 (benchmark) | Significant usability issues | Focus on critical severity findings from design_critique first |
| Low task completion rate (<80%) | Task flow too complex or unclear | Simplify flow; add progressive disclosure; reduce steps |
| Users cannot find features | Poor information architecture | Conduct card sorting; redesign navigation; add search |
| High error rate on forms | Insufficient validation and guidance | Add inline validation, smart defaults, and contextual help |
| Inconsistent design across screens | Missing or ignored design system | Audit with design_critique; enforce token usage |
| Usability test participants are unrepresentative | Poor recruitment criteria | Screen for target persona match; mix new and returning users |
| Journey map emotions are flat | Insufficient research data | Conduct deeper interviews; observe real usage sessions |
| Criterion | Target | How to Measure |
|---|---|---|
| SUS score | >68 (industry average), target >80 | usability_scorer aggregate score |
| Task completion rate | >85% for core flows | usability_scorer task metrics |
| Time on task | <2x expected duration | usability_scorer avg_time_seconds |
| Design critique compliance | >80% checklist pass rate | design_critique compliance_score |
| Accessibility compliance | WCAG AA on all screens | design_critique accessibility section |
| Journey map coverage | All key personas mapped | Count of completed journey maps |
| Usability test cadence | Test every sprint or release | Count of tests per quarter |
In scope:
Out of scope:
| Tool / Platform | Integration Method | Use Case |
|---|---|---|
| Figma | Journey map and critique findings as design specs | Translate research into design changes |
| Maze / UserTesting | Export task data CSV for usability_scorer | Score test results from remote testing platforms |
| Dovetail / Condens | Export interview themes for journey_mapper | Build journey maps from research repositories |
| Jira / Linear | design_critique JSON priorities as tickets | Track usability improvements in sprint backlog |
| Notion / Confluence | Human-readable output from all tools | Document research findings and design decisions |
| Miro / FigJam | journey_mapper JSON output | Collaborative journey map workshops |
Weekly Installs
2.4K
Repository
GitHub Stars
53
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode2.1K
gemini-cli2.1K
codex2.1K
github-copilot2.1K
kimi-cli2.0K
amp2.0K
Python PDF处理教程:合并拆分、提取文本表格、创建PDF文件
52,000 周安装
App Store Connect 提交健康检查指南 - 减少审核失败,监控应用状态
1,200 周安装
Xcode构建与导出指南:使用asc-xcode-build自动化iOS/macOS应用上传App Store
1,200 周安装
AI事实核查工具 - 专业级信息验证助手 | 识别虚假信息,评估证据可信度
1,200 周安装
i18n国际化与本地化最佳实践指南:React、Next.js、Python多语言开发
1,200 周安装
Nest.js专家:企业级Node.js应用架构、依赖注入、测试与数据库集成解决方案
1,200 周安装
2025 Node.js 最佳实践指南:框架选择、架构原则与错误处理
1,200 周安装
--json | flag | False | Output as JSON |