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 | | From scratch | Design Thinking below | - |

All workflows: Activate ck:ui-ux-pro-max skill FIRST for design intelligence.

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 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: Codex is capable of extraordinary creative work. Commit fully to distinctive visions.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: manhvann
• Source: manhvann/codexkit
• License: MIT

Install and usage instructions live in the source repository linked above.