AI agents automate design workflows via Paper and Shopify
Developers are using Model Context Protocol to connect AI agents to design tools like Paper. This human-in-the-loop approach aims to improve output quality by locking in design systems before code generation.
Mike utilizes the design tool Paper, connecting it to his AI agents via the Model Context Protocol to automate UI/UX creation. He describes a workflow where he screenshots design inspirations from Twitter or resources like Mobbin and instructs his agent to build a design system in Paper. For a Shopify store for his brother’s clothing brand, the agent initially attempted to use Framer but was redirected to Shopify, where it connected to his account and redesigned the front end in minutes. Mike emphasizes the importance of human-in-the-loop approval, using Paper’s comment feature to provide specific feedback on fonts, spacing, and logos before the agent generates code.
He references creating a 'gothic' design system for a Bible app and a playful animation for Bezalel, inspired by family.co, noting that this process avoids low-quality generic outputs by locking in high-quality design systems before code generation. Mike argues that using AI agents to create design systems in tools like Paper before generating code yields higher quality results than direct code generation. "You never want to go directly to output... I'm still big believer in human in the loop when it makes sense," Mike said.