02_SneakPeek_Wealthsimple_AI_Native_Workflow

10 min read

Overview

Danny, a Staff Product Designer at Wealthsimple (a Canadian fintech where premium and trust matter), walks host Jay through his complete AI-native workflow in a live demo. He frames his tool stack as a spectrum between exploring (messy, generative, going wide) and refining (precise, deliberate, narrow). On the exploration side he uses Cosmos, Mobbin, Figma, Paper, and Claude Design; on the refinement/shipping side he uses Conductor, Claude Code, and Codex, connected to the real Wealthsimple codebase. The throughline is a repeatable recipe: describe the design in detail, use the “ask user question” tool to let the model interview you, always start in plan mode, connect via MCP (Figma, Paper), and prototype directly in code so you can share working, feelable interactions. The video also surfaces his team rituals — weekly client research calls, Fig Jam Monday syncs, design crits, and a collaborative, hands-on leadership culture — plus Wealthsimple’s carrot-over-stick stance on AI adoption.

Key Insights

  1. Frame your tool stack as a spectrum between “explore” and “refine.” At one end you’re exploring — messy, generative, going wide. At the other you’re refining — precise, deliberate, narrow. Choosing a tool means asking where you are on that spectrum. (11:08)

  2. Cosmos is a more art-directed, curated alternative to Pinterest. The content on it consistently looks good and matches your query without the ad noise. Great for finding chat-interface references and more like what you clicked on when you scroll deeper. (11:38)

  3. Look outside your vertical for inspiration, not just competitors. He explicitly tries not to over-spend on competitor analysis, because the best ideas come from apps outside your universe. For helping investors find companies/portfolios, he studies merchandising-and-curation experiences like Spotify, Apple Music, or Suno — not other trading apps. (13:56)

  4. Catalog references per project and drop them straight into Figma with annotations. He saves inspiring references into collections, and when one is relevant (e.g., a gradient chat backdrop) he drops it into the relevant Figma file and annotates it (“gradient BG is cool”). (12:26)

  5. Claude Design is replacing Claude Artifacts for Danny. It handles the design-system import, lets you pick wireframe vs. high-fidelity, gives a canvas where you describe what you want and it writes code/outputs it live, produces interactive clickable prototypes, and can branch quickly into many concepts. It’s a fast, throwaway-concept exploration tool — great for quickly learning if an interaction feels right, not for shipping. (0:16, 15:32)

  6. The “ask user question” tool is the single biggest prompting upgrade. Instead of a one-shot descriptive prompt, have the model interview you. It surfaces details you had in your head but never wrote down, captures nuance, and produces much better output — especially when combined with plan mode. He recommends it for nearly everything except simple, confident prompts. (20:28, 42:52)

  7. Always start in plan mode. Plan mode forces the model to think through and tell you what it’s going to do before doing it, and outputs its reasoning. This drives token efficiency, code quality, and the likelihood it builds what you pictured — avoiding rabbit holes and unneeded extras like tests/instrumentation on a scrappy prototype. “I almost never start without using plan mode first.” (42:52, 43:00)

  8. Conductor solves parallel, multi-project work by managing work trees elegantly in a GUI. It wraps the Claude Code CLI, with channels (repos/folders) and workspaces (isolated work trees), so multiple Claude sessions don’t step on each other’s toes. He still uses Claude Code in the terminal, but prefers a GUI with more context (files, diffs) and image viewing over a bare terminal. (0:53, 35:12)

  9. You can mix models and plans across workspaces/tabs. In Conductor you can run Opus 4.8 in one workspace, switch to GPT-5.5 in another, attach saved plans as .md files, have one model review a plan while another executes — and jump between tabs and models. (37:28)

  10. Plan mode + ask-user + Figma MCP = a designer can prototype in real code in an afternoon. For the advanced-trading “mode” transition concept, he designed two states in Figma, copied “link to selection,” pasted both into Conductor, described resting/hovered states explicitly, used plan mode and the ask-user tool, and told Claude to read the Figma selections via the Figma MCP. The result was a working, clickable, animated prototype in code. (39:56, 44:42)

  11. Prototyping in code compresses time-to-productive-feedback, even if build time is equal. Coding/designing it himself took about the same time as in Figma, but the ability to share a real link people can actually use makes the feedback/discussion cycle dramatically faster than sharing a Figma prototype with its caveats. (46:59)

  12. Designers should pre-review their own code to protect engineers’ time. Wealthsimple has a skills marketplace, including a “do code review” skill that spins up eight parallel subagents checking dead code, performance, security, and best practices, returning feedback like a senior engineer would. He runs it before tagging engineers to review his PR, because “anyone can write and ship code now” and engineers are reviewing more than ever. (48:26)

  13. Paper gives designers direct canvas manipulation plus code-accurate output. Everything in Paper is HTML/CSS — it’s all code — so when you ask Claude to build it as a web page, it’s much more accurate with a close one-to-one; no Figma-to-code translation loss. It also has flexible, intuitive image generation you can multitask across. (1:05:21)

  14. Paper is where you break the design system on purpose. Design systems are great but can become a crutch. Working in Paper forces you off the design system, which surfaces patterns you’d never consider; the best designers break the system in ways that don’t feel broken and fold new patterns back in. He uses it for side/personal projects and for “totally uncharted territory” divergent thinking. (1:08:01)

  15. Token-wastage concerns are outweighed by time saved. Cheaper throwaway exploration (a day of cheap concepts) beats three days in Figma; you can copy the code/markup out of Claude Design into Conductor to preserve the shape. Wealthsimple’s stance is a “carrot over stick” — encourage usage, show what’s possible, praise it, rather than limit or enforce it. (27:48, 53:48)

Actionable Techniques

  1. Draw your own explore-vs-refine spectrum and place every tool on it before starting a task, so you pick the right tool for where you are. (11:08)

  2. Start every design prompt with “use the ask user question tool” so the model interviews you for the details you’d otherwise leave out; pair it with plan mode for much better output. (20:28)

  3. Enable plan mode before anything non-trivial — in Claude Design, Conductor, Claude Code, or Paper (shift-tab twice in Paper) — and read the plan for misinterpretations before letting it execute; auto-accept once the plan looks right. (42:52, 1:00:41)

  4. To prototype an interaction in real code: design the two states (resting/hovered) in Figma → copy “link to selection” for each → paste into Conductor → describe each state explicitly → say “use the Figma MCP to read the designs of the selections below” → run in plan mode. (39:56)

  5. Use a work-tree GUI (Conductor or Codex) for parallel projects so isolated work trees keep separate Claude sessions from interfering; switch models per tab and attach saved plans as .md to have one model review another’s plan. (35:12, 37:28)

  6. Run a “do code review” skill (8 parallel subagents) before tagging engineers on a PR to catch dead code, perf, security, and best-practice issues yourself. (48:26)

  7. Use Paper for divergent, design-system-free exploration when going into uncharted territory; edit anything directly on the canvas (no extra prompts/tokens), and use its built-in multitasking image generation. (1:05:21, 1:08:01)

  8. Seek inspiration from outside your industry — e.g., Spotify/Suno curation patterns for a finance discovery feature — and catalog references per project with annotations in Figma. (13:56, 12:26)

  9. Block calendar focus time as a recurring “meeting” in the mornings for deep work — “if you don’t book it, someone else will put something on your calendar.” (7:29, 10:26)

  10. Hold weekly client research calls where every designer talks to a real customer, so the team stays close to actual user problems rather than product echo-chamber assumptions. (24:02)

  11. When shipping, share a video clip (or voiceover) of the working prototype alongside the PR — it communicates the “before → what I’m thinking” far better than a static handoff, and lets engineers review the actual behavior. (57:22)

Tools & Skills Mentioned

  • Claude Design — canvas-based design tool replacing Claude Artifacts; design-system import, wireframe/high-fidelity, interactive prototypes, fast concept branching.
  • Conductor — GUI wrapper around the Claude Code CLI; channels (repos) + workspaces (isolated work trees) for parallel sessions; plan-mode; per-tab model switching; saved plans as .md.
  • Claude Code — terminal agentic coding; used for Paper co-design and in terminal workflows.
  • OpenAI Codex (desktop app) — similar work-tree GUI experience; he uses both.
  • Paper — canvas design tool where everything is HTML/CSS; direct manipulation, flexible multi-task image gen; used mainly for side/uncharted projects.
  • Figma — design system + final precision; “link to selection” + Figma MCP feed states into code prototyping.
  • Cosmos — curated, art-directed UI inspiration (like a better Pinterest).
  • Mobbin — UI/pattern inspiration, per-category (e.g., chat interfaces), starter prompts; used for per-project catalogs.
  • Figma MCP / Paper MCP — connect agents to read designs/references.
  • Ask user question tool — model-driven interviewing of the designer for nuanced requirements.
  • Plan mode — forces model to think through and state its plan before execution.
  • Wealthsimple skills marketplace — including a “do code review” skill (8 parallel subagents: dead code, performance, security, best practices).
  • Clean Shot Pro / Clean Shot X — screenshot + annotate + quick share.
  • Screen Studio — screen recording for sharing flows/interactions.
  • Whisper Flow — voice dictation (hold-to-talk, hands-free mode mapped to an MX Master mouse button).
  • Fig Jam — visual weekly Monday sync for sharing top-of-mind work.
  • Claude models (Opus 4.8, etc.), GPT-5.5 — models he switches between; Wealthsimple mainly uses Anthropic models.

Quotes Worth Keeping

  • “There’s this spectrum — at either end you’re either exploring stuff, really messy, generative, going really wide; or you’re refining ideas, getting more precise, deliberate, and a bit more narrow in focus and scope.” (11:08)
  • “If you have a conversation with the thing using the ask-user-question tool, have it interview you, it’s going to get much more nuanced detail… and you’ll get to a much better output.” (20:28)
  • “I almost never start without using plan mode first… token efficiency and code quality and likelihood of it actually making the thing that you have pictured in your mind.” (42:52)
  • “Plan mode effectively is the equivalent of you and I having that conversation about what we’re going to build before we go and build it.” (44:00)
  • “The speed at which I could have a conversation with people about exactly how it would work and feel is much, much faster.” (47:39)
  • “We’d rather people use the tools and probably use them too much… and get more efficient the more you use them than to limit you out the gate.” (27:48)
  • “Design systems are great… but sometimes they can be a crutch. Some of the best designers I’ve worked with have the ability to break the design system in such a way that doesn’t feel like they broke the design system.” (1:08:36)
  • “When you’re trying to do multiple things at once… Conductor becomes really helpful. It just handles that kind of overhead of managing work trees very elegantly in this UI.” (35:12)
  • “The best ideas are coming from the apps or products or experiences that are outside of your universe.” (14:10)

Graph View

Backlinks