setup-design-gen

name	setup-design-gen
description	First-time setup for the Design Workflow plugin. Checks and configures API keys (OpenAI, Google Cloud/Vertex AI, Unsplash), verifies the HTML Template design system path, and installs the web-to-figma Chrome extension. Run this once before using /design. Triggers on 'setup design', 'configure design workflow', 'setup API keys for design'.
argument-hint	[--check] to verify existing setup without modifying
allowed-tools	["Read","Write","Bash","Edit","AskUserQuestion"]

Setup Design Workflow

Run first-time setup for the Design Workflow plugin. Check prerequisites, configure API keys, verify the design system path, and set up the web-to-figma Chrome extension.

If the argument contains --check, only verify current status — do not configure or modify anything.

Step 1 — Check Prerequisites

Run this diagnostic script and display the results:

echo "=== Design Workflow Setup Check ==="
echo ""

# OpenAI API Key
if [ -n "$OPENAI_API_KEY" ]; then echo "✅ OpenAI API key set"; else echo "❌ OpenAI API key — not found"; fi

# Google Cloud Project
if [ -n "$GOOGLE_CLOUD_PROJECT" ]; then echo "✅ Google Cloud project: $GOOGLE_CLOUD_PROJECT"; else echo "❌ Google Cloud project — not found"; fi

# Google Cloud Location
if [ -n "$GOOGLE_CLOUD_LOCATION" ]; then echo "✅ Google Cloud location: $GOOGLE_CLOUD_LOCATION"; else echo "❌ Google Cloud location — not found"; fi

# gcloud CLI
if command -v gcloud &>/dev/null; then echo "✅ gcloud CLI installed"; else echo "❌ gcloud CLI — not found (needed for Vertex AI)"; fi

# gcloud auth
if command -v gcloud &>/dev/null && gcloud auth application-default print-access-token &>/dev/null; then echo "✅ Google Cloud authenticated"; else echo "❌ Google Cloud auth — not configured"; fi

# Unsplash Access Key
if [ -n "$UNSPLASH_ACCESS_KEY" ]; then echo "✅ Unsplash API key set"; else echo "❌ Unsplash API key — not found"; fi

echo ""
echo "=== Design System ==="

# Check for bundled design system first, then common paths
BUNDLED="$HOME/.claude/plugins/design-workflow/design-system/design-system.css"
DS_FOUND=""
if [ -f "$BUNDLED" ]; then
  echo "✅ Design system found (bundled with plugin)"
  DS_FOUND=1
fi
for path in "./design-system.css" "../HTML Template/design-system.css" "$HOME/Documents/GitHub/HTML Template/design-system.css"; do
  if [ -f "$path" ] && [ -z "$DS_FOUND" ]; then
    echo "✅ Design system found at: $path"
    DS_FOUND=1
    break
  fi
done
if [ -z "$DS_FOUND" ]; then
  echo "❌ Design system — not found"
fi

echo ""
echo "=== Web-to-Figma Extension ==="

if [ -d "$HOME/Documents/GitHub/web-to-figma" ]; then
  echo "✅ Web-to-Figma extension available at ~/Documents/GitHub/web-to-figma/"
else
  echo "❌ Web-to-Figma extension — not found"
fi

If --check was passed, stop here and print the summary. Otherwise continue to Step 2.

Step 2 — Configure Missing Keys

For each missing key from Step 1, ask the designer and help them set it up.

OpenAI API Key (if missing)

Ask: "Do you have an OpenAI API key? You'll need one for AI image generation with DALL-E."

Provide instructions:

• Get your API key from https://platform.openai.com/api-keys
• Add to your shell profile: export OPENAI_API_KEY='sk-...'

Offer to append the export line to ~/.zshrc or ~/.bashrc. If the designer provides the key, write the export to their shell profile.

Google Cloud CLI (if missing)

If the diagnostic showed gcloud CLI — not found, guide the designer through installation:

Ask: "The Google Cloud CLI (gcloud) is required for Vertex AI image generation (Imagen + Gemini models). Would you like to install it now?"

If yes, run the appropriate installer:

# macOS (via Homebrew — preferred)
brew install --cask google-cloud-sdk

If Homebrew is not available, provide the manual option:

• Download from https://cloud.google.com/sdk/docs/install
• Or run: curl https://sdk.cloud.google.com | bash

After installation, restart the shell or run source ~/.zshrc to pick up the new PATH.

Verify installation:

gcloud --version

Google Cloud Auth (if gcloud is installed but not authenticated)

Check if the designer has active credentials:

gcloud auth application-default print-access-token 2>/dev/null && echo "✅ Authenticated" || echo "❌ Not authenticated"

If not authenticated, run the login flow:

gcloud auth application-default login

This opens a browser for OAuth consent. After completion, credentials are stored locally and used by Vertex AI API calls.

Google Cloud / Vertex AI Project (if missing)

Ask: "Do you have a Google Cloud project with Vertex AI enabled? You'll need this for Imagen and Gemini image generation."

Provide instructions:

1. Go to https://console.cloud.google.com
2. Create or select a project
3. Enable the Vertex AI API: gcloud services enable aiplatform.googleapis.com --project=YOUR_PROJECT_ID
4. Add to shell profile: export GOOGLE_CLOUD_PROJECT='your-project-id'
5. Set location: export GOOGLE_CLOUD_LOCATION='us-central1'

If the designer provides the project ID, write both export lines to their shell profile and enable the API:

gcloud services enable aiplatform.googleapis.com --project="$GOOGLE_CLOUD_PROJECT"

Unsplash API Key (if missing)

Ask: "Do you have an Unsplash developer account? The free tier gives 50 requests/hour for stock photography."

Provide instructions:

• Register at https://unsplash.com/developers
• Create a new application (free tier: 50 requests/hour)
• Add to shell profile: export UNSPLASH_ACCESS_KEY='your-access-key'

If the designer provides the key, write the export to their shell profile.

Step 3 — Verify Design System Path

Look for the HTML Template design system in these locations (in order):

1. ~/.claude/plugins/design-workflow/design-system/design-system.css (bundled with plugin — should always exist)
2. ./design-system.css
3. ../HTML Template/design-system.css
4. ~/Documents/GitHub/HTML Template/design-system.css

If found, confirm: "Design system found at {path}" and verify that manifest.json also exists alongside it.

If not found, ask the designer for the path. Validate that both design-system.css and manifest.json exist at the provided location.

Step 4 — Web-to-Figma Extension

Check if the web-to-figma repo exists at ~/Documents/GitHub/web-to-figma/.

If found:

• Print: "✅ Web-to-Figma extension available."
• Remind: "Load it in Chrome: chrome://extensions → Enable Developer mode → Load unpacked → select ~/Documents/GitHub/web-to-figma/"

If not found:

• Suggest: "Clone it: git clone https://github.com/Paidax01/web-to-figma.git ~/Documents/GitHub/web-to-figma"
• Explain the one-time Chrome setup: "After cloning, open Chrome → chrome://extensions → Enable Developer mode → Load unpacked → select the web-to-figma folder"

Step 5 — Verify Setup

Re-run the diagnostic script from Step 1 to confirm everything is configured.

Print a summary table:

| Component              | Status |
|------------------------|--------|
| OpenAI API Key         | ✅/❌  |
| Google Cloud Project   | ✅/❌  |
| Google Cloud Location  | ✅/❌  |
| gcloud CLI             | ✅/❌  |
| Google Cloud Auth      | ✅/❌  |
| Unsplash API Key       | ✅/❌  |
| Design System          | ✅/❌  |
| Web-to-Figma Extension | ✅/❌  |

If all checks pass: "Setup complete! Type /design to start your first project."

If some items are missing: list what's still needed and explain they can re-run /setup-design-gen later to complete setup. Note which features require which keys (OpenAI/Vertex AI for /design-assets image generation, Unsplash for stock photography search).