Using Pinterest Mood Boards to Guide Claude Design Systems
AI Summaries (evaluation playlist)go watch the original →
the gist
Avoid generic AI UI by using Pinterest screenshots as visual references for Claude to generate custom design system files and consistent brand assets.
Extracting Design Systems from Visual Inspiration
To move beyond generic AI-generated web aesthetics, use Pinterest to curate specific visual styles. By taking screenshots of UI designs, gradients, or glassmorphism layouts, you provide Claude with a concrete visual baseline. Upload these images to Claude with the following prompt: "Turn this into a design system in a html file and a design md file." This forces the model to analyze the image and output a structured design system, including color palettes, typography, iconography, and component styles.
Applying Design Systems to Web and Content
Once Claude generates the design system files, you can use them as context for subsequent tasks. By uploading the generated .html and .md files into a new Claude session, you can prompt the model to build specific assets, such as a brochure website for a magazine or carousel graphics for social media. Because the model references the previously generated design system, the resulting output maintains consistent branding and aesthetic choices, effectively acting as a curator of your chosen style rather than relying on the model's default output patterns.