6 Insane Trending GitHub AI Design Repos You Need to Use

10:213 min readAI LABS10/17/2026Computing/Software · Advertising/Marketing · Internet Technology

Key Takeaway

Integrating specific GitHub repositories and design MCP tools gives AI agents the structured style references, multi-device testing, and promotional generation needed to avoid generic AI layouts.

Highlights

  • Awards MCP allows AI agents to study real web design award winners for layout and animation inspiration before building.

  • Responsively connects an MCP server to an AI agent so it can automatically check and fix multi-device screen layouts using screenshots.

  • Genjutsu introduces specialized agent skills like casting, painting, and a multi-agent system called bunchen to build multiple pages concurrently.

  • Dembrandt extracts precise design details and styles from existing web pages and saves them into a design.md file as a style guide.

  • App Store Screenshots transforms real app screenshots and icons into downloadable store marketing graphics across iOS, Android, and Mac sizes.

  • Bragg turns a project or landing page into a promotional launch video of about 20 seconds using full and slim modes.

Timeline

  1. Design Inspiration and Awards MCP

    Relying solely on default agent behaviors often results in repetitive, generic AI-generated aesthetics. Giving agents access to design award repositories allows them to analyze high-end visual references, select appropriate animations, and apply them directly to new landing page builds.

    • Awards MCP enables AI agents to search award-winning design websites for style references and screenshots before building.
    • The tool provides browser access to record page layouts and movements from real references.
    • Open-weight models accessed via Kleinpass provide cost-effective alternatives for web design tasks.

  2. Multi-Device Layout Testing with Responsively

    Websites that look polished on a desktop laptop screen frequently break on smaller mobile devices or tablets. Connecting a multi-view screen app directly to the agent workflow enables automated screenshot verification across device viewports and real-time layout corrections.

    • Responsively opens site links in a Mac application to display multiple screen sizes side by side.
    • The Responsively MCP server lets the AI agent inspect views and automatically fix layout issues after a build.

  3. Agent Styling and Multi-Agent Systems with Genjutsu

    Standard agent design styles can become predictable over time without injected human design taste. Multi-agent sub-systems delegate page building across separate helper agents while a lead agent maintains design consistency and manages error-checking revision loops.

    • Genjutsu provides specialized skills like cast for single edits and paint for full page planning.
    • The bunchen skill creates a sub-agent system where multiple helper agents build different pages simultaneously under a shared style.

  4. Design Extraction and Style Guides with Dembrandt

    AI agents frequently have to guess fine design details like precise spacing and typography during builds. Scanning live reference sites and saving their layout rules into a dedicated markdown file prevents agents from drifting away from the intended style during later edits.

    • Dembrandt opens live pages in a browser to extract precise styles, spacing, and design details.
    • Extracted specifications are saved in a design.md file to serve as a persistent style guide during subsequent edits.

  5. Generating Marketing Assets with App Store Screenshots

    Creating marketing assets for mobile application stores requires structured visual framing around raw screenshots. Automating this process through an agent-driven editor saves manual design work across iOS, Android, and Mac platforms.

    • App Store Screenshots converts raw app screenshots and icons into polished store marketing graphics.
    • The agent sets up a local desktop editor application to design and export final image bundles in standard device sizes.

  6. Automated Launch Videos with Bragg

    Getting users to adopt a product requires clear demonstration of its utility alongside standard code generation. Bragg compiles app features into a short 20-second MP4 video file complete with a cover image and accompanying social post text.

    • Bragg reads a project codebase or landing page to automatically plan and generate a promotional launch video.
    • Full mode uses hyperframes with strict steps, while slim mode gives advanced models like opus 5.5 more creative flexibility.

Description

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: http://ailabspro.io 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

Write about this video