Menu
UI/UX design and frontend component generation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Diagnose and fix build/CI failures automatically
Concurrent code generation via multi-model picker
OMP self-improvement — analyse own skills/agents and propose improvements
Visual diff/screenshot comparison verdict
Clone and adapt a web page/design to the codebase
Trace→deep-interview pipeline for deep investigation
| name | design |
| description | UI/UX design and frontend component generation |
| trigger | design:, /omp:design |
| autoinvoke | false |
| Field | Value |
|---|---|
| ID | design |
| Keywords | design:, /omp:design |
| Tier | Frontend Tool |
| Source | src/skills/design.mts |
Generates UI/UX designs and frontend components from natural language descriptions. Produces framework-appropriate components (React, Vue, Svelte, etc.), applies the project's existing design system tokens, and writes output files with associated tests. Accepts wireframe descriptions, mockup references, or component specs.
Note: Uses /omp:design (not /design) to avoid conflicts with native Copilot commands.
interface SkillInput { trigger: string; args: string[]; }
interface SkillOutput { status: "ok" | "error"; message: string; }
export async function activate(input: SkillInput): Promise<SkillOutput>
export function deactivate(): void
Extension-only skill. Triggers UI/UX design and component generation in Copilot. The CLI prints guidance directing users to the /omp:design slash command.
P3 scope: Figma/Sketch import, design token extraction, and Storybook story generation (as specified in SPEC-omp-2.0 §5) are deferred to P3. The current implementation generates components from text descriptions only.