AI design tools for Claude Code: a 6-repo AI design tutorial.
Thanks Cline for sponsoring this video! Try ClinePass to access open-weight coding models directly in Cline and get 80% off through this link: https://cline.gg/ailabs80
Community with All Resources: https://ailabspro.io/?v=NZjjmf3I6I4
The Roundup: Our daily newsletter covering the AI stories.
Join now: https://www.theroundup.so/
Got a software idea but don’t have the team to build it? Autometa turns your ideas into production-ready software. Check out https://autometa.dev/yt to see what we can build for you.
Repos in this video
– Awwwards MCP: https://github.com/INSANE0777/Awwwards-mcp
– Responsively App: https://github.com/responsively-org/responsively-app
– Genjutsu: https://github.com/AThevon/genjutsu
– Dembrandt: https://github.com/dembrandt/dembrandt
– Dembrandt skills: https://github.com/dembrandt/dembrandt-skills
– App Store Screenshots: https://github.com/ParthJadhav/app-store-screenshots
– Brag: https://github.com/latent-spaces/brag
What we cover in this video
– Why switching models alone still leaves sites looking AI-generated
– Six GitHub repos that give AI agents more help with AI design, tested on a real landing page
– Skip the AI design course: these repos cover references, layout checks, taste, style guides and launch visuals
AI Web Design With Real References (Awwwards MCP)
– Your agent searches Awwwards, the web design awards site, for real sites to study before the build
– Gets screenshots, reads each site’s design details, and records how pages move
– For AI motion design, we borrowed animation ideas from butter.video, and the final page moved far better than the first version
AI Website Design That Fits Every Screen (Responsively App)
– A Mac app that shows your site at several screen sizes side by side
– Its MCP server lets your agent screenshot each view, fix what doesn’t fit, and check the fix
– Keeps your website design AI-built for laptops from breaking on phones and tablets
Design Taste and AI System Design (Genjutsu)
– Three Claude skills: Cast changes one part of a page, Paint plans and builds a whole page
– Bunshin is a full agent system in one skill: subagents build pages in parallel under a shared style while other agents check the results
– AI system design in practice: it did really well with an illustrative style, less so with a minimal one
An AI Design System Your Agent Follows (Dembrandt)
– Extracts design details straight from a live site and saves them to design.md, a style guide your agent builds from
– Compares scans before and after an edit to catch design changes made by mistake
AI Graphic Design for App Stores (App Store Screenshots)
– Turns real app screenshots into store images in an editor on your computer
– Downloads them in the built-in store sizes as a zip, ready to upload
– Graphic design you can edit again by asking your agent whenever your app changes
Motion Design With AI for Launch Videos (Brag)
– Reads your project and turns it into a launch video of about 20 seconds, with a cover image and a short post
– Full mode uses HyperFrames; Slim mode was built for Opus 5.5 and gives the agent more room
– Slim did far better in our testing, but only with larger models
Which Agent and Model to Design With AI
– We ran everything in Cline CLI, which runs in the terminal just like Claude Code
– We didn’t use Claude AI models here: ClinePass gave us open-weight models that have gotten really good at design
– The repos work with any AI agent that supports their tools, whether that’s Claude Code, Cline or Google Antigravity
– Looking for the best AI for graphic design? Artificial intelligence does better with the right references, not just a newer model
Chapters
00:00 Intro
00:44 Awwwards MCP
03:18 Responsively
04:22 Genjutsu
05:52 Dembrandt
07:12 App Store Screenshots
08:14 Brag
#Claude #ClaudeCode #ClaudeAI #ClaudeSkills #artificialIntelligence #graphicDesign #GoogleAntigravity #aiDesign
