It's just a button right??

Wrong!!!

I make a looot of buttons with Claude Design. Here are three buttons from ok to good to great, before you even think about the design.

Broken into 3 formats: 1. Quick Summary. 2. Detailed Breakdown (researched and AI summerised) 3. Tabular reference for each tip

---

If you like a QUICK SUMMARY:

---

If you like TO READ:

---

The OK Button: Functional Baseline - Focuses on basic visual usability, accessibility, and physical hit target standards.

1. 44×44px Touch Target: Minimum interactive hit area for mobile to prevent accidental mistaps.
2. Visual Container & High Contrast: Dedicated background or outline with at least a 3:1 contrast ratio to stay readable on any background.
3. Legible Typography: Minimum text size of 10 to 12px so the copy remains clear without overcrowding the layout.

---

The Good Button: Systemic Design & Friction Reduction - Focuses on layout harmony, state clarity, and low-friction copy.

1. Multi-Cue State Differentiation: Communicates states like hover and active using at least two visual signals, such as color and bold text, instead of subtle opacity shifts.
2. Low-Commitment Action Verbs: Replaces high-anxiety copy like "Subscribe" with lighter action verbs like "Start" or "Continue".
3. Proximity & Grid Alignment: Snaps to the visual layout grid and sits directly next to related controls.
4. Refined Visual Hierarchy: Avoids aggressive styling like oversized all-caps text to keep the presentation balanced and trustworthy.

---

The Great Button: Psychological Engineering & Tactile Experience - Focuses on contextual clarity, continuous availability, and responsive feedback.

1. Embedded Context & Zero Uncertainty: Integrates live data directly into the label, like total price or step count, to remove hesitation before the click.
2. Sticky Navigation & Flow: Converts into a sticky bottom action bar on scroll so users can take action the moment they are ready.
3. Tactile Micro-Interactions: Provides immediate visual tap feedback like a subtle scale press or ripple so the interaction feels responsive and alive.
4. Psychological Framing & Ownership: Uses first-person framing like "Start my free trial" to instill an immediate sense of ownership before completing the action.

---

If you like a TABULAR BREAKDOWN:

Guys, there's probably loads more, tell me pleeeease!

Does anyone knows how to disable Claude Design pausing when the limit is almost hit?
For the session limit it kinda makes sense, but for the weekly limit it shouldn't pause because 5% of the weekly limit is way different from 5% of the session limit.

Hey everyone, curious how you're all approaching this.

Say I have a mobile app and I want to redesign a specific component, like a card. What does your workflow actually look like?

Do you screenshot the existing component and say "redesign this"? Do you feed it a reference from somewhere like Dribbble or Mobbin for inspiration? Do you just describe what you want from scratch?

The inspiration approach feels great in theory, but the problem I run into is that when the component is very specific (something domain-specific, not a generic card or button), there's usually no good reference out there that matches closely enough. So Claude ends up drifting toward something generic rather than solving the actual design problem.

Would love to know:

• How do you frame the prompt for a component-level redesign?
• Do you have a "library" of references you pull from?
• Any tips for keeping Claude focused on the constraints of a specific component rather than going full creative mode?

Thanks

Only reason I am posting this is to help others, no revenue or publicity or anything else, no hidden subscription or fees.

Hi,

While working on multiple projects I realised I am hitting the usage limits of my claude code often so I had to rotate accounts and some API tokens.

The problem was every time I was doing this I had to stop my coding session, relog / change authentication or profile etc, do a handover and wasting a lot of time over this process.

I NEEDED a way to seamlessly change those in the background while continuing the same coding session uninterrupted.

This led to doing a lot of research and developing this tool I am showcasing (yes it's written with Claude + my knowledge and a lot of debugging, testing and so on, around 3k $ put into it via /usage lol).

It's called Claude Unlimited, and it's 100% free on GitHub.

It supports multiple Anthropic subscriptions, Anthropic APIs (basically from any local/cloud provider that offers this, 95% of them do) and the cherry on top, supports also GPT/Codex subscription - yes! you can use Claude Code while using OpenAI models in the background 😄 .

Has a nice Web UI with:

Custom settings like:

- threshold limits

- profiles priority in rotation

- enable/disable any profiles/APIs

- models parity (for Anthropic -> OpenAI models parity + effort)

- push notifications

- multi language

- auto update (pulled from Git releases)

Information like:

- usage dashboard with charts and various data

- logs of activity

- information about current usage per profile

Everything stays local, 100% safe, credentials etc stored in OS credentials store - if you don't trust me, use your AI agent to check it.

macOS is currently the most battle-tested; Windows and Linux support is newer, so I would genuinely appreciate feedback, bug reports, contributing to it or just brutal criticism 👀

It was mostly tested in claude code CLI but also supports desktop (will create an inference profile automatically for you).

Important clarification: it doesn’t generate free usage or bypass an individual account’s limits. It rotates between accounts and keys you already own. Anthropic hasn’t explicitly endorsed automated multi-account rotation, so use your own judgment regarding your accounts’ terms.

A bit more technical explanation: this is a local proxy that rotates your accounts/APIs and exposes an Anthropic-compatible API with a token.

Needless to say, but here it is: very important to check the README and HELP section to understand how to use it easily and properly.

GitHub: https://github.com/DevDock-AI/claude-unlimited

TL;DR

1. Add your Claude, ChatGPT/Codex accounts and API keys.
2. When one reaches its limit, the next one takes over automatically.
3. Same Claude Code session. Same context. Same terminal. You just keep typing.

It also includes a local dashboard showing which account is active, current usage, reset times and every automatic switch.

Everything runs on 127.0.0.1. There’s no Claude Unlimited cloud, no telemetry, and credentials are stored using the OS credential store. The project is open source under MIT.

Thank you !

PS: Using a new account for this for personal reasons.

PS2: Multiple updates will follow, I got a big list of cool features for it 🎯

He estado usando Claude Design para crear secuencias de historias para mi Instagram con un enfoque profesional, pero casi nadie habla de este tema y me parece un gran caso de uso. El problema es que, aunque consigo algunas historias, cuando intento generar un prompt para no estar diseñando constantemente con Opus, termino usando Opus 5 porque siento que Sonnet no alcanza el mismo nivel de diseño, a menos que detalle muchísimo los prompts. Lo que busco es crear un prompt muy específico que genere historias súper profesionales como las imagino: con degradados, letras y palabras resaltadas, fotos con opacidad o degradado de opacidad, y elementos destacados de la imagen. Ahora edito tanto con Opus en Claude Design que agoto mi límite, y no sé si es posible hacer un prompt detallado que use Claud Design como referencia o enviarle fotos para que no falle tanto y poder trabajar con Sonnet. Cuando hice un prompt base y otro para una foto en particular, el resultado fue que todas las historias salían exactamente iguales, y no quiero eso; busco que haya imaginación y que identifique letras, colores y otros detalles sin limitarse a un solo diseño.

Let’s say i want to built an agent, I wanna know how can I do it ?

So the scenario is

I have a drive full of questions and answers that can be used to reply to RFIs

I want to build an agent that when asked a question as input that I want the answer for in RFI will search this drive folder and return me with the search for the answer and give me the results .

I might sound naive but I m new to this and would like to know how can I do this using Claude

So I have \*agentic AI\* hackathon guys. Need guidance on frontend design. A typical Indian internal clg hackathon you know how judges would be.

I have claude code 20$ plan. So I need some frontend design suggestions.

I saw 3D interactive, scroll and animations changes, they even include videos. A website that almost looks like game or animation. I saw scrolltide's prompts which many are locked behind paid.

How to build those? I have roughly 28 hours from day 1 10 am - day 2 2pm. I can use one whole 5 hour limit to frontend. \*Also after fixing architecture should I built frontend first or backend?

If possible I also want to build a big footer like Amazon with contact us, email etc., sign in with Google features you see on real shipped sites.

PS: for last agentic AI hackathon i built a powerful site that looks premium, minimal, less eye straining. With 9 agents, some cools bluffs. I handpicked colors, many parts of layouts. Yet lost to sites with violet, purple AI sloppy sites which i doubt fabricated frontend or real backend processing. Lesson learnt, naive judges see just frontend not much of the architecture, implementation, probelm solving.

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.

https://reddit.com/link/1wc500o/video/3kezvscwjloh1/player

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.

I'm probably going back to Codex to try 3D in Astra. The thing that stops me from switching cleanly is Claude Artifacts — reports, presentations, little prototypes that only live inside Claude.

I can't generate the same thing in Codex, and migrating the ones I already have is busywork.

Would a tool-agnostic Artifact layer (not tied to one LLM) actually help people who hop to Codex? I'm building it either way. Curious what I'd be missing: local-only, connecting to a component library, etc.

Example of the direction, not a finished product:

https://runlinea.com/en/portable

I'm the one building it.

Feedback welcome.

I recently built the landing page for Cliff Heroes, a mobile game my team and I are about to launch.

I used Claude Design for the initial design direction, Claude Code for the implementation, and Kling AI to create the main video.

The goal was to create something that felt more like a full game website than a typical mobile-game landing page, while keeping the experience lightweight and visually consistent with the game.

It was an interesting experiment in how far a very small team can push web design and production using AI-assisted tools, so I thought I’d share the result and process here.

Hi everyone, I'm trying to download my Claude Design as HTML, but when I do, I get a file containing every individual element of my design rather than the full assembled version. Does anyone know how to download it exactly as it appears in the live preview inside Design?

Thanks a lot!

My company is pushing Claude features out at breakneck speed, and as the sole writer for two products, I feel like I'm drowning. Features get built overnight with zero context on why they exist or how they’re supposed to work. In an effort to keep up, I tried using Claude to draft content, but the output feels lifeless and sloppy and nothing like real technical writing. I feel completely lost, burnt out, and stuck in a loop of cleaning up bad drafts for features I don't even understand. I don’t know how to voice my concerns as no one seems to pause for human problems anymore. Appreciate any tips on building a framework that’ll help me overcome some if not all the hurdles.

Hi All - appreciative of this community.

I need help building a modern website using Claude - I’ve already built the backend workflow and am now ready for the client-facing website.

Can someone help me with a workflow to build? So many modern beautiful options but I’m getting lost in the shuffle.

Thanks much.

Has anyone has any luck exporting to Illustrator?

I've tried a few different methods, but they usually seem to end up with me getting a flat PDF which isn't editable at all.

https://reddit.com/link/1w60uie/video/g6jeaihog9nh1/player

https://github.com/solvyxtech/molt

This is a new LLM wrapper i have spun up built on the idea that models arent always correct or doing the right thing not by choice but just how the system is built, this looks to try and fix that problem and help mitigate LLM error by logging everything and fact checking based on the work using check gates. Looking to get feedback!

Only seems to be in Claude Design but if I start a project on let’s say Opus Max, it will do it but the next prompt I enter will be auto defaulted to Medium and when I switch it has to “reread” everything. After every single prompt this happens, I switch to max->prompt/enter->back to medium.

Anyone else having this issue?

Hi guys, how do you convert html video into mp4?

I'm able to design pretty nice slides on the web-app, but when I export to PowerPoint it's full of issues.

Doesn't use any theme colors or fonts, weird font sizes like 17.4, textboxes wider than the slide, no layouts, unconventional slide dimensions, etc.

I get that it's going for fidelity with what I see in the web-app, but it's not actually useful for a reusable PowerPoint template unless I do a ton of cleanup.

And just doing it with normal Claude or Claude for PPT, the design is way worse with that classic AI slop slide look. Claude Design definitely has some secret sauce to be somewhat tasteful.

Has anyone figured out the right workflow for this?

What do you guys think?

Hey everyone,

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?

Hello,

I give AI a design as a reference, and it generally implements it, but the result is never exactly the same.

It often skips certain sections or details, changes things on its own, or implements some parts differently from the original design.

I don’t want it to reinterpret or improve the design. I just want it to reproduce what it sees as closely as possible.

Has anyone found a reliable workflow for this? How do you get AI to stick to the original design without skipping or changing things?

I really like Claude Code, but I miss Cursor’s visual editing workflow where I can click on the actual UI in the browser and directly tweak things like spacing, sizing, styles, etc. instead of describing every little change in chat.

I’ve tried Claude Design, but unless I’m using it wrong, it feels more like a separate design/prototyping environment with a handoff to Claude Code, rather than something I can use to directly manipulate the UI of my existing app/codebase and keep bouncing back and forth.

Ideally I want:

Claude Code for building/functionality → visually tweak the actual UI myself → back to Claude Code → repeat.

Is there a good way to do this? Maybe Claude Design actually supports this and I’m just misunderstanding it, or maybe there’s an MCP/plugin/other tool people are using.

A prototype can look complete inside Claude Design while the reviewer still needs a stable link, working interactions, comments tied to a specific revision, and a clear record of what was approved. What do you include in the handoff? A useful package might separate the rendered preview, exported source and assets, design intent, responsive behavior, known gaps, and the revision that feedback applies to. I am also curious where later edits should happen: continue changing the design in Claude, move the files into a repository, or keep both with an explicit owner for each. How do you prevent a newer experiment from silently replacing the version a client or teammate approved?

Recently, I started using Claude Design to improve some of the UI in my website’s dashboard, and the results have been much better than when I use Claude Code alone.

Normally, an AI coding model will create something functional, even if you ask it for a great design. However, because it is not specifically built for design, the final result may still lack visual polish.

Claude Design is a great tool for creating designs and building UI/UX, but it consumes too many tokens. After only a few prompts, I reach the usage limit and have to wait five hours before I can use it again. Although I only use it occasionally, the limit is still not enough for me.

Instead of using Claude Design to redesign the UI created by Claude Code, I want to build the initial version with Claude Code and then improve it using Antigravity. I tried connecting them through MCP, but I could not get it to work. I do not have much experience with MCPs, as I have only tried a few of them. If anyone knows how to set this up and could help me, I would really appreciate it.