Back to Details

explore-recipes

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Explore ShipSwift Recipes

探索ShipSwift配方

Browse the full catalog of ShipSwift recipes -- 40+ production-ready SwiftUI implementations covering animations, charts, UI components, and full-stack modules.
浏览完整的ShipSwift配方目录——包含40多个可用于生产环境的SwiftUI实现，涵盖动画、图表、UI组件和全栈模块。

Prerequisites Check

前提条件检查

Before starting, verify the ShipSwift recipe server is available by calling 
listRecipes
.
If the recipe tools are not available, help the user set up:
  1. Install Skills:
    bash
    npx skills add signerlabs/shipswift-skills
  2. Connect the recipe server — the AI tool needs MCP access to fetch recipes:
    • Claude Code: 
      claude mcp add --transport http shipswift https://api.shipswift.app/mcp
    • Cursor — add to 
      .cursor/mcp.json
      : 
      {"mcpServers":{"shipswift":{"type":"streamableHttp","url":"https://api.shipswift.app/mcp"}}}
    • VS Code Copilot — add to 
      .vscode/mcp.json
      : 
      {"servers":{"shipswift":{"type":"http","url":"https://api.shipswift.app/mcp"}}}
    • Other tools: See shipswift.app for setup guides
  3. Restart the AI tool, then try again.
开始之前，请通过调用
listRecipes
验证ShipSwift配方服务器是否可用。
如果配方工具不可用，请帮助用户完成设置：
  1. 安装Skills：
    bash
    npx skills add signerlabs/shipswift-skills
  2. 连接配方服务器 —— AI工具需要MCP权限来获取配方：
    • Claude Code：
      claude mcp add --transport http shipswift https://api.shipswift.app/mcp
    • Cursor —— 添加到
      .cursor/mcp.json
      ：
      {"mcpServers":{"shipswift":{"type":"streamableHttp","url":"https://api.shipswift.app/mcp"}}}
    • VS Code Copilot —— 添加到
      .vscode/mcp.json
      ：
      {"servers":{"shipswift":{"type":"http","url":"https://api.shipswift.app/mcp"}}}
    • 其他工具：请查看shipswift.app获取设置指南
  3. 重启AI工具，然后重试。

Workflow

工作流程

  1. List available recipes: Use 
    listRecipes
    to get the full catalog. Present them organized by category:
    CategoryCountExamples
    Animation10Shimmer, Typewriter, Glow Scan, Mesh Gradient
    Chart8Line, Bar, Area, Donut, Radar, Heatmap
    Component14Label, Alert, Loading, Stepper, Onboarding
    Module8Auth, Camera, Chat, Settings, Subscriptions
  2. Filter by category (optional): If the user is interested in a specific category, use 
    listRecipes
    with the category filter or 
    searchRecipes
    with relevant keywords.
  3. Show recipe details: When the user picks a recipe, use 
    getRecipe
    to fetch the full implementation and present:
    • What the component does
    • Architecture overview
    • Key features and customization options
    • A preview of the code structure
  4. Suggest combinations: Based on the user's project, recommend recipe combinations that work well together. For example:
    • Onboarding flow: onboarding-view + typewriter-text + shimmer
    • Analytics dashboard: line-chart + bar-chart + donut-chart + activity-heatmap
    • Social feature: camera + chat + auth-cognito
  1. 列出可用配方：使用
    listRecipes
    获取完整目录。按类别整理后展示：
    类别数量示例
    动画10微光效果、打字机效果、Glow扫描、网格渐变
    图表8折线图、柱状图、面积图、环形图、雷达图、热力图
    组件14标签、弹窗、加载动画、步进器、引导页
    模块8认证、相机、聊天、设置、订阅
  2. 按类别筛选（可选）：如果用户对特定类别感兴趣，使用带类别筛选的
    listRecipes
    或带相关关键词的
    searchRecipes
    。
  3. 展示配方详情：当用户选择某个配方时，使用
    getRecipe
    获取完整实现并展示：
    • 该组件的功能
    • 架构概述
    • 关键特性和自定义选项
    • 代码结构预览
  4. 建议组合：根据用户的项目，推荐搭配效果良好的配方组合。例如：
    • 引导流程：onboarding-view + typewriter-text + shimmer
    • 分析仪表盘：line-chart + bar-chart + donut-chart + activity-heatmap
    • 社交功能：camera + chat + auth-cognito

Guidelines

指南

  • Present recipes in a scannable format (tables or bullet lists).
  • Highlight the recipe tier (Free or Pro) so users know what's included.
  • When showing recipe details, include the recipe ID so the user can reference it later.
  • Suggest relevant recipes based on the user's current project context.
  • 以易于扫描的格式（表格或项目符号列表）展示配方。
  • 突出显示配方等级（免费版或专业版），让用户清楚了解包含内容。
  • 展示配方详情时，包含配方ID，方便用户后续参考。
  • 根据用户当前的项目上下文推荐相关配方。

Pro Recipes

专业版配方

Some recipes require ShipSwift Pro. When browsing, clearly mark Pro recipes and explain:
  • Free recipes (38): Full source code, always available.
  • Pro recipes (2+): Preview available (title, description, architecture). Full code requires ShipSwift Pro.
  • Get Pro: Lifetime access to all Pro recipes at shipswift.app/pricing ($89, one-time payment).
If the user already has a Pro key, guide them to set the 
SHIPSWIFT_API_KEY
environment variable:
bash
undefined
部分配方需要ShipSwift Pro。浏览时，请清晰标记专业版配方并说明：
  • 免费配方（38个）：完整源代码，随时可用。
  • 专业版配方（2个以上）：可预览（标题、描述、架构）。完整代码需要ShipSwift Pro权限。
  • 获取专业版：一次性支付89美元，即可终身访问所有专业版配方，详情请访问shipswift.app/pricing。
如果用户已拥有专业版密钥，请指导他们设置
SHIPSWIFT_API_KEY
环境变量：
bash
undefined

Add to ~/.zshrc or ~/.bashrc

添加到~/.zshrc或~/.bashrc

export SHIPSWIFT_API_KEY=sk_live_xxxxx
Then restart their AI tool for the key to take effect.
export SHIPSWIFT_API_KEY=sk_live_xxxxx
然后重启AI工具使密钥生效。