Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention.
Workflow Selection
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 ck:ui-ux-pro-max skill FIRST for design intelligence.
Screenshot/Video Replication (Quick Reference)
- Analyze with
ck:ai-multimodal skill - extract colors, fonts, spacing, effects
- Plan with
ui-ux-designer subagent - create phased implementation
- Implement - match source precisely
- Verify - compare to original
- Document - update
./docs/design-guidelines.md if approved
See specific workflow files for detailed steps.
Design Thinking (From Scratch)
Before coding, commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Execute with precision. Bold maximalism and refined minimalism both work - intentionality is key.
Aesthetics Guidelines
- Typography: Avoid Arial/Inter; use distinctive, characterful fonts. Pair display + body fonts.
- Color: Commit to cohesive palette. CSS variables. Dominant colors with sharp accents.
- Motion: CSS-first, anime.js for complex (
./references/animejs.md). Orchestrated page loads > scattered micro-interactions.
- Spatial: Unexpected layouts. Asymmetry. Overlap. Negative space OR controlled density.
- Backgrounds: Atmosphere over solid colors. Gradients, noise, patterns, shadows, grain.
- Assets: Generate with
ck:ai-multimodal, process with ck:media-processing
Asset & Analysis References
| 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
Anti-Patterns (AI Slop)
NEVER use:
- Overused fonts: Inter, Roboto, Arial, Space Grotesk
- Cliched colors: purple gradients on white
- Predictable layouts, cookie-cutter patterns
DO:
- Vary themes (light/dark), fonts, aesthetics per project
- Match complexity to vision (maximalist = elaborate; minimalist = precise)
- Make unexpected, context-specific choices
Remember: Claude is capable of extraordinary creative work. Commit fully to distinctive visions.
1---2name: ck-frontend-design3description: Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.4license: Complete terms in LICENSE.txt5---6
7Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention.
8
9## Workflow Selection
10
11Choose workflow based on input type:
12
13| Input | Workflow | Reference |
14|-------|----------|-----------|
15| Screenshot | Replicate exactly | `./references/workflow-screenshot.md` |
16| Video | Replicate with animations | `./references/workflow-video.md` |
17| Screenshot/Video (describe only) | Document for devs | `./references/workflow-describe.md` |
18| 3D/WebGL request | Three.js immersive | `./references/workflow-3d.md` |
19| Quick task | Rapid implementation | `./references/workflow-quick.md` |
20| Complex/award-quality | Full immersive | `./references/workflow-immersive.md` |
21| From scratch | Design Thinking below | - |
22
23**All workflows**: Activate `ck:ui-ux-pro-max` skill FIRST for design intelligence.
24
25## Screenshot/Video Replication (Quick Reference)
26
271. **Analyze** with `ck:ai-multimodal` skill - extract colors, fonts, spacing, effects
282. **Plan** with `ui-ux-designer` subagent - create phased implementation
293. **Implement** - match source precisely
304. **Verify** - compare to original
315. **Document** - update `./docs/design-guidelines.md` if approved
32
33See specific workflow files for detailed steps.
34
35## Design Thinking (From Scratch)
36
37Before coding, commit to a BOLD aesthetic direction:
38- **Purpose**: What problem does this interface solve? Who uses it?
39- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
40- **Constraints**: Technical requirements (framework, performance, accessibility).
41- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
42
43**CRITICAL**: Execute with precision. Bold maximalism and refined minimalism both work - intentionality is key.
44
45## Aesthetics Guidelines
46
47- **Typography**: Avoid Arial/Inter; use distinctive, characterful fonts. Pair display + body fonts.
48- **Color**: Commit to cohesive palette. CSS variables. Dominant colors with sharp accents.
49- **Motion**: CSS-first, anime.js for complex (`./references/animejs.md`). Orchestrated page loads > scattered micro-interactions.
50- **Spatial**: Unexpected layouts. Asymmetry. Overlap. Negative space OR controlled density.
51- **Backgrounds**: Atmosphere over solid colors. Gradients, noise, patterns, shadows, grain.
52- **Assets**: Generate with `ck:ai-multimodal`, process with `ck:media-processing`
53
54## Asset & Analysis References
55
56| Task | Reference |
57|------|-----------|
58| Generate assets | `./references/asset-generation.md` |
59| Analyze quality | `./references/visual-analysis-overview.md` |
60| Extract guidelines | `./references/design-extraction-overview.md` |
61| Optimization | `./references/technical-overview.md` |
62| Animations | `./references/animejs.md` |
63
64Quick start: `./references/ai-multimodal-overview.md`
65
66## Anti-Patterns (AI Slop)
67
68NEVER use:
69- Overused fonts: Inter, Roboto, Arial, Space Grotesk
70- Cliched colors: purple gradients on white
71- Predictable layouts, cookie-cutter patterns
72
73DO:
74- Vary themes (light/dark), fonts, aesthetics per project
75- Match complexity to vision (maximalist = elaborate; minimalist = precise)
76- Make unexpected, context-specific choices
77
78Remember: Claude is capable of extraordinary creative work. Commit fully to distinctive visions.
majiayu000