Back to Details

dribbble

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Dribbble Skill

Dribbble Skill

Overview

概述

Enables Claude to interact with Dribbble for design inspiration, portfolio management, and designer discovery including browsing shots, saving collections, and managing design uploads.
让Claude能够与Dribbble交互，实现设计灵感获取、作品集管理和设计师挖掘功能，包括浏览设计作品、保存收藏集以及管理设计上传。

Quick Install

快速安装

bash
curl -sSL https://canifi.com/skills/dribbble/install.sh | bash
Or manually:
bash
cp -r skills/dribbble ~/.canifi/skills/
bash
curl -sSL https://canifi.com/skills/dribbble/install.sh | bash
或手动安装：
bash
cp -r skills/dribbble ~/.canifi/skills/

Setup

设置

Configure via canifi-env:
bash
undefined
通过canifi-env进行配置：
bash
undefined

First, ensure canifi-env is installed:

首先，确保已安装canifi-env：

curl -sSL https://canifi.com/install.sh | bash

curl -sSL https://canifi.com/install.sh | bash

canifi-env set DRIBBBLE_EMAIL "your-email@example.com" canifi-env set DRIBBBLE_PASSWORD "your-password"
undefined
canifi-env set DRIBBBLE_EMAIL "your-email@example.com" canifi-env set DRIBBBLE_PASSWORD "your-password"
undefined

Privacy & Authentication

隐私与认证

Your credentials, your choice. Canifi LifeOS respects your privacy.
你的凭据，由你掌控。 Canifi LifeOS 尊重你的隐私。

Option 1: Manual Browser Login (Recommended)

选项1：手动浏览器登录（推荐）

If you prefer not to share credentials with Claude Code:
  1. Complete the Browser Automation Setup using CDP mode
  2. Login to the service manually in the Playwright-controlled Chrome window
  3. Claude will use your authenticated session without ever seeing your password
如果你不想与Claude Code共享凭据：
  1. 使用CDP模式完成浏览器自动化设置
  2. 在Playwright控制的Chrome窗口中手动登录该服务
  3. Claude将使用你的已认证会话，且永远不会看到你的密码

Option 2: Environment Variables

选项2：环境变量

If you're comfortable sharing credentials, you can store them locally:
bash
canifi-env set SERVICE_EMAIL "your-email"
canifi-env set SERVICE_PASSWORD "your-password"
Note: Credentials stored in canifi-env are only accessible locally on your machine and are never transmitted.
如果你愿意共享凭据，可以将其存储在本地：
bash
canifi-env set SERVICE_EMAIL "your-email"
canifi-env set SERVICE_PASSWORD "your-password"
注意：存储在canifi-env中的凭据仅可在你的本地机器上访问，绝不会被传输。

Capabilities

功能

  • Browse and search design shots
  • Save designs to collections/buckets
  • View designer profiles and portfolios
  • Manage uploaded shots and projects
  • Follow designers and teams
  • Search for design jobs and freelance work
  • 浏览和搜索设计作品
  • 将设计保存到收藏集/分类
  • 查看设计师个人资料和作品集
  • 管理已上传的作品和项目
  • 关注设计师和团队
  • 搜索设计工作和自由职业机会

Usage Examples

使用示例

Example 1: Find Design Inspiration

示例1：寻找设计灵感

User: "Find mobile app UI inspiration for a fitness app"
Claude: I'll search for fitness app designs on Dribbble.
1. Opening Dribbble via Playwright MCP
2. Searching for "fitness app mobile UI"
3. Browsing top-rated shots
4. Saving relevant designs to a collection
5. Compiling inspiration summary with links
用户："为健身应用寻找移动端UI设计灵感"
Claude：我将在Dribbble上搜索健身应用设计。
1. 通过Playwright MCP打开Dribbble
2. 搜索“fitness app mobile UI”
3. 浏览高评分作品
4. 将相关设计保存到收藏集
5. 整理包含链接的灵感汇总

Example 2: Review Portfolio

示例2：查看作品集分析

User: "Show me my Dribbble portfolio analytics"
Claude: I'll pull up your portfolio stats.
1. Navigating to your Dribbble profile
2. Accessing shot analytics
3. Reviewing views, likes, and saves
4. Summarizing performance trends
用户："展示我的Dribbble作品集分析数据"
Claude：我将提取你的作品集统计信息。
1. 导航到你的Dribbble个人资料
2. 访问作品分析数据
3. 查看浏览量、点赞数和收藏数
4. 总结表现趋势

Example 3: Find Designers

示例3：寻找设计师

User: "Find UI designers available for freelance work"
Claude: I'll search for available designers.
1. Accessing Dribbble Pro/Hiring section
2. Filtering for UI designers
3. Filtering by availability status
4. Compiling list of potential candidates
用户："寻找可承接自由职业的UI设计师"
Claude：我将搜索符合条件的设计师。
1. 访问Dribbble Pro/招聘板块
2. 筛选UI设计师
3. 按可用状态筛选
4. 整理潜在候选人列表

Authentication Flow

认证流程

  1. Navigate to dribbble.com via Playwright MCP
  2. Click "Sign in" and enter credentials
  3. Handle 2FA if enabled (via iMessage)
  4. Maintain session cookies
  5. Handle Pro features if subscribed
  1. 通过Playwright MCP导航到dribbble.com
  2. 点击“登录”并输入凭据
  3. 若启用两步验证则进行处理（通过iMessage）
  4. 维护会话Cookie
  5. 若订阅了Pro服务则处理相关功能

Error Handling

错误处理

  • Login Failed: Retry up to 3 times, notify via iMessage
  • Session Expired: Re-authenticate automatically
  • Rate Limited: Implement backoff for API-like actions
  • 2FA Required: Send iMessage notification
  • Search Failed: Try alternative search terms
  • Profile Not Found: Verify username or prompt user
  • 登录失败：最多重试3次，通过iMessage通知
  • 会话过期：自动重新认证
  • 请求受限：对类API操作实现退避机制
  • 需要两步验证：发送iMessage通知
  • 搜索失败：尝试替代搜索关键词
  • 未找到个人资料：验证用户名或提示用户

Self-Improvement Instructions

自我更新说明

When Dribbble updates features:
  1. Document new search filters and options
  2. Update navigation patterns for shots
  3. Track any changes to profile layouts
  4. Log new portfolio features
当Dribbble更新功能时：
  1. 记录新的搜索筛选器和选项
  2. 更新作品的导航模式
  3. 跟踪个人资料布局的任何变化
  4. 记录新的作品集功能

Notes

注意事项

  • Pro features require Dribbble Pro subscription
  • Shot uploads have quality and format requirements
  • Hiring features may have additional verification
  • Collection limits vary by account type
  • Some features are member-only
  • Pro功能需要订阅Dribbble Pro服务
  • 作品上传有质量和格式要求
  • 招聘功能可能需要额外验证
  • 收藏集限制因账户类型而异
  • 部分功能仅对会员开放