creative-first-ui

creative-first-ui

Visual-first web design skill for AI coding agents. Build scroll-driven, immersive websites where AI-generated imagery, video, and 3D assets ARE the design — not decoration.

Works with Claude Code, Cursor, Codex, Copilot, Antigravity, and other AI coding agents.

---

What is this?

An AI agent skill that transforms how your coding agent designs websites. Instead of generating generic text+icon layouts, it produces visual-first, scroll-driven experiences built around AI-generated imagery.

Before this skill: Stock photos, icon grids, card layouts, template-looking pages. After this skill: Custom AI-generated hero visuals, scroll-driven storytelling, cinematic transitions, award-winning-quality output.

Install

npx skills add https://github.com/yasserstudio/creative-first-ui

Features

Design Philosophy

• 19 sections of creative direction, from ideation to pre-delivery checklist
• Visual-first approach — the image/video/3D IS the design, text serves it
• Creative ideation framework — visual metaphors, concept pairing, anti-obvious checks, mood grids
• Hero design rules — custom visuals, surgical gradient overlays, stats tickers, entrance animations

Visual Patterns (14)

• Full-bleed video backgrounds
• Scroll-driven frame sequences (Apple-style)
• 3D objects as hero (WebGPU/Three.js/Spline)
• Editorial image layouts
• Exploded views
• Visual crossfades
• Clip-path reveals
• Visual story sequences
• Parallax layer swaps
• Morphing visuals (scroll zoom)
• Video scrubbing
• Horizontal scroll
• Split-screen reveals
• Text masking (image through letterforms)

AI Asset Generation

• Direct generation via inference.sh CLI — 50+ image models, 40+ video models
• Tool comparison — Midjourney vs Flux vs Gemini vs Kling vs Runway
• Prompt templates per industry
• Asset pipeline — FFmpeg, Sharp, gltf-transform compression commands

Advanced Techniques

• CSS scroll-driven animations (animation-timeline: scroll())
• Shader effects (Shaders.com, Three.js EffectComposer)
• Noise/grain textures (SVG feTurbulence)
• View Transitions API
• Rive animations
• Kinetic typography
• Magnetic/fluid cursor effects
• Bento grid layouts
• Sound design (opt-in)

Industry-Specific Design (13 Industries)

Automotive, Consumer Tech, SaaS, Fashion & Luxury, Health & Wellness, Health & Food Tracking, Architecture, Food & Beverage, Travel, Gaming, Finance, Education, Creative Agency — each with hero strategy, color direction, typography, patterns, and AI prompt templates.

Framework Integration

• React / Next.js — GSAP hooks, ScrollTrigger cleanup, next/image, React Three Fiber, View Transitions
• Astro — islands architecture, View Transitions, GSAP/Lenis lifecycle, content collections

Production Quality

• Apple HIG alignment (semantic color tokens, 8px spacing, 44px touch targets)
• Vercel Web Interface Guidelines alignment
• Performance budgets, iOS/Safari gotchas, loading states
• WCAG AA accessibility, reduced motion, high contrast
• Conversion optimization (CTA design, trust signals, visual psychology)
• 25-item pre-delivery checklist

File Structure

creative-first-ui/
  SKILL.md                    # Main skill (1,500+ lines, 19 sections)
  references/
    examples.md               # Award-winning sites by pattern & industry
    snippets.md               # Ready-to-use code (2,200+ lines)
    industries.md             # Design direction for 13 industries
    react-nextjs.md           # React/Next.js integration
    astro.md                  # Astro integration
    asset-pipeline.md         # Image/video/3D optimization
  CHANGELOG.md                # 15 versions documented
  ROADMAP.md
  ENGINEERING.md
  README.md

The Workflow

1. Tell the agent what you're building
2. It asks: "Can you generate AI visuals?"
3. Creative ideation → 3 hero concepts (safe → bold)
4. Generate assets (via infsh CLI or your preferred tool)
5. Agent builds the page around the visuals
6. Iterate: screenshot → identify issues → fix → repeat

Keywords

ui-design ux-design web-design landing-page scroll-animation gsap three-js webgl ai-generated-art visual-design creative-coding frontend hero-section parallax scroll-driven-animations midjourney kling inference-sh react-three-fiber astro nextjs tailwind accessibility performance conversion-optimization

License

MIT - Yasser's Studio