{"id":19983,"date":"2026-05-27T18:12:34","date_gmt":"2026-05-27T18:12:34","guid":{"rendered":"https:\/\/slack.design\/?p=19983"},"modified":"2026-05-27T18:13:04","modified_gmt":"2026-05-27T18:13:04","slug":"designing-where-the-pixels-actually-live","status":"publish","type":"post","link":"https:\/\/slack.design\/articles\/designing-where-the-pixels-actually-live\/","title":{"rendered":"Designing Where the Pixels Actually Live"},"content":{"rendered":"

For most of my design career, Figma was where the real work happened. I’d design screens, build prototypes, then hand off the designs for someone else to build. If something felt slightly wrong in production, we’d go back and forth trying to articulate what “it should feel like” in words. This process worked well enough, but there was always a gap between what I could show in a static design tool and what someone would actually experience in the product.<\/span><\/p>\n

That gap started to feel especially wide when I began working on the search functionality in Slack. Using AI tooling has finally helped me start to close it. Not in some dramatic overnight shift, but through a gradual realization that I could work much closer to where the pixels actually live. This is my honest, ground-level account of what adopting AI has looked like in practice so far: the tools, the workflow changes, and the questions I’m still figuring out.<\/span><\/p>\n

The shift to code<\/b><\/h2>\n

The search experience in Slack is a deeply keyboard-driven feature: typing states, focus management, the way content scrolls and reflows as you interact. These are things you can sketch in Figma and even prototype to a degree, but a Figma prototype can’t tell you whether the focus ring moves correctly between elements when you press tab, or whether a scrolling gradient feels right as content overflows. You need to actually use it.\u00a0<\/span><\/p>\n

For interactions this nuanced, the gap between a static mock and the real thing isn’t just inconvenient \u2014 it changes the quality of the conversation you can have about the design. I needed something people could actually type into, tab through, and respond to in real time. That meant moving into code.<\/span><\/p>\n

More accessible than you’d think<\/b><\/h2>\n

I came into this with basic HTML and CSS \u2014 enough to roughly understand what I was looking at, but not enough to write it myself. That turned out to matter less than I expected. The first time I described a focus interaction in plain language and had a prototype working in minutes, I stopped thinking of code as someone else’s territory. Things I wouldn’t have known how to code myself \u2014 like keyboard navigation or making sure focus moves the right way when you tab through results \u2014 I could just describe and the AI handled the technical side. It’s still designing, just in a different medium. The barrier was genuinely lower than I expected.<\/span><\/p>\n

My setup is fairly straightforward. Cursor is my main environment. I use Figma’s MCP integration to pull in components I’ve already designed and Slack’s design tokens, so I don\u2019t have to rebuild spacing, color, and type from scratch every time. I tried working directly in Slack’s codebase \u2014 years of accumulated complexity that made every small change feel like a bigger undertaking than it needed to be. A lightweight HTML and JS prototype I could host and share turned out to be all I actually needed at the exploration stage.<\/span><\/p>\n

How my day-to-day has actually changed<\/b><\/h2>\n

Today, I\u2019m mostly working in Cursor rather than Figma. I’ll still use Figma when I need to explore something visually from scratch, but the real iteration happens in code. Cursor’s design mode, combined with inspecting and editing CSS directly, feels a lot like using DevTools, which makes the transition surprisingly natural.<\/span><\/p>\n

Slackbot has also become a real part of how I design. A lot of decisions, especially around accessibility and keyboard patterns, live in past conversations in Slack. Before I start building something interaction-heavy, I’ll ask Slackbot to surface relevant discussions, then paste what it finds directly into my Cursor prompt as context. That loop of pulling institutional knowledge and applying it directly to code has become one of the most useful parts of my workflow.<\/span><\/p>\n

Everything I build gets deployed to GitHub Pages, which has become my living design workspace. Engineers and PMs can open a link and try things for themselves \u2014 and see not just where I landed but how I got there.<\/span><\/p>\n

My honest account<\/b><\/h2>\n

As I\u2019ve adopted AI, there have been real wins. A multi-line text interaction came up in a Slack discussion with another designer and a frontend engineer. We landed on three possible directions, and I had all three prototyped by that afternoon. When the group later met, we had a focused real-time conversation instead of another drawn-out, asynchronous discussion. That’s the collaboration pattern now: less back and forth, faster alignment, because the prototype is right there.<\/span><\/p>\n

The same was true for the quick switcher’s entrance animation. Once we moved it to a centered modal, we needed it to feel snappy but not abrupt \u2014 if the animation was too slow, it would feel like the whole thing was lagging. That balance is almost impossible to land in a static tool or nail down in a description. I iterated through a few variations in Cursor until it felt right, brought them to the team to decide together.<\/span><\/p>\n

But working with AI hasn’t all been smooth. The biggest adjustment has been learning to work in smaller increments than feels natural. Early on, I’d input multiple changes at once \u2014 the model would get confused, or produce something technically functional but hard to verify. Breaking work into smaller pieces helped, but created its own overhead: after every change, you have to stop and test everything before moving on. You end up keeping a running list of pending changes and feeding them in one at a time.<\/span><\/p>\n

AI also doesn’t always preserve what you’ve already built. You prompt it to change one thing, and it quietly breaks something else. If you’re not testing after every turn, you won’t notice until you’re sharing the prototype with someone \u2014 or worse, presenting it \u2014 and that’s when you realize something’s broken.<\/span><\/p>\n

There’s also the context-switching. AI runs in the background while I move on to other tasks, which sounds efficient until I come back and need to fully re-orient before I can prompt anything useful. I genuinely don’t always know if I’m saving time or spending more of it. But the comparison isn’t really \u201cAI versus a faster method.\u201d It’s \u201cAI versus a workaround that probably wouldn’t have felt real enough to be useful.\u201d<\/span><\/p>\n

I’m somewhere between excited and cautious about all of this change. The work feels more fluid and flexible than it ever has. An AI-first mindset, for me, isn’t about mastering a fixed set of tools. It’s about working in a way that’s closer to the real experience, even if it’s messier. I’m not sure where this lands yet, but right now I’m designing things I can actually use, and that already feels like a meaningful shift.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

For most of my design career, Figma was where the real work happened. I’d design screens, build prototypes, then hand off the designs for someone else to build. If something felt slightly wrong in production, we’d go back and forth trying to articulate what “it should feel like” in words. This process worked well enough, […]<\/p>\n","protected":false},"author":334,"featured_media":19986,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[389],"tags":[],"yst_prominent_words":[],"class_list":["post-19983","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-we-work"],"acf":{"authors":[{"author_name":"Fulya Lisa Neubert","author_title":"Senior Product Designer","author_location":"","author_avatar":"https:\/\/slack.design\/wp-content\/uploads\/sites\/8\/2026\/05\/E7T5PNK3P-U07CKFM9BL1-35735c7a8588-512-1.png","author_twitter":"","author_answer":[]}],"is_featured":true,"image_credit":"","image_credit_url":"","author_signoff":"Take care,"},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/slack.design\/wp-content\/uploads\/sites\/8\/2026\/05\/Slack_pixel_Fulya_art__Article_800X800-1.png","_links":{"self":[{"href":"https:\/\/slack.design\/wp-json\/wp\/v2\/posts\/19983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/slack.design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/slack.design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/slack.design\/wp-json\/wp\/v2\/users\/334"}],"replies":[{"embeddable":true,"href":"https:\/\/slack.design\/wp-json\/wp\/v2\/comments?post=19983"}],"version-history":[{"count":5,"href":"https:\/\/slack.design\/wp-json\/wp\/v2\/posts\/19983\/revisions"}],"predecessor-version":[{"id":19991,"href":"https:\/\/slack.design\/wp-json\/wp\/v2\/posts\/19983\/revisions\/19991"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/slack.design\/wp-json\/wp\/v2\/media\/19986"}],"wp:attachment":[{"href":"https:\/\/slack.design\/wp-json\/wp\/v2\/media?parent=19983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/slack.design\/wp-json\/wp\/v2\/categories?post=19983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/slack.design\/wp-json\/wp\/v2\/tags?post=19983"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/slack.design\/wp-json\/wp\/v2\/yst_prominent_words?post=19983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}