How I Turn Workshop Requirements Into ServiceNow Screens With Claude

That screen came out of a stakeholder workshop and a conversation with Claude. Not a wireframing tool, not a template. I summarised the requirements, and Claude built it inside a real ServiceNow design system in Figma. This video is about the middle stretch of a ServiceNow design job. The part between "we ran the workshop and we know what's needed" and "here's a screen a developer can build from". That stretch is where most of the time goes, and it's the part almost nobody shows. Two live builds, both left unedited. First I update an existing case record for a requirement a later workshop turned up: show which member firm a case is linked to. Then the harder one. A screen that doesn't exist yet, built from a single sentence, with no mockup and no reference. Both use the same component library. Both include the parts that came out wrong the first time. Timestamps: 0:00 The screen that came out of a workshop 0:29 What ESM actually means 1:19 Where the time actually goes 1:43 The Figma file before any of this 2:41 The ServiceNow design system, free from the Figma community 3:53 A new requirement: show the member firm 4:58 Briefing Claude with a link to the screen 6:11 The clarifying questions 7:27 The field lands, then I move it to the overview panel 8:38 Catching "member firm: none" on a brand-new case 9:18 Why this pays off on repetitive work 10:06 The harder one: a screen that doesn't exist yet 11:24 The brief, read out as I type it 12:20 Watching it build in real time 13:55 What this changes 15:08 What it doesn't change 15:51 How the setup works 16:36 Garbage in, garbage out 17:20 Try it on the requirements you're sitting on Tools used in this video: → Claude: https://claude.ai → Claude desktop app: https://claude.ai/download → Figma: https://figma.com → The ServiceNow design system is free and open source, available through the Figma community Who this is for: People who design for ServiceNow, or product people at an organisation running it as their ESM platform. You run the workshops, turn them into requirements, then hand a visual design to developers. No coding assumed. Some Figma familiarity helps. ESM gets explained on screen in one sentence. What this doesn't change: The requirements gathering still takes exactly as long as it always did. Messy requirements get you a messy screen, not a good one. Every screen still needs a real design review before it goes anywhere near a developer. What changes is everything after you already know what's needed. Note: the Figma file, the component library and every case shown are a from-scratch generic demo. Fictional requester names, fictional cases, no real organisation and no client work anywhere in it. It's a support-ticket system, not a patient record system. Nothing here is legal or regulatory advice. #ClaudeAI #ServiceNow #Figma