菜单
Use when planning complex UI implementations, ensuring design consistency, or bridging design intent with code. Requires Superdesign MCP server.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
When to spawn agents vs work directly - parallel execution, specialization
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Use when the user asks to run Codex CLI (codex exec, codex resume) or references OpenAI Codex for code analysis, refactoring, or automated editing
CONTEXT: Cognitive Order Normalized in Transformer EXtract Truncated. Cross-model context handoff via Progressive Density Layering, MLDoE expert compression, Japanese semantic density, and Negentropic Coherence Lattice validation. Creates portable carry-packets that transfer cognitive state between AI sessions. Use when context reaches 80%, switching models, ending sessions, user says save, quicksave, handoff, transfer, continue later, /qs, /context, or needs session continuity.
Use when you have a written implementation plan to execute in a separate session with review checkpoints
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup
| name | superdesign-expert |
| description | Use when planning complex UI implementations, ensuring design consistency, or bridging design intent with code. Requires Superdesign MCP server. |
Expert in using Superdesign MCP for AI-powered design orchestration.
Superdesign is an open-source AI design agent that provides structured design specifications for your IDE's LLM to execute. It acts as a "design orchestrator" that bridges design intent with code implementation.
{
"mcpServers": {
"superdesign": {
"command": "npx",
"args": ["-y", "@jonthebeef/superdesign-mcp"]
}
}
}
You describe what you want to build:
Create a settings page with:
- Profile section with avatar
- Notification preferences
- Theme toggle
- Account management
Superdesign generates detailed specifications:
{
"component": "SettingsPage",
"layout": "stack",
"sections": [
{
"name": "ProfileSection",
"components": ["Avatar", "NameField", "EmailField"],
"spacing": "lg"
}
]
}
Claude uses these specs to generate consistent code.
Instead of: "settings page"
Say: "iOS-style settings page with grouped sections,
disclosure indicators, and system-standard spacing"
"Like Apple's Settings app" or
"Following Material Design 3 patterns"
"Toggle should animate, disclosure rows
should push to detail views"