AI导哈

设计项目管理扩展

连接Qwen CLI和Stitch MCP服务器的扩展，通过自然语言管理设计项目，优化UI/UX设计工作流程。

  • by Dream-Pixels-Forge
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 Dream-Pixels-Forge/protosigner

使用说明

Qwen CLI的原型签名扩展

Protonsigner扩展将Qwen CLI和Stitch MCP（模型上下文协议）服务器连接起来，允许您使用自然语言管理设计项目。通过直接从终端控制资产和代码生成，简化Stitch（谷歌的AI驱动的UI/UX工具）中的工作流程。

✨ 特性

  • 🎨 列出项目： 查看您的Stitch项目列表。
  • 🎨 项目详情： 获取特定项目的详细信息。
  • 🎨 检索屏幕： 访问给定项目中的所有屏幕。
  • 🎨 下载资产： 下载图片和HTML文件等资源。
  • 🎨 从文本生成屏幕： 使用Gemini 3 Pro或Gemini 3 Flash（默认）型号从文本提示生成新屏幕。
  • 🎨 更多功能即将推出。..

📋 先决条件

在使用此扩展程序之前，请确保已安装以下内容：

  1. Qwen CLI：

    • 安装Qwen命令行界面

    • 参见 Qwen CLI文档 有关安装说明。

  2. gcloud命令行界面：

    • 安装并初始化 gcloud命令行界面.
    • 确保你有一个谷歌云项目可以与Stitch一起使用。

🚀 安装

在终端中运行以下命令以安装Stitch扩展：

qwen extensions install https://github.com/Dream-Pixels-Forge/protosigner --auto-update

🔐 配置和身份验证

要使用Stitch扩展，您需要配置身份验证。Stitch MCP服务器支持两种身份验证方法：

  • API密钥验证：设置更简单。使用由谷歌云管理项目提供支持的Stitch设置生成的API密钥。非常适合个人使用和快速设置。
  • 应用程序默认凭据（ADC）：使用Google Cloud凭据进行身份验证。需要您自己的具有适当IAM权限的Google Cloud项目，需要多个手动步骤进行设置。

根据您的需求选择以下一种方法。

1.使用Auth API密钥进行身份验证

  1. 获取API密钥：

    • 首选 史迪奇.
    • 点击右上角的个人资料图标。
    • 从下拉菜单中选择“缝合设置”。
    • 请转至“API密钥”部分。
    • 点击“创建密钥”。
    • 复制生成的API密钥。

  2. 配置扩展： 运行以下命令以配置API密钥（替换 your-api-key-here 使用您的实际API密钥）：

    export API_KEY="your-api-key-here"
sed "s/YOUR_API_KEY/$API_KEY/g" ~/.qwen/extensions/protosigner/gemini-extension-apikey.json > ~/.qwen/extensions/protosigner/gemini-extension.json

2.使用应用程序默认凭据（ADC）进行身份验证

  1. 登录gcloud：

    gcloud auth login

  2. 配置项目和配额： 设置项目ID变量并配置项目。替换 your-project-id 使用您的实际Google Cloud项目ID。

    export PROJECT_ID="your-project-id"
gcloud config set project $PROJECT_ID
gcloud auth application-default set-quota-project $PROJECT_ID

  3. 启用缝合MCP API： 在您的项目上启用Stitch MCP服务。

    gcloud beta services mcp enable stitch.googleapis.com --project=$PROJECT_ID

  4. 授予权限： 您的帐户需要 roles/serviceusage.serviceUsageConsumer 角色。

    gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member="user:your-email@gmail.com" \
  --role="roles/serviceusage.serviceUsageConsumer"

  5. 登录ADC：

    gcloud auth application-default login

  6. 配置扩展： 运行以下命令，使用您的项目ID更新配置文件：

    sed "s/YOUR_PROJECT_ID/$PROJECT_ID/g" ~/.qwen/extensions/protosigner/gemini-extension-adc.json > ~/.qwen/extensions/protosigner/gemini-extension.json

💡 用法

  1. 启动Qwen CLI： 启动Qwen命令行界面 启用Stitch扩展后：

    qwen

  2. 列出可用工具： 要查看所有可用的MCP工具，包括来自Stitch的工具，请使用：

    /mcp list

/mcp desc

  3. 与Stitch互动： 使用 /stitch 用于发送自然语言请求的命令前缀。示例：

    • 列出项目：

      /stitch What Stitch projects do I have?

    • 获取项目详细信息：

      /stitch Tell me details about my project 6677573127824787033

    • 列表屏幕：

      /stitch Give me all the screens of project 6677573127824787033

    • 下载资产：

      /stitch Download the image of screen 7393b8177be0490f89eb8f2c1e4cfb37
/stitch Download the HTML of screen 7393b8177be0490f89eb8f2c1e4cfb37

    • 生成新屏幕：

      您可以使用Qwen3、Gemini 3 Pro或Gemini 3 Flash（默认）型号从文本提示生成新屏幕。

      /stitch Design a mobile app for people who love skiing in the Alps, using Gemini 3 Pro.

    • 增强提示：

      /stitch Enhance this prompt: "Design a landing page for a podcast about the latest in Design and AI."

💸 定价

  • 缝合MCP 免费.

🔧 资源

📄 法律

您对Stitch API的使用受Google条款和使用政策、Google API条款和Stitch设置的管辖。Stitch隐私声明描述了如何处理您的数据。

相关 MCP