Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.
Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention.
Choose workflow based on input type:
| Input | Workflow | Reference |
|---|---|---|
| Screenshot | Replicate exactly | ./references/workflow-screenshot.md |
| Video | Replicate with animations | ./references/workflow-video.md |
| Screenshot/Video (describe only) | Document for devs | ./references/workflow-describe.md |
| 3D/WebGL request | Three.js immersive | ./references/workflow-3d.md |
| Quick task | Rapid implementation | ./references/workflow-quick.md |
| Complex/award-quality | Full immersive | ./references/workflow-immersive.md |
| From scratch | Design Thinking below |
| - |
All workflows: Activate ak:ui-ux-pro-max skill FIRST for design intelligence.
ak:ai-multimodal skill - extract colors, fonts, spacing, effectsui-ux-designer subagent - create phased implementation./docs/design-guidelines.md if approvedSee specific workflow files for detailed steps.
Before coding, commit to a BOLD aesthetic direction:
CRITICAL: Execute with precision. Bold maximalism and refined minimalism both work - intentionality is key.
./references/animejs.md). Orchestrated page loads > scattered micro-interactions.ak:ai-multimodal, process with ak:media-processing| Task | Reference |
|---|---|
| Generate assets | ./references/asset-generation.md |
| Analyze quality | ./references/visual-analysis-overview.md |
| Extract guidelines | ./references/design-extraction-overview.md |
| Optimization | ./references/technical-overview.md |
| Animations | ./references/animejs.md |
Quick start: ./references/ai-multimodal-overview.md
NEVER use:
DO:
Remember: Claude is capable of extraordinary creative work. Commit fully to distinctive visions.