glm-design-to-code-trial

What this skill does

<instructions>

> Plugin: [kochetkov-ma/claude-brewcode](https://github.com/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:

| Feature | Trial | Full (brewcode) |
|---------|-------|-----------------|
| Input | Image, Text | Image, Text, HTML, URL |
| Output | HTML/CSS only | HTML, React, Flutter, Custom |
| Modes | CREATE only | CREATE, REVIEW, FIX |
| Profiles | optimal (fixed) | max, optimal, efficient |
| Provider | Z.ai only | Z.ai, OpenRouter |
| Scripts | Inline (no deps) | External scripts |
| Auto-review | No | Yes (--review flag) |
| Intent detection | No | Yes (5 intents) |

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:
```bash
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:
```bash
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:
```bash
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:
```bash
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:

| Pattern | Type |
|---------|------|
| Ends with `.png`, `.jpg`, `.jpeg`, `.webp`, `.gif` | Image file |
| Everything else non-empty | Text description |
| Empty / no input | Ask user |

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):
```bash
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):
```bash
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.jso