ck-frontend-design

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` | | Existing project upgrade | Redesign Audit | `./references/redesign-audit-checklist.md` | | From scratch | Design Thinking below | - | **All workflows**: Activate `ck:ui-ux-pro-max` skill FIRST for design intelligence. **Precedence:** When anti-slop rules (below) conflict with `ck:ui-ux-pro-max` recommendations (e.g., Inter font, AI Purple palette, Lucide-only icons), substitute with alternatives from `./references/anti-slop-rules.md` unless the user explicitly requested the conflicting choice. ## Screenshot/Video Replication (Quick Reference) 1. **Analyze** with `ck:ai-multimodal` skill - extract colors, fonts, spacing, effects 2. **Plan** with `ui-ux-designer` subagent - create phased implementation 3. **Implement** - match source precisely 4. **Verify** - compare to original 5. **Document** - update `./docs/design-guidelines.md` if approved See specific workflow files for detailed steps. ## Design Dials Three configurable parameters that drive design decisions. Set defaults at session start or let user override via chat: | Dial | Default | Range | Low (1-3) | High (8-10) | |------|---------|-------|-----------|-------------| | `DESIGN_VARIANCE` | 8 | 1-10 | Perfect symmetry, centered layouts, equal grids | Asymmetric, masonry, massive empty zones, fractional CSS Grid | | `MOTION_INTENSITY` | 6 | 1-10 | CSS hover/active states only | Framer Motion scroll reveals, spring physics, perpetual micro-animations | | `VISUAL_DENSITY` | 4 | 1-10 | Art gallery — huge whitespace, expensive/clean | Cockpit — tiny paddings, 1px dividers, monospace numbers everywhere | **Usage:** These values drive specific rules. At `DESIGN_VARIANCE > 4`, centered heroes are overused — force split-screen or left-aligned layouts. At `MOTION_INTENSITY > 5`, embed perpetual micro-animations. At `VISUAL_DENSITY > 7`, remove generic cards and use spacing/dividers. See `./references/bento-motion-engine.md` for dial-driven SaaS dashboard implementation. ## 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` | | Magic UI (80+ components) | `./references/magicui-components.md` | | Anti-slop forbidden patterns | `./references/anti-slop-rules.md` | | Redesign audit checklist | `./references/redesign-audit-checklist.md` | | Premium design patterns | `./references/premium-design-patterns.md` | | Performance guardrails | `./references/performance-guardrails.md` | | Bento motion engine (SaaS) | `./references/bento-motion-engine.md` | Quick start: `./references/ai-multimodal-overview.md` ## Anti-Patterns (AI Slop) Strongly prefer alternatives to these LLM defaults. Full rules: `./references/anti-slop-rules.md` **Typography** — Avoid Inter/Roboto/Arial. Prefer: `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi` **Color** — Avoid AI purple/blue gradient aesthetic, pure `#000000`, oversaturated accents. Use neutral bases with a single considered accent. **Layout** — Avoid 3-column equal card feature rows, centered heroes at high variance, `h-screen`. Use asymmetric grids, split-screen, `min-h-[100dvh]`. **Content** — Avoid "John Doe", "Acme Corp", round numbers, AI copy clichés ("Elevate", "Seamless", "Unleash"). Use realistic names, organic data, plain specific language. **Effects** — Avoid neon/outer glows, custom cursors, gradient text on headers. Use tinted inner shadows, spring physics. **Components** — Avoid default unstyled shadcn, Lucide-only icons, generic card-border-shadow pattern at high density. Always customize, try Phosphor/Heroicons, use spacing over cards. **Quick check:** See the "AI Tells" checklist in `./references/anti-slop-rules.md` before delivering any design. **Performance:** Animation and blur rules in `./references/performance-guardrails.md` Remember: Claude is capable of extraordinary creative work. Commit fully to distinctive visions.