AI-Generated UI Is Now Actually Used in Practice
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.
