AI-Generated UI Is Now Actually Used in Practice

AI summary focused on the core points of the original article.

Read original

Background and problem awareness

Role transition: Sparta’s product organization removed the distinction between PMs, designers, and developers and shifted everyone into the PE (Product Engineer) role, creating a need for an environment where non-designers could directly produce UI design with AI.
The limits of Figma: The existing Figma environment did not perfectly match the code, lost specifications, and created high token costs, making it unsuitable for AI to read and edit.

Solution: skipping Figma and prototyping directly in code

Direct code implementation: Instead of going through Figma, the team built a `/ui-prototype-generate` skill that uses Claude Code to implement prototype design and behavior directly in the development environment.
Isolated demo environment: To avoid affecting existing code, work and validation were designed to happen only inside an independent `prototype` folder.

Three strategies for quality control

Transplanting a designer’s perspective: The team documented and taught the AI the design system spec (`STACK-Spec`) and UX/UI decision principles (`Design-Principle`) to improve the unnatural design patterns typical of AI.
Repository-based analysis: The skill scans the actual target code repository so it can reflect the product’s existing context and latest policies.
Introducing a seven-step standard process: The process fixes a sequence of planning confirmation → information supplementation → mode branching → isolated analysis → UI strategy proposal and approval → implementation → result sharing/storage to produce validated outcomes.

Results and implications

Practical use: Starting with an AX hackathon, the skill is now actively used for real feature prototyping, including app bottom sheets, resume feedback highlighting, and learning dashboards.
Making values explicit: The importance of writing down design values and principles that previously remained tacit has grown, and as UI production becomes easier, the core capability becomes the sense for defining and solving good problems.

XPLORED View

This case shows that in the AI era, design systems are expanding beyond component libraries into operating systems that place product context and decision principles next to code.

Good situations to read it in

When you want non-designers to create UI prototypes that still fit the product context
When you want to rethink the division of roles between Figma-centered collaboration and code-based prototyping

Key takeaways

Once AI can make UI, the more important asset is not the screen itself, but the documented criteria that help it judge what makes a good screen.
Isolated experiment environments and approval steps need to be designed together so AI prototyping can connect safely to real product code.

Read original

This article is summarized and interpreted by XPLORED based on publicly available original sources and related materials. Rights to the original source and materials included in it belong to their respective rights holders. If a rights holder requests a correction or removal, we will review and respond promptly.

Get the week's signal by email, every Saturday.

A short read on the tools and articles added that week.