---
name: glm-design-partner
description: Use OpenRouter model z-ai/glm-5.2 as a creative web-design partner for page redesigns, landing pages, route redesigns, UI refreshes, and visual direction work. Use when Codex must analyze an existing website/page, build a creative brief, ask GLM 5.2 for a full-page redesign direction, then implement the best ideas cleanly in the current codebase.
---

# GLM Design Partner

Use OpenRouter model `z-ai/glm-5.2` as a creative design partner, then act as the final engineer.
Do not ask the user for design details first when the current page and codebase can be inspected.

## Setup

Before using this skill, verify OpenRouter access:

1. The user must create an OpenRouter API key at `https://openrouter.ai/settings/keys`.
2. The key must be stored in `OPENROUTER_API_KEY`.
3. Never paste, print, echo, or commit the key.
4. If `OPENROUTER_API_KEY` is missing, stop and ask the user to set it before calling OpenRouter.

### Windows OpenRouter Key Setup

```powershell
# Set for this PowerShell session
$env:OPENROUTER_API_KEY="sk-or-v1-your-key-here"

# Optional: persist for future Codex sessions
[Environment]::SetEnvironmentVariable("OPENROUTER_API_KEY", "sk-or-v1-your-key-here", "User")
```

After setting a persistent variable, tell the user to restart Codex so the new process can see it.

### Mac OpenRouter Key Setup

```bash
# Set for this terminal session
export OPENROUTER_API_KEY="sk-or-v1-your-key-here"

# Optional: persist for future zsh sessions
echo 'export OPENROUTER_API_KEY="sk-or-v1-your-key-here"' >> ~/.zshrc
source ~/.zshrc
```

After changing the shell profile, tell the user to restart Codex so the new process can see it.

## Installing This Skill

### Easiest Install: Ask Codex

If the user provides this `SKILL.md` file to Codex and asks you to install it, install it yourself:

1. Create the skill folder:
   - Windows: `%USERPROFILE%\.codex\skills\glm-design-partner`
   - Mac/Linux: `~/.codex/skills/glm-design-partner`
2. Save the provided file as `SKILL.md` in that folder.
3. Create `scripts/` inside the skill folder.
4. Download `https://mattfarmer.ai/downloads/ask-openrouter-glm.mjs` into `scripts/ask-openrouter-glm.mjs`.
5. Verify `OPENROUTER_API_KEY` is set. If not, give the correct Windows or Mac setup commands above.
6. Tell the user to restart Codex.

## Required Workflow

1. Inspect the codebase.
   - Identify framework, routes, page files, component structure, styling system, assets, reusable UI patterns, local run commands, and verification commands.
   - Find the requested page and related pages/components that must stay visually consistent.

2. Analyze the current page.
   - Open it locally in the browser when possible.
   - Capture navigation, footer, hero, sections, CTAs, links, images, copy, repeated components, and responsive behavior.
   - Infer target audience, conversion goal, business purpose, and brand tone.
   - Identify what feels outdated, redundant, generic, unclear, inconsistent, or visually weak.
   - Identify what must be preserved: working links, required content, assets, functionality, accessibility, responsive behavior, and app conventions.
   - State reasonable assumptions when important facts are not explicit.

3. Build a detailed creative brief for GLM 5.2.
   Include website context, target audience, conversion goal, current structure/copy/CTAs, required sections, required links/actions, available assets, technical constraints, brand/tone constraints, what to remove or avoid, design problems to solve, and related pages/components that should share the visual language.

4. Ask GLM 5.2 for a full-page redesign.
   - Use model name exactly: `z-ai/glm-5.2`.
   - Read the API key from `OPENROUTER_API_KEY`.
   - Ask GLM to rethink the entire page experience with broad creative freedom, not just one section.
   - Request: named concept, visual language, color/material system, typography direction, section-by-section redesign, CTA hierarchy, layout rhythm, responsive notes, interaction/motion ideas, related-page adaptation, and implementation notes.

5. Use GLM as creative director, not final engineer.
   - Extract the strongest ideas.
   - Do not blindly paste generated code.
   - Translate ideas into clean, idiomatic code matching the existing architecture and styling system.
   - Preserve accessibility, responsive behavior, links, content requirements, and app conventions.
   - Keep implementation scoped to the requested page and necessary shared styles/components.
   - Avoid generic SaaS gradients, cliche AI visuals, bland card stacks, random decoration, and mismatched business-model references.

6. Implement and verify.
   - Update the relevant page/components/styles/assets.
   - Run the local checks appropriate to the repo.
   - Open the redesigned page locally.
   - Verify desktop and mobile layouts, links, text overlap, CTA behavior, image/icon loading, and console errors.
   - Fix visible issues before reporting back.

## OpenRouter Helper

Use the bundled `scripts/ask-openrouter-glm.mjs` helper when a shell-based API call is easiest.
The script reads `OPENROUTER_API_KEY`, sends a prompt file to `z-ai/glm-5.2`, and writes the response to an output file.

Example:

```bash
node path/to/glm-design-partner/scripts/ask-openrouter-glm.mjs prompt.md response.md
```

If the key is missing or the API call fails, do not invent a GLM response. Report the blocker and continue with best judgment only if the user asks you to proceed without GLM.

## Prompt Skeleton

```text
You are a senior creative web designer and art director. Redesign the entire page experience for this website.

Business/context:
[fill from site analysis]

Target audience:
[fill from site analysis]

Primary conversion goal:
[fill from site analysis]

Current page structure and copy:
[fill from site analysis]

Required content, links, and functionality:
[fill from site analysis]

Available brand assets:
[fill from site analysis]

Technical constraints:
[framework, styling system, component conventions, responsive/accessibility needs]

Must remove or avoid:
[outdated CTAs, unwanted sections, design cliches, wrong tone, weak patterns]

Creative freedom:
You may radically rethink layout, visual language, section structure, hierarchy, rhythm, and interactions as long as the page remains usable, responsive, accessible, and aligned with the conversion goal.

Deliver:
1. Named creative concept
2. Visual language
3. Color/material system
4. Typography direction
5. Full section-by-section redesign
6. CTA hierarchy
7. Responsive behavior notes
8. Interaction/motion ideas
9. How this style should extend to related pages/components
10. Implementation notes for this codebase
```