메뉴
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"