The New Full-Stack Designer

Marvin Schweibold's AI-Driven Design Workflow at Shopify

• Workflow Shift: The design process remains iterative, but the toolchain has moved from static Figma canvases to AI-driven development environments (Codex, Cloud Code, Terminal).
  • Figma is now primarily used as a "scratchpad" for rapid idea visualization and decompiling concepts for AI agents.
  • Designers generate functional code and real-time demos immediately, testing them on mobile or desktop before refining in Figma.
• Role Evolution: Designers act as "editors" and curators rather than sole crafters of the final output.
  • AI handles the heavy lifting of execution and complexity, while humans manage quality control, selectivity, and aesthetic direction.
  • The barrier to entry for high-fidelity interaction has lowered; designers can now simulate complex systems without waiting for engineering resources.
• Shopify Product Design Studio:
  • Led by Schweibold, the team operates exclusively within Shopify's "Sidekick" AI infrastructure to modernize the admin experience and the "green app" (mobile).
  • The studio manages two parallel, complementary initiatives:
    • UI Redesign: Polishing interfaces visually to improve the merchant experience.
    • AI Automation: Using chat interfaces to automate and manipulate store data, shifting from click-based navigation to conversational command.
  • Prototyping Strategy: The team builds functional prototypes in the "DevUI" playground using AI to port Figma concepts into live code, allowing for rapid validation with stakeholders like CEO Tobias Lütke.

Case Studies and AI Execution Techniques

• Grass Shader Project:
  • Schweibold attempted to recreate a real-life grass video as a web shader using AI.
  • Initial Failure: The first AI output lacked depth, rendering grass as a flat layer.
  • Correction Strategy: He used AI to generate a topographical map of the underlying terrain, feeding this "structural" data back into the generation process to create realistic depth and variations.
  • Debugging Tool: Integrated "Dial Kit" (a tool for exposing and tweaking code variables) to visualize underlying parameters, such as 217,000 distinct grass blade variations, allowing for precise control over wind and texture.
• Carousel Animation Study:
  • Dissected a complex carousel animation inspired by Mike Mattis, utilizing 91 AI prompts to understand the underlying physics.
  • Created custom control panels to adjust "pull boost" and collision physics, demonstrating that AI can now decompile and replicate high-end motion design previously reserved for specialized engineers.
  • Outcome: The ability to "tinker" with code directly allows designers to understand complex interactions without interrupting engineering teams.

Viewer Website Reviews

NStack (AI Workspace)

• Visual Clutter: The homepage suffers from "non-dictating" design, where multiple elements (sidebar, chat history, main message) compete for attention without a clear hierarchy.
• Primary Goal Ambiguity: It is unclear whether the user should explore the desktop emulation, start a chat, or click feature icons; multiple primary CTA buttons dilute focus.
• Positive: Successfully drops the user directly into the product environment, demonstrating the "aha moment" early.
• Recommendation: Consolidate the visual hierarchy to focus on one primary action (e.g., "Start Chat") and progressively disclose features to avoid overwhelming the user.

SkillSync (Memory Sync App)

• Information Density: The site is "mile-wide and inch-deep," utilizing dense typography and too many sidebar tabs to showcase features.
• Navigation Trap: Hiding content behind tabs risks users never seeing critical information; the current design requires excessive reading to understand the value proposition.
• AI Overuse: The site includes AI-generated animations that add visual noise without communicating the core functionality of syncing skills.
• Recommendation: Compress features into a "three-up" component (top three capabilities), make all feature pillars tappable, and prioritize the core value of "syncing skills" over listing every minor function.

InstaPlay (AI Game Creation)

• Onboarding Friction: The primary action (creating a game) is not immediately obvious; the page defaults to a gallery of existing games, requiring users to hunt for the creation prompt.
• Conversion Blocker: Users are forced to sign up before seeing a preview of their generated game, creating a high barrier to entry for the "try before you buy" model.
• Static Thumbnails: Game previews use static screenshots; using video or interactive hover states would better demonstrate the AI generation capability.
• Recommendation: Remove the sign-up wall for the initial creation experience, show a playable demo of the user's generated game immediately, and use the "Explorer" section as a secondary feature rather than the primary entry point.

Mintlify (Documentation Infrastructure)

• Trust & Clarity: Successfully communicates professionalism through reductive design, clean typography, prominent CTAs, and a high-quality logo wall (Microsoft, Anthropic, Coinbase).
• Visual Balance: Background animations are subtle and supportive; the color palette is cohesive and matches the photography.
• Minor Flaws:
  • Feature headlines are too small to read easily against the background.
  • The repeated "braided" animation loses its impact due to overuse.
  • Key information about "controlling access" is buried beneath a large screenshot and distracting animation.
• Strength: The layout effectively follows the "chapter" strategy, with the homepage acting as a table of contents for Product, Solutions, Resources, and Pricing.

Nullify (Document-to-Video Tool)

• Headline Confusion: The headline uses two changing placeholders ("Your users don't read your docs. Your patients..."), which disorients the user and delays understanding of the service.
• Content Accessibility: The video portfolio is non-interactive; users cannot click to view case studies, and the only exit from a full-screen video is the Escape key.
• Scroll Manipulation: The site employs aggressive "scroll jacking" (smooth scrolling that overrides user intent), which disrupts natural browsing flow and feels sluggish on mobile devices.
• Recommendation:
  • Replace the changing headline with a static value proposition or a hero video demonstrating the product.
  • Implement a sheet-based or modal interaction for case studies to allow deeper exploration without losing context.
  • Remove scroll jacking to restore native, interruptible scrolling behavior.

Instinct (Lunar Technology)

• Visual Immersion: Successfully uses 3D elements and high-quality video to establish credibility in the aerospace sector.
• Typography: Effective use of serif fonts for headlines contrasts well with sans-serif body text, though the logo, headline, and body fonts currently compete rather than harmonize.
• Interaction Issues:
  • Hover states are too slow; users must wait over a second to see the "Launch" animation begin.
  • The "Land" video is difficult to parse without a clearer visual cue of the moon landing.
  • The carousel is not draggable with a trackpad; it relies solely on tiny click buttons, violating standard UX patterns.
• Recommendation:
  • Speed up hover interactions to provide immediate feedback (e.g., "Launch" should start within 0.5 seconds).
  • Make the carousel drag-responsive (trackpad/swipe) to improve mobile usability.
  • Consolidate the "Technology," "Company," and "News" sections into the homepage to create a more digestible narrative flow.