Plugin: kochetkov-ma/claude-brewcode | Skill: glm-design-to-code-trial

GLM Design-to-Code (Trial)

Converts design screenshots or text descriptions to HTML/CSS using GLM vision models (Z.ai). Trial version — CREATE mode, HTML output only.

Arguments: $ARGUMENTS

Step 0: Trial vs Full Version

Show this comparison to the user:

Then ask the user:

USE AskUserQuestion tool:

This is the TRIAL version of glm-design-to-code.

1) Continue with trial (HTML output, CREATE mode)
2) Install full brewcode plugin (React, Flutter, review/fix modes, 5 intents)

Reply 1 or 2.

If user picks 2 -> show install commands and STOP:

claude plugin marketplace add https://github.com/kochetkov-ma/claude-brewcode
claude plugin install brewcode@claude-brewcode

Explain: full version supports React/Flutter/Custom output, CREATE/REVIEW/FIX modes, 5 intent types (reproduce, creative, enhance, modify, convert), OpenRouter provider, profile selection, and auto-review. Then STOP — do not proceed further.

If user picks 1 -> proceed to Step 1.

Step 1: API Key Setup

Check for ZAI_API_KEY in .env file first, then environment.

EXECUTE using Bash tool:

ZAI_API_KEY=""
if [ -f .env ]; then
  ZAI_API_KEY=$(grep -E '^ZAI_API_KEY=' .env 2>/dev/null | head -1 | cut -d'=' -f2- | tr -d '"' | tr -d "'")
fi
[ -z "$ZAI_API_KEY" ] && ZAI_API_KEY="${ZAI_API_KEY:-}"
if [ -n "$ZAI_API_KEY" ]; then
  echo "KEY_FOUND:${ZAI_API_KEY: -4}"
else
  echo "KEY_MISSING"
fi

If KEY_MISSING -> USE AskUserQuestion tool:

Z.ai API key not found.

Get a free key at https://open.z.ai (GLM models, free tier available).
Paste your API key:

Store the key in ZAI_API_KEY variable for subsequent steps.

Then validate with a lightweight curl:

EXECUTE using Bash tool:

HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" "https://api.z.ai/api/paas/v4/models" \
  -H "Authorization: Bearer $ZAI_API_KEY" --max-time 10)
if [ "$HTTP_CODE" = "200" ]; then
  echo "KEY_VALID"
else
  echo "KEY_INVALID:$HTTP_CODE"
fi

STOP if KEY_INVALID — show error message with HTTP code and advise user to check the key at https://open.z.ai.

Save to .env and ensure .gitignore covers it:

EXECUTE using Bash tool:

if [ -f .env ]; then
  if grep -q '^ZAI_API_KEY=' .env; then
    sed -i.bak "s|^ZAI_API_KEY=.*|ZAI_API_KEY=$ZAI_API_KEY|" .env && rm -f .env.bak
  else
    echo "ZAI_API_KEY=$ZAI_API_KEY" >> .env
  fi
else
  echo "ZAI_API_KEY=$ZAI_API_KEY" > .env
fi
grep -qxF '.env' .gitignore 2>/dev/null || echo '.env' >> .gitignore
echo "Key saved (****${ZAI_API_KEY: -4})"

Step 2: Detect Input

Parse $ARGUMENTS to find input:

For image files — validate existence with file --mime-type.

If no input found -> USE AskUserQuestion tool:

No input detected. Provide either:
- Path to a design screenshot (PNG, JPG, WebP, GIF)
- Text description of the desired design

Your input:

Store the detected input type (IMAGE or TEXT) and value for the next step.

Step 3: Build Request Payload

For IMAGE input

EXECUTE using Bash tool (replace IMAGE_PATH_VALUE with the actual resolved image path, and inject ZAI_API_KEY value):

set -e
IMAGE_PATH="IMAGE_PATH_VALUE"

command -v jq >/dev/null 2>&1 || { echo "jq is required. Install: brew install jq"; exit 1; }
command -v base64 >/dev/null 2>&1 || { echo "base64 is required"; exit 1; }

case "$IMAGE_PATH" in
  *.png)  MIME="image/png" ;;
  *.jpg|*.jpeg) MIME="image/jpeg" ;;
  *.webp) MIME="image/webp" ;;
  *.gif)  MIME="image/gif" ;;
  *) echo "Unsupported image format"; exit 1 ;;
esac

B64=$(base64 < "$IMAGE_PATH" | tr -d '\n')
DATA_URI="data:${MIME};base64,${B64}"

TMPURI=$(mktemp)
TMPUSER=$(mktemp)
TMPSYS=$(mktemp)
trap "rm -f '$TMPURI' '$TMPUSER' '$TMPSYS'" EXIT

printf '%s' "$DATA_URI" > "$TMPURI"
printf '%s' "Convert this design screenshot to working HTML/CSS code files." > "$TMPUSER"
cat > "$TMPSYS" <<'SYSPROMPT'
You are a skilled frontend developer. Follow the task instruction and produce clean, accurate code.

## Output format

Wrap every file in markers. Output markers and file content only — no text before, between, or after.

===FILE: path/to/file.ext===
content
===END_FILE===

Wrong (adds backticks): ```html\n===FILE: index.html===
Correct: ===FILE: index.html===

## Requirements

- Match design: correct colors, proportions, typography, layout structure
- CSS custom properties for colors
- Semantic HTML5, entry point: index.html
- CSS in separate .css file(s) — inline styles excluded
- JS in separate .js file(s) if needed
- CDN dependencies excluded unless specified in project context
- All text content from screenshot preserved verbatim
- Layout structure and proportions matched (sidebar, header, content areas)

Output starts with ===FILE: and ends with ===END_FILE===. Nothing else.
SYSPROMPT

jq -n \
  --rawfile system "$TMPSYS" \
  --rawfile user_text "$TMPUSER" \
  --rawfile data_uri "$TMPURI" \
  '{
    model: "glm-5v-turbo",
    temperature: 0.2,
    top_p: 0.85,
    max_tokens: 16384,
    messages: [
      { role: "system", content: ($system | rtrimstr("\n")) },
      { role: "user", content: [
        { type: "text", text: ($user_text | rtrimstr("\n")) },
        { type: "image_url", image_url: { url: ($data_uri | rtrimstr("\n")) } }
      ]}
    ]
  }' > /tmp/d2c-trial-payload.json

echo "Payload: /tmp/d2c-trial-payload.json ($(wc -c < /tmp/d2c-trial-payload.json | tr -d ' ') bytes)"

For TEXT input

EXECUTE using Bash tool (replace USER_TEXT_VALUE with the actual text description):

set -e
USER_TEXT="USER_TEXT_VALUE"

command -v jq >/dev/null 2>&1 || { echo "jq is required. Install: brew install jq"; exit 1; }

TMPUSER=$(mktemp)
TMPSYS=$(mktemp)
trap "rm -f '$TMPUSER' '$TMPSYS'" EXIT

printf '%s' "Create working frontend code files based on this description:

$USER_TEXT" > "$TMPUSER"
cat > "$TMPSYS" <<'SYSPROMPT'
You are a skilled frontend developer. Follow the task instruction and produce clean, accurate code.

## Output format

Wrap every file in markers. Output markers and file content only — no text before, between, or after.

===FILE: path/to/file.ext===
content
===END_FILE===

Wrong (adds backticks): ```html\n===FILE: index.html===
Correct: ===FILE: index.html===

## Requirements

- Match design: correct colors, proportions, typography, layout structure
- CSS custom properties for colors
- Semantic HTML5, entry point: index.html
- CSS in separate .css file(s) — inline styles excluded
- JS in separate .js file(s) if needed
- CDN dependencies excluded unless specified in project context
- All text content from screenshot preserved verbatim
- Layout structure and proportions matched (sidebar, header, content areas)

Output starts with ===FILE: and ends with ===END_FILE===. Nothing else.
SYSPROMPT

jq -n \
  --rawfile system "$TMPSYS" \
  --rawfile user_text "$TMPUSER" \
  '{
    model: "glm-5v-turbo",
    temperature: 0.2,
    top_p: 0.85,
    max_tokens: 16384,
    messages: [
      { role: "system", content: ($system | rtrimstr("\n")) },
      { role: "user", content: ($user_text | rtrimstr("\n")) }
    ]
  }' > /tmp/d2c-trial-payload.json

echo "Payload: /tmp/d2c-trial-payload.json