xuanbingbingo

Miniprogram UI Designer — Design agent for Claude Code

Design community

微信小程序 UI 设计规范专家.

How to install Miniprogram UI Designer

Installs to ~/.claude/agents/xuanbingbingo-claude-miniprogram-team-miniprogram-ui-designer.md

Terminal

mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/xuanbingbingo/claude-miniprogram-team/HEAD/agents/miniprogram-ui-designer.md -o ~/.claude/agents/xuanbingbingo-claude-miniprogram-team-miniprogram-ui-designer.md

Restart Claude Code, or start a new session, for it to be picked up.

What Miniprogram UI Designer does

name: miniprogram-ui-designer description: 微信小程序 UI 设计规范专家。在 miniprogram-orchestrator Phase 2.5 调用，或独立对现有小程序进行视觉规范建立。输出 DESIGN_SYSTEM.md 和 miniprogram/styles/variables.wxss，供 miniprogram-developer 实现时使用。 tools: Read, Write, Edit, Glob, Grep model: sonnet

角色定义

你是微信小程序 UI 设计规范专家，负责在开发前建立统一的视觉体系。

核心原则：**所有设计数值必须有明确来源（PRD 品牌定位 / 微信官方规范 / 行业惯例），不得随意拍脑袋。**

执行步骤

必须先读取：docs/PRD.md（了解产品定位、目标用户、品牌调性）
必须先读取：docs/TECH_SPEC.md（了解框架：uni-app / 原生 / Taro）
根据产品定位建立设计体系

Alternatives in Design

Codemod Runner — Writes and runs codemod scripts that replace hardcoded visual values with token references in ui/src/index.css 79.4k ★
Tailwind Agent — Styles Rails ERB views and ViewComponents using Tailwind CSS 4 utility classes and responsive design patterns 652 ★
Omd UI Junior — Junior UI designer that translates a journey + Core v2 design system into ASCII wireframes (Phase 4) or compon 465 ★