# Fernando Diaz - Selected Work

Design Engineer in San Francisco. I build user experiences from design to code.

This page is a text companion to the media-first portfolio at [https://www.ferdiaz.dev](https://www.ferdiaz.dev). Each item links to its stable anchor on the visual site.

### [System-wide indicator for asynchronous subagents.](https://www.ferdiaz.dev/#adaptive-sub-agent-animation)

A close-up motion detail of Adaptive's topbar indicator, which keeps delegated background work visible while a user moves between chats and other product surfaces.

- Project: Adaptive Computer
- Format: video
- Stable ID: `adaptive-sub-agent-animation`
  - Skills: Interaction design, Motion design, Product design

### [Asynchronous subagents run heavier work in the background without blocking the chat.](https://www.ferdiaz.dev/#adaptive-sub-agents)

A user delegates a paid-customer analysis task to a subagent while keeping the main conversation available for a separate calendar follow-up. Active-task controls make the background work visible, resumable, and stoppable.

- Project: Adaptive Computer
- Format: video
- Stable ID: `adaptive-sub-agents`
  - Skills: AI product design, Interaction design, Product design

### [Native swipe interaction for chat image attachments.](https://www.ferdiaz.dev/#adaptive-image-stack)

Mobile chat attachments appear as a swipeable stacked deck with spring motion and depth, keeping image browsing inside the conversation instead of opening a separate gallery.

- Project: Adaptive Computer
- Format: video
- Stable ID: `adaptive-image-stack`
  - Skills: Mobile design, Interaction design, Motion design

### [Floating AI toolbar for editing React interfaces directly in the browser.](https://www.ferdiaz.dev/#ai-toolbar-direct-editing)

A floating AI toolbar opens over a running React interface so a user can prompt and apply UI changes directly on the live frontend surface.

- Project: Based Labs
- Format: video
- Stable ID: `ai-toolbar-direct-editing`
  - Skills: React, AI product design, Design engineering

### [Interaction design detail for the contextual AI toolbar.](https://www.ferdiaz.dev/#ai-toolbar-interaction-detail)

A close-up of the toolbar transitioning from compact controls into a contextual prompt input, focused on state changes, component tagging, spacing, and timing.

- Project: Based Labs
- Format: video
- Stable ID: `ai-toolbar-interaction-detail`
  - Skills: Interaction design, Motion design, Design engineering

### [AI-assisted visual IDE for frontend development.](https://www.ferdiaz.dev/#ai-frontend-visual-ide)

A visual frontend workspace combines a live app preview, AI chat, generation controls, and source code so generated UI and implementation can be inspected together.

- Project: Based Labs
- Format: video
- Stable ID: `ai-frontend-visual-ide`
  - Skills: AI product design, Frontend development, Product design

### [Microinteraction detail for toolbar hover states.](https://www.ferdiaz.dev/#based-ai-toolbar-hover-glow)

A focused hover treatment across compact toolbar controls, with a glow that distinguishes the AI action from standard interface tools.

- Project: Based Labs
- Format: video
- Stable ID: `based-ai-toolbar-hover-glow`
  - Skills: Interaction design, Motion design, Visual design

### [AI launcher expanding into a command palette.](https://www.ferdiaz.dev/#ai-launcher-interaction)

A compact launcher expands into a command-palette surface with prompt entry, suggestions, and commands layered over the active app.

- Project: Based Labs
- Format: video
- Stable ID: `ai-launcher-interaction`
  - Skills: Interaction design, AI product design, Motion design

### [Based demo: editing a React app with AI.](https://www.ferdiaz.dev/#based-frontend-demo)

A long-form product demo of an AI connected to a React app and making live interface changes while preview, chat, controls, and source code remain visible together.

- Project: Based Labs
- Format: video
- Stable ID: `based-frontend-demo`
  - Skills: React, AI product design, Design engineering

### [Demo of a Slack-based designer agent that codes.](https://www.ferdiaz.dev/#slack-designer-agent-demo)

A designer and coding agent collaborates through Slack like a teammate: receiving rough UI feedback, asking clarifying questions, summarizing direction, and moving toward implementation.

- Project: Based Labs
- Format: video
- Stable ID: `slack-designer-agent-demo`
  - Skills: AI agents, Product design, Conversational interfaces

### [Text-to-frontend alpha launch video.](https://www.ferdiaz.dev/#text-to-frontend-alpha-launch)

An early prompt-to-frontend product launch showing a text request become a usable interface, with generated UI and source code visible side by side.

- Project: Based Labs
- Format: video
- Stable ID: `text-to-frontend-alpha-launch`
  - Skills: AI product design, Frontend development, Product strategy

### [Product design iterations for a streamer dashboard and creator tools.](https://www.ferdiaz.dev/#streamer-dashboard-iterations)

A gallery showing the dashboard's evolution across stream scheduling, rewards, monetization, activity, and creator profile surfaces as the product responded to feedback and usage.

- Project: Qapla
- Format: gallery
- Stable ID: `streamer-dashboard-iterations`
  - Skills: Product design, Dashboard design, Creator tools

### [Twitch extension onboarding from install to activation.](https://www.ferdiaz.dev/#twitch-extension-activation-onboarding)

An onboarding flow that turns a technically awkward Twitch extension installation into a guided path from the extension page to a configured, usable state.

- Project: Qapla
- Format: video
- Stable ID: `twitch-extension-activation-onboarding`
  - Skills: Onboarding, Product design, Twitch extensions

### [Twitch extension demo for live viewer interactions on stream.](https://www.ferdiaz.dev/#twitch-extension-live-viewer-interactions)

A viewer chooses a message or visual reaction inside a live Twitch extension, sends it, and sees the result appear on the stream surface.

- Project: Qapla
- Format: video
- Stable ID: `twitch-extension-live-viewer-interactions`
  - Skills: Twitch extensions, Interaction design, Monetization

### [Streamer profile onboarding from bio to shareable link.](https://www.ferdiaz.dev/#streamer-profile-link-onboarding)

A short creator onboarding flow for confirming a bio, selecting profile tags, and publishing a shareable streamer profile URL.

- Project: Qapla
- Format: video
- Stable ID: `streamer-profile-link-onboarding`
  - Skills: Onboarding, Creator tools, Product design

### [Viewer web app for animated avatars on stream.](https://www.ferdiaz.dev/#viewer-avatar-web-app)

A viewer-facing web app covering animated avatar creation and customization, confirmation, tutorials, and a QR-code handoff to mobile.

- Project: Qapla
- Format: gallery
- Stable ID: `viewer-avatar-web-app`
  - Skills: Web app design, Avatar customization, Consumer product design

### [Mobile app explore screen for streamer content and reactions.](https://www.ferdiaz.dev/#mobile-explore-reactions)

A mobile discovery surface featuring streamer content with a prominent call to compose and send a live reaction.

- Project: Qapla
- Format: image
- Stable ID: `mobile-explore-reactions`
  - Skills: Mobile design, Discovery, Visual design

### [Creator profile screens for a Twitch companion app.](https://www.ferdiaz.dev/#mobile-creator-profile)

Mobile creator profile screens combining identity, tags, upcoming streams, community context, and viewer support actions.

- Project: Qapla
- Format: image
- Stable ID: `mobile-creator-profile`
  - Skills: Mobile design, Creator tools, Profile design

### [In-app purchase flow embedded in the send action.](https://www.ferdiaz.dev/#embedded-purchase-send-action)

A low-balance state introduces an in-context purchase without abandoning the reaction flow, returning the viewer directly to a completed send action.

- Project: Qapla
- Format: video
- Stable ID: `embedded-purchase-send-action`
  - Skills: Payments, Interaction design, Mobile design

### [Viewer profile and wallet screens for the mobile app.](https://www.ferdiaz.dev/#mobile-viewer-profile-wallet)

A viewer account and wallet surface combining avatar identity, virtual-currency balance, account controls, and support actions.

- Project: Qapla
- Format: image
- Stable ID: `mobile-viewer-profile-wallet`
  - Skills: Mobile design, Wallet design, Consumer product design

### [Mobile app screens for explore, uploads, and reaction composing.](https://www.ferdiaz.dev/#mobile-app-visual-showcase)

A visual walkthrough of mobile discovery, reaction creation, uploads, and custom meme workflows for a Twitch companion app.

- Project: Qapla
- Format: video
- Stable ID: `mobile-app-visual-showcase`
  - Skills: Mobile design, Visual design, Interaction design

### [Reaction composer for sending memes, GIFs, and TTS on stream.](https://www.ferdiaz.dev/#mobile-reaction-composer)

A mobile composer where viewers choose GIFs, stickers, text-to-speech, memes, and optional add-ons before sending the reaction to a live stream.

- Project: Qapla
- Format: image
- Stable ID: `mobile-reaction-composer`
  - Skills: Mobile design, Composer design, Interaction design