104 lines
4.3 KiB
Markdown
104 lines
4.3 KiB
Markdown
---
|
||
name: ck-frontend-design
|
||
description: Create polished frontend interfaces from designs, screenshots, or videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, design system work, avoiding generic AI output.
|
||
---
|
||
|
||
# ck-frontend-design
|
||
|
||
Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention. Embeds the `ui-ux-designer` agent role.
|
||
|
||
## When to Use
|
||
|
||
- Replicating a UI from a screenshot or video
|
||
- Building web components from scratch with a strong aesthetic direction
|
||
- Creating 3D/WebGL immersive experiences
|
||
- Design system creation or audit
|
||
- Quick prototypes needing real visual polish
|
||
- Any frontend work where "AI slop" aesthetics are unacceptable
|
||
|
||
## Don't Use When
|
||
|
||
- Pure backend logic with no visual component
|
||
- Simple data display with no design requirements
|
||
- Already have a design system and just need to implement components per spec — use `ck-frontend-development`
|
||
|
||
## Workflow Selection
|
||
|
||
| Input | Workflow |
|
||
|-------|----------|
|
||
| Screenshot | Replicate exactly |
|
||
| Video | Replicate with animations |
|
||
| Screenshot/Video (describe only) | Document for developers |
|
||
| 3D/WebGL request | Three.js immersive experience |
|
||
| Quick task | Rapid implementation |
|
||
| From scratch | Design Thinking process below |
|
||
|
||
**All workflows:** Activate design intelligence database first for pattern research.
|
||
|
||
## Screenshot/Video Replication
|
||
|
||
1. **Analyze** — extract colors, fonts, spacing, effects from the visual
|
||
2. **Plan** — dispatch `ck-frontend-design` sub-process to create phased implementation
|
||
3. **Implement** — match source precisely
|
||
4. **Verify** — compare implementation to original
|
||
5. **Document** — update `./docs/design-guidelines.md` if approved
|
||
|
||
## 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
|
||
- **Constraints**: Technical requirements (framework, performance, accessibility)
|
||
- **Differentiation**: What makes this UNFORGETTABLE?
|
||
|
||
**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 animations. 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 multimodal AI tools when needed
|
||
|
||
## Anti-Patterns (AI Slop — NEVER use)
|
||
|
||
- Overused fonts: Inter, Roboto, Arial, Space Grotesk
|
||
- Cliched colors: purple gradients on white
|
||
- Predictable cookie-cutter layouts
|
||
- Generic card grids with drop shadows everywhere
|
||
|
||
## Design Principles
|
||
|
||
- **Mobile-First**: Always start with mobile, scale up
|
||
- **Accessibility**: WCAG 2.1 AA minimum (4.5:1 contrast for normal text)
|
||
- **Consistency**: Maintain design system coherence
|
||
- **Performance**: Optimize animations for smooth 60fps
|
||
- **Conversion-Focused**: Every design decision serves user goals
|
||
- **Trend-Aware**: Stay current while maintaining timeless principles
|
||
|
||
## Quality Standards
|
||
|
||
- Responsive across breakpoints (320px+, 768px+, 1024px+)
|
||
- Color contrast ratios meet WCAG 2.1 AA
|
||
- Interactive elements have clear hover/focus/active states
|
||
- Animations respect `prefers-reduced-motion`
|
||
- Touch targets minimum 44x44px on mobile
|
||
- Line height 1.5–1.6 for body text
|
||
|
||
## Required Skills (in order)
|
||
|
||
1. Design intelligence database search for patterns
|
||
2. `ck-frontend-design` screenshot/video analysis workflows
|
||
3. Web design best practices references
|
||
4. Framework-specific patterns (`ck-web-frameworks`)
|
||
5. Styling system (shadcn/ui, Tailwind CSS)
|
||
|
||
## Output
|
||
|
||
- Production-ready HTML/CSS/JS implementation
|
||
- Updated `./docs/design-guidelines.md` with new patterns
|
||
- Design rationale documented
|