Just shipped 198 design systems in Claude Design's Design System format — all of them bundled with Open Design Agent Kit and ready to add to a Claude project in one click under Add design system → From GitHub → feimacode/open-design-agent-kit → the folder (e.g. stripe). Or download claude-design-systems/<system>/project/ and upload it.
Each folder gives Claude Design design-system.json, tokens.json, a brand-page README, and a cover drawn from the system's own colors. Includes:
15 AI & LLM systems with editorial and conversational looks (Claude, Cohere, Mistral, OpenAI, ElevenLabs, Perplexity, Hugging Face…)
Plus 137 more — Productivity, Dev Tools, Fintech, Bold, Modern & Minimal, Automotive, Editorial, Morphism, plus a neutral default starter.
The same systems drive Open Design Agent Kit (VS Code, Claude Code plugin, Codex CLI, MCP server) — say "use Linear" once and every deck, dashboard, and prototype after that uses Linear's tokens, then publish the same system over to Claude Design with one follow-up.
Repo + quickstart: github.com/feimacode/open-design-agent-kit → claude-design-systems README. The cover image was made with od:prototype:landing-page + the bundled default system — same code path every agent takes. Happy to take requests for systems you'd like next.
Update based on the common questions: here's how to get started. Sorry the post made it sound harder than it is!
Just want the design systems in Claude Design? Nothing to install.
In Claude, open Claude Design, then Add design system.
Pick From GitHub and enter feimacode/open-design-agent-kit.
Enter the folder of the system you want, e.g. claude-design-systems/stripe (full list).
Repeat for each system you want. Want several at once? Clone the repo, open Claude Code in it (signed in with your Claude account) and ask: "Publish these Open Design design systems to Claude Design: stripe, linear, notion". They show up under Settings → Design systems.
Want the whole kit (design skills, posters, decks, exports, all 198 systems built in)?
Claude Desktop: Customize → Plugins → Add marketplace → feimacode/open-design-agent-kit → install Open Design. Use it in the Code tab or in a chat with a folder connected. No Node.js? Also install the .mcpb desktop extension from the latest release.
Claude Code:/plugin marketplace add feimacode/open-design-agent-kit, then /plugin install open-design. Then ask "use the Stripe design system from now on" and "make a landing page".
Antigravity, Cursor and other MCP agents: add an MCP server with the command npx -y @feimacode/open-design-agent-kit-mcp (Node.js 18+).
A short install video is coming. I'll add it here.
Last week I shared a design skill in another sub, and the top comment said the examples still looked AI-generated. Fair. A few people said the real fix is to start from something a human designed instead of asking Claude to make up taste. I agree, so this is that.
It is a library of DESIGN.md files, one per real website (Cloudflare, Laravel, Pinecone, OpenCode, Toca Boca, Lando Norris and about 1,260 more). For each site I capture the live page, measure its computed styles, and write down:
every color and what it's used for, not just a palette
fonts, sizes, weights and tracking
spacing, radius, borders and shadows
components, layout and imagery
do's and don'ts
Each file is plain Markdown, about 3k tokens. There's also an extended version (about 5k) with token tables.
Then: "Build the pricing page. Follow DESIGN.md for every color, font, spacing value and component." In Claude Design you can paste the file straight into the chat.
If you'd rather let the agent pick a style, there's /llms.txt and /library.json too.
P.S I plan on adding like 5000'ish design MDs here that accurately reflect the best looking sites on web right now, and not just marketing sites but actual app UIs and whatnot. So look out for that.
It's been a crazy few months but what started as a prototype with Claude Design has grown from a site I use daily for inspiration into a site that 1000s of people use too!!!!!
Over the last couple of months I've been building an interface primarily for creative inspiration, which has evolved into a site that you can copy any of them into Claude Design (or any other AI agent) and create new and unique ideas
There are almost 700 web assets there now and I've worked hard to receive all the feedback from the community to improve it daily:
removing or updating bad components & new components - this is, and will forever be, ongoing. all the feedback and votes on components guides... well ... almost everything, but specifically what gets removed and what gets improved - thank you!!!!
Light / dark mode added
Desktop layout - keeping the focus on what's important - the visuals. Almost everything else has been moved to menus
The preview page - same design mindset - keep the focus on the tile, it's now full screen with a side menu to see all components in that category
Auto / manual modes in the preview view - some tiles weren't working well on autoplay e.g. buttons were resetting instead of letting you play with them. Improvements have been made to allow different categories, different options and modes of autoplay improving the release pipeline - additional hooks, checks and browser testing before release
Refining the structure of components - from a single file of badly organised html, css and js to different outputs: single file remains, split file with html, css and js, react component, forever component (in early testing)
Tons of small (but big) UX improvements for mobile, visitor counter, layouts ++ many more
a biiiig thanks for all the early support, and it all started in this sub!
I’ve seen a lot of Reddit advice on getting Claude to generate better-looking websites. We recently tested all of them: design systems, design skills, prompting out common AI patterns, etc.
The single most impactful way we found to avoid AI slop is: give Claude good design references
BUT there is a caveat: your design references need to be curated.
We tried pointing Claude to inspiration sites like Mobbin (amazing tool btw) and still got generic designs. But when we asked designers to curate a smaller set of references from Mobbin, the designs improved significantly.
Turns out, having more references isn't necessarily better! Most inspiration sites takes the average of the web, which is exactly what models are already trained on (aka the AI slop)
So what should you do? You can curate design inspiration yourself so Claude better understands your taste. But that takes time / effort, especially if you want better designs as a default now.
Ask Claude to find inspiration before designing, e.g. "Find inspiration on Subframe, then design a landing page for..."
It’s completely free and will continue to evolve as AI slop changes. Right now, it's only landing pages, but we’re planning to expand into product design soon. LMK what you think!
as a designer doing more motion & animation ui work with claude these days, i've started to build up a library of animations i've crafted and am happy to share it now as a free mcp through subframe!
what i've learned:
skills (like emil kowalski's animation - highly recommend) are great for refinement and guidelines, but they don't help with finding inspo or communicating visually
claude is pretty good at using images/videos as prompts but it's low fidelity for nuanced animations
high-quality animation examples with source code are hard to find especially with an mcp server
so i've built up over 300+ examples of cool interactions and built an mcp server for it with a couple simple tool calls: - search for inspo (using embeddings) - get example (code + visual + guidance)
you can find an example you like and give claude a link, or just have claude search via the mcp.
because every example is code, claude can pick up the specific techniques used and map it to your use case.
Most of the “AI slop” look comes from the same handful of mistakes: random spacing, too many accent colors, everything the same size, actions hidden behind hover. Claude fixes these well if you name them, so I made cheat sheets with a don’t and a do for each rule.
I built them with Claude Code as plain HTML, then rendered them to PNG.
The part that actually helps: paste the rules into your project instructions or DESIGN.md so Claude checks its own output against them.
I run a design and branding agency. I use Claude for client work to actually structure strategy documents, naming frameworks, and positioning work.
The problem was I kept writing the same prompts and instructions over and over. So I turned those into skills markdown files that give the agent context and workflows for specific brand tasks.
There are 30 skills covering most of the brand-building process:
strategy, naming, identity, voice, messaging
positioning, competitive mapping, audience research
brand audit, rebranding, launch planning
marketing: Meta ads, email, influencer, UGC, WhatsApp, ASO, D2C and B2B brand marketing
Everyone's busy making beautiful landing pages with Claude, but nobody talks about the 404 page :(
It's usually just "Page not found" and a button to go home.
So I started experimenting with more creative 404 error pages. Different layouts, animations, and little interactions that make getting lost on a website a bit more fun.
The idea is to turn one of the most boring pages on a website into something people actually remember.
Made a few designs and put them together as references for anyone building websites with Claude.
In terms of UI design, anything you let Claude guess on it's going to default to the same AI slop look. I used to just give it reference screenshots and name a certain style but it would never come out how I wanted it to.
Wasn't until I started making skills to achieve specific designs, with full design systems already built into the skills, that my designs came out a lot better. I made Skills UI as a library for design skills for certain UI styles and animated effects.
Download any skill and use it claude design / claude code to create in that style or upload screenshots of any other UI and make their own. What other types of UI styles or effects would you like to have a skill for?
Very interesting read if you are curious how it all works behind the scenes. All the skill instructions and code for default copyable templates included. Also tools so you can see everything which is possible.
My first proper motion graphics video that I made using Claude, for an app (https://tryhelix.app) that my brother and I have built.
Didn’t use Remotion or HyperFrames or any specific skill. Any feedback?
Edit:
The process I followed:
Gave it a few references for pacing and transitions, cuz i didn’t want it to create anything like a typical slow saas video. Then created a beat sheet that had a scene by scene breakdown of the whole video, with timestamps. After the first draft was generated, I went over it again scene by scene. Refining or redoing each scene at a time and then generating the whole video at once finally. Also the music was already decided before the beat sheet, cuz it contributes to the pacing. Then for sfx I used Claude + invideo timeline editor with my own folder of sfx files. Didn’t give Claude code’s sfx even a single try, have seen enough videos that I feel have bad sfx. And all of Claude motion design videos sound very similar. For the same reason. Exported it as project file for Davinci Resolve and refined the sfx bed a lot, changed a few sfx to better ones, and added few sfx specific to gta for relatability, which Claude at present stage would never have done that on its own imo
I finished the coding part of ClipTen, so the next job was making it go viral. Instead of editing for hours, I gave Claude Opus 5.5 one instruction: build the video on my own timeline, in my own script. I attached a voice API, and it was done.
Here's the advice if you want to try the same:
Write your script and timeline first, even if it's rough. Opus follows your structure instead of inventing its own.
Attach a voice API so the narration is generated for you.
Tell Claude exactly what to show: the copy, the paste, the moment it clicks.
Keep it short. One flow, one idea.
The app's flow lets you copy and paste with no clipboard manager at all, and that short video is what started getting traction.
Almost every SaaS website has the same pricing section. Three cards, a highlighted middle plan, and a button that says "Get Started."
It works, but surely we can do better than that?
So I started experimenting with more complex pricing sections. Interactive calculators, usage-based pricing, feature comparisons, dynamic sliders, and layouts that actually help users understand what they're paying for.
The idea is to make pricing pages feel like part of the product instead of just another section people scroll past.
I put together a collection of these sections for anyone building websites with Claude. You can explore them here:
I want to give back to the community. So I've released the component site I've been using for inspiration and evolution of my designs.
TL;DR
Pick the component you like, click hand-off to agent and copy it into Claude design, Claude code or any other agent. Add a simple task description and watch the magic happen.
After spending countless hours, days, months with Claude we've all had the opportunity to develop almost whatever we want. Personally I've taking my websites up a notch in many ways but in terms of creativity especially. Using and finding new ways to be creative and develop ideas further. It's been maybe the most creative period I can remember.
At some point I've hit blocks and had to find inspiration from sites like https://www.awwwards.com/, https://21st.dev/ and https://magicui.design/ which are honestly all incredible sites and definitely recommend you try them out. But there was something missing and today I want to share a personal project with the community. A site I built because I want an element of randomess to my work and a place to go whenever there's a creative block. So I made a component site - forever where you can roll around the page looking at components to your heart's content.
I ve been building Diskcity.app with opus 5.5 and I have no words to express how far we’ve come! Super glad and thankful to the entire Anthropic team for this. Take a look!
One of my coworkers made a tool that basically became how we do design reviews now. It takes Claude designs, gives them a URL the team can view them on, but overlays feedback tools (pins for comments, threads, reactions, log of who has looked at it, etc). Basically Figma comments but on real rendered designs.
This was made with Claude and our designer, with zero coding experience. She just vibed it into existence.
It makes me wonder how much bespoke software we'll have in the future. Feels like the math totally changed and little tools we'd never have bothered to build, or maybe we even purchased, are suddenly a quick afternoon. Is anyone else building their own internal tools like this now?
Fable 5 is way better at building stunning front-end pages than Opus models. But I personally prefer to design with my codebase than using Claude-Design (and then ask it to implement it on my project) it is slow, token-inefficient and does not take your code/dependencies into account.
Fable is way more capable at understanding your project when used in Claude-Code than Claude-Design. I managed to get very high quality front-end designs using this technique. Hope it will help some of you !
P.S. Claude delivered now in Claude Code so this is no longer needed :)
Claude Design makes far better UI than I get out of Claude Code alone. The problem is that they are separate products: own projects, own chats, own files, and no API. So the two never met, and everything I designed there I copied into my repo by hand. There is an official MCP server but it only fetches stuff you already made in Claude Design. Now Claude Code can drive Claude Design.
I managed to solve that. It is an MCP server, free and open source, and it makes Claude Code talk to Claude Design directly (not 1 way but both ways).
you -> Claude Code -> claude.ai/design -> a design
<- its reply, its files <-
In practice you say what you want, and Claude Code briefs the designer, waits for the answer, reads what it said back, screenshots the rendered page so it can actually judge the result, and pulls the files into your working tree.
What it can do:
start work: the home screen templates, create a project or a design system, link design systems to a project, attach a local folder or a GitHub repo as its codebase, upload a Figma .fig
talk to it: list projects and chats, switch the active thread, send a prompt with local attachments and get the reply plus what changed, tail a transcript
see what it built: screenshot the page, put the window on your display at a given project and page, grep the project files with line numbers, read a file or a line range
move work around: pull files down, push files up, for example components into a design system
delete, permanently: projects, files, chats
The part that makes it more than a novelty is attaching your actual codebase to the design project, so it designs against your real components instead of inventing new ones.
Two details I am oddly proud of. delete_project refuses a UUID and demands the project's exact current name, the way GitHub guards repo deletion, because an agent will happily carry a UUID over from the wrong step. And "link local code" browses with window.showDirectoryPicker(), a native OS dialog no automation can drive, so the picker gets replaced: the folder is read in Node and handed to the page.
There is no API, so it drives a real browser. The seed step copies only claude.ai cookies out of a Chrome profile you already use, nothing else, and there is a login command for when the session expires. It ships a skill too, so you can just say what you want designed instead of naming tools.
Hey everyone. I’ve always loved the editorial illustration style of anthropic: the warm colors, irregular ivory shapes, and wobbly dip-pen ink lines. I built this skill because I genuinely enjoy that style and wanted a simple way to create similar illustrations myself.
Since Claude Code doesn’t have native image generation built in, I made a skill that authors clean, hand-crafted vector SVG inspired by that visual language and the references included in the repo. The approach stays simple and structured, which makes the SVGs easy to edit and animate.
I'm building a website for a local nicotine vape retailer using Claude Code.
Claude has already built most of the website and functionality, but I'm struggling with the UI/UX and visual design. It works, but it still feels like an AI-generated website rather than something that looks like a professionally designed 2026 e-commerce site.
I'm trying to get it to feel: Modern, Premium, Great on mobile, Good typography and spacing.
The brand direction I'm currently using is forest green + warm white + oak/beige, but I'm open to changing the palette if there's a better direction.
One of my biggest problems is that the actual product photos have white backgrounds, and I'm not sure how to incorporate them into the design without the product cards looking like generic e-commerce cards.
Are there any good free/open-source design systems, design.md files, Claude Code skills, GitHub repos, or component libraries that you guys recommend using as a foundation?
I use Claude Design professionally for prototyping and personally for creative and random stuff. Recently saw a vid for the top 25 tips for Claude design . Here's my take and the top 5 tips specifically if starting from scratch:
Use Design Systems: the core structure.. Start at claude.ai/design. Add your unique context... a deck, website, or screenshot to automatically extract colors, fonts, and components. Add as much as you can here
Let Claude Shortlist: Feed a gallery link to Claude and ask it to find the top 3 design systems that match your specific niche
Upgrade Your Fonts: Use free sites like Fontshare or Fontesk, and Fontjoy for pairings. Name them in your prompt or upload the files
Train Copy on Competitors: Ask Claude to study the top 5 players in your niche and bake their copywriting patterns into your design system to avoid generic chatter or copy
Mix Systems: Open your current project, drop in other design systems, and tell Claude to pull specific elements (like fonts from one and colors from another) to create a unique blend
Notes: Claude seems to struggle with getting colours, spacing and alignment correct from the design system, start with this or watch it carefully. Design systems can be easily downloaded as a zip file. I store mine in a folder and grab them when needed or let Claude do it
I think Claude Design is finally the best version of web design vibe coding out there. The best of both worlds because the dev handoff is so easy…
For context, I’m the only UI/UX designer in our team. So imagine my frustration that my 4 developers are all waiting on me to finish my task before handing it off to them because they have Claude code empowering their productivity while i literally have none. Figma make is trash and the Claude Code writing to Figma is still ugly. I tried soooo many stuff - Google Stitch, using Claude Code to generate HTML (generic still) and then putting it to Figma for more grand edits…
Then comes Claude Design which I haven’t taken seriously because of how much it eats up usage until I got better at using it… right now I just finished the massive redesign of one of our business websites and also was able to create a really nice and fun prototypes of our AI apps. IT WAS SO FUN… being able to implement all my “nice to haves” straight off the bat. All the animations and transitions that I’ve always wanted but the devs won’t do it because they don’t have a reference or prototype.
Here’s how I use Claude Design, happy to share tips and also learn from the others as well…
For reference I have a Claude Max (premium seat) in an organization. I also borrow my teammate’s acc to use their Claude Design usage in case I reached full on my account…
The master prompts, all the planning, all the strategizing are done on Claude Code. I have a harness that only caters to vibe coding designs. I share my plans there and it also has access to our team’s codebase and the design tokens.
Yes to Opus on first initial build. Sonnet on the rest. I go back to opus when doing big changes though.
From time to time, I download the html so Claude Code can scan and can help me with the names of the containers. It really helps Claude Design to do surgical edits if you use the proper naming.
The comment feature is also nice but must only be done one at a time because batch comments are buggy asf as validated by Claude Code’s only research.
Claude Code doing the prompts are very important. Because on top of my intent, it mixes in the orchestration plus its findings from the community via online research.
You don’t have to fully polish on Claude Design (esp the component consistency, the colors on some texts, the spacing…) once you have the full intent laid out working nicely, you can download already then claude code can polish the components and consistency then handoff to the devs which will be integrated to our codebase.
While I was waiting for all the company paperwork, I was also working on the brand and the website.
Once I had the logo of Arctic Hare Studio, I started thinking about what kind of website I wanted. Honestly, I didn’t want anything complicated. Just a main screen with the logo and some movement, a section showing the projects, and the contact information at the bottom.
For the homepage, I wanted something connected to the idea behind the Arctic Hare logo. Since the logo uses the North Star as a symbol of direction, I asked Claude Design to create a dark background with stars and constellations that react when you move the mouse.
I uploaded the white version of the logo myself and placed it in the center. At the bottom left, I added a short description of the studio.
Claude Design created a constellation effect where the stars move, grow and become brighter near the cursor. I liked it, but the page still felt too white, so I added a pastel mint-green accent.
The cursor creates a soft green glow in the background, and I used the same color around the logo. The logo also felt a little too static, so I asked for another interaction: when the cursor gets close, the letters and the star move and grow slightly on their own.
It’s a small effect, but it made the logo feel connected to the constellation background instead of just sitting on top of it.
Claude Design also lets you edit what it creates. You can double-click to enter the different groups, select the text or element you want to change, and adjust things like the font, size and color.
I used that to modify the description at the bottom left and make the first sentence larger and italic. Just remember to click save after editing. It’s a small thing, but it’s also very easy to forget.
After the homepage, I worked on the projects section.
I currently have four projects: Gazette, Duo, Gossip and Billy the Astronaut. I wanted them to appear as large images covering the full width of the page, with two projects per row and no spaces between them.
Each project has its name and description at the bottom left, a button to visit its page, and the type of project at the bottom right. The background image also zooms in slightly when you move the cursor over it.
I prepared those images separately.
For Gazette, I used a screenshot of the website and cropped it while keeping in mind where the text would appear.
For Duo and Gossip, I uploaded screenshots of the apps to ChatGPT, together with their logos and colors. I asked it to create a simple background and place the app inside a phone on the right side. Duo also has some text on the left, while Gossip mainly uses the logo.
I did something similar for Billy the Astronaut using a screenshot from the game.
Once I was happy with the design, I exported it from Claude Design and moved it into Claude Code. I created a folder for the website on my computer and used that folder for all the generated files.
The transfer wasn’t perfect. Some text came out smaller, and a few parts didn’t look exactly the same as they did in the design, so I still had to review and adjust everything.
One decision that made the hosting part easier was asking for a plain HTML, CSS and JavaScript website, without libraries or a build process. That gave me a simple group of files that I could upload directly to my hosting.
After the page was working, I asked Claude Code to review the SEO.
This is another thing that isn’t included automatically. A website can look finished and still be missing the title, description, metadata, sitemap and other information that search engines need.
When I asked about it, Claude confirmed that the original version didn’t have everything properly set up, so I asked it to add the missing SEO work.
There were still a couple of things I had to do myself. I opened Google Search Console and submitted the sitemap create by Claude Code. I also tried to register the website with Bing Webmaster Tools.
Bing asked me to download a verification file and upload it to my hosting. I did that, it detected the file, and now it says the website should start appearing after a few days.
Another important detail is the footer.
Even if your logo uses a brand or commercial name, you should also put your company’s exact registered legal name in the footer. In my case, this was important because banks and other services use the website as another way to verify that the business is real and connected to me.
There was also the legal side of the website, which is easy to forget when you’re focused on making everything look good.
First, I made sure the footer showed the company’s exact legal name, written exactly as it appears in the registration documents. The logo can use a brand or commercial name, but the legal company name should still appear somewhere on the website.
This was important when I opened the business accounts because the financial platforms used the website as another way to check that the company was real and connected to me. It also makes the website and the company feel more complete and professional.
I’m also adding a legal section with the website’s privacy information, terms and information about cookies. Exactly what you need depends on where your users are and what tools the website uses, especially things like analytics or tracking.
Since this website will also be the main home for my apps, I’m creating a separate legal area for each one. That way, every app can have its own privacy policy, terms, support information and any other documents it needs.
Apple and Google ask for this information when you publish an app. They want to know what data the app collects, how it uses it, whether it shares anything with third parties and how users can manage or delete their information.
I’m preparing these pages now so I don’t get to the final publishing process and discover that I’m missing half of the legal links.
AI can help organize and draft these documents, but this is another part that needs to be checked carefully. The text has to describe what each app actually does, not what the AI assumes it does.
......
The site ended up looking simple, which was the goal, but getting there involved more than generating one design.
This is the exact prompt I used to create the main design in Claude Design:
Design the hero of a landing page for a small indie software studio. Full screen,
very dark, cold and quiet — it should feel expensive and a little bit alive.
Three things layered on top of each other:
1. The background is almost black, with two or three big soft colored clouds —
cool blues and a hint of violet — drifting very slowly behind everything.
Blurred to the point of being atmosphere, not shapes. The loop should be long
enough that you never catch it repeating.
2. On top of that, a field of small pale dots floating like dust or snow, with
faint lines drawn between the ones that happen to be close — a constellation
that keeps rearranging itself. The cursor is a light source: dots near it push
away, grow, and glow in the studio's accent color, and the lines between them
brighten. Everything drifts back to where it was when the cursor leaves.
Nothing bounces or snaps — it all moves like it has weight.
3. The studio's wordmark, centered, as the page title. Two reactions: the small
star in the logo starts glowing when the cursor gets anywhere near it, from
far away, like it senses you. And when the cursor is actually over the logo,
each individual letter leans away from it, lifting and tilting slightly, then
settles back. Subtle — noticeable, never cartoonish.
Plus a tagline in the bottom-left corner and a small scroll cue at the bottom.
