Cover Image for Workshop | Build a Landing Page Using Your Design System and Claude
Cover Image for Workshop | Build a Landing Page Using Your Design System and Claude
Avatar for Uxcel Events
Presented by
Uxcel Events
Uxcel's UX and product community. Learn together, collaborate, and create meaningful connections with creatives worldwide.

Workshop | Build a Landing Page Using Your Design System and Claude

Zoom
Get Tickets
Welcome! Please choose your desired ticket type:
About Event

β€‹πŸŽ― For UX/UI designers, product designers, and PMs | 🧠 Beginner | πŸ› οΈ Hands-on workshop | πŸ•’ 90 minutes | πŸ‘₯ 40 seats | πŸ’΅ $100 Standard / $59 Uxcel Pro


​Every AI-generated landing page looks the same. You spend time re-explaining your brand in every prompt, and the output still comes back looking like a generic template with a logo dropped on top. There’s a better way.

​In this hands-on workshop, you’ll take your brand’s design tokens, colors, fonts, and spacing, and turn them into a custom Claude skill that remembers your brand rules. Then you’ll use it to generate a real landing page that looks like your company, not like AI.

​Led by Serg Lotz, founder of webentity.ai, an AI agent platform that builds and runs websites autonomously. Serg brings 16 years of experience in product and web development, builds custom Claude skills for production web workflows daily, and took first place at the OpenClaw Showcase at Merantix AI Campus in Berlin.

​No coding experience needed; just bring a style guide, a brand PDF, or a screenshot of a website. You’ll leave with a working landing page and a reusable skill file ready to share with your dev team.


β€‹πŸ§  What You'll Learn

  • ​How to create a custom Claude skill that remembers and enforces your brand rules automatically.

  • ​How to prompt AI to generate pages that follow your specific design system instead of defaulting to a generic look.

  • ​How to iterate on AI-generated output to progressively refine it to match your brand standards.

  • ​How to package your work into a reusable skill file that you and your team can apply to future projects.


β€‹πŸ•˜ Agenda

  • ​Introduction: Why design systems break when AI builds a frontend, and what's going wrong under the hood.

  • ​Extract brand tokens: Pull colors, fonts, and spacing from whatever brand materials participants bring: a style guide, a PDF, or a website screenshot.

  • ​Build a custom design system skill: Step-by-step construction of a Claude skill that encodes brand rules and keeps AI output on-brand automatically.

  • ​Generate a landing page: Use the newly created skill to generate a real landing page that reflects the company's design system, not a generic AI aesthetic.

  • ​Iterate and refine: See how targeted prompt changes improve fidelity and bring the page closer to production-ready.

  • ​Q&A: Open discussion on edge cases and applying this workflow to specific projects.


β€‹βš™οΈ Format

​Hands-on workshop.

​You can actively work on building a custom Claude design system skill and landing page as you follow along during the session, or simply observe and apply it later.


β€‹πŸ‘€ Who Should Attend

​Experience level: Beginner

​This session is for UX designers, product designers, product managers, and marketers who are tired of re-explaining their brand to AI every time they need to build something. No coding experience is required. We will be using the Claude Desktop app, the "Code" tab inside it, no terminal usage required.


β€‹β€‹πŸŽ™οΈ Meet Your Instructor

​Serg Lotz is the founder of webentity.ai, an AI agent platform that builds and runs websites autonomously. He brings 16+ years of experience in product and web development, and builds custom Claude Code skills for production web workflows on a daily basis. Serg won 1st place at the OpenClaw Showcase at Merantix AI Campus in Berlin.

​He previously ran the OpenClaw for UX workshop with Uxcel, bringing the same hands-on, practical approach that made that session a hit.


β€‹πŸ› οΈ Tools

  • ​Claude Desktop App

    • ​Code Tab/Function (requires Claude Pro subscription)

  • ​Optionally: GitHub account (free)

  • ​Optionally: Vercel account (free)


β€‹πŸ€ Brought To You By

​​​​​​​​​​​​Uxcel is an online platform where UX and product professionals upskill through interactive, gamified learning. Level up your UX, product, and AI skills with expert-led courses at your own pace, earn certificates, and join a strong community of product professionals committed to lifelong learning.

​​​​​​​​​​​​Interested in hosting an event with us? Apply here.

Join our Discord community of 6,800+ UX and product professionals and start connecting today.

​​​​​​​​​​​​Catch up on past events and stay connected with us on LinkedIn, Instagram, and Twitter for more updates!


β€‹πŸ“Œ Notes

  • ​Includes access to the full recording.

  • ​Tickets are non-refundable once the session has started.

  • ​Use Uxcel registered email address when purchasing Uxcel Pro tickets.

  • ​All participants will receive a prompt library and toolkit/framework after the session.

  • ​A Claude Pro subscription is required for the workshop. Please make sure you have access before joining.

Avatar for Uxcel Events
Presented by
Uxcel Events
Uxcel's UX and product community. Learn together, collaborate, and create meaningful connections with creatives worldwide.