This project reimagines the traditional Dungeons & Dragons character sheet as a modern, responsive digital interface. My goal was to create a visually engaging and highly functional tool that enhances the tabletop experience while streamlining character management. The concept merges the aesthetic richness of fantasy artwork with the precision and usability of digital design systems.
I began by establishing a comprehensive design system and prototype in Figma. Every element from ability scores and inventory slots to spell details and actions was constructed as modular components with multiple states. This ensured design consistency, flexibility, and reusability across different layouts and user scenarios.
By developing a fully structured component library, I was able to create a foundation that could be easily adopted, customized, and scaled by other users or teams. Each interactive state and behavior was considered, providing a realistic sense of responsiveness and immersion for players.
To build the visual world around the interface, I generated original character artwork using Stable Diffusion’s ComfyUI, a node-based AI generation platform. This workflow allowed me to go beyond text prompts, giving me granular control over parameters such as lighting, color balance, and stylistic consistency.
Through this method, I was able to iterate rapidly, fine-tuning each output to match the project’s fantasy tone and cohesive style. The node-based structure gave me the ability to maintain consistent results across multiple designs—an essential factor for building a unified visual identity.
The AI-generated imagery was further refined and composited in Photoshop, ensuring balance between illustration detail and interface clarity. These visual elements were then integrated into the Figma prototype, creating a seamless blend between artwork and interface design.
Figma: Component-based prototyping, design system creation, and responsive layout
Stable Diffusion (ComfyUI): Node-based AI image generation for consistent fantasy artwork
Photoshop: Image refinement, compositing, and final visual polishing
