imsaif

imsaif/design-with-claude

Plugin Claude Code

Plugin marketplace listing 1 plugin: design-with-claude.

imsaif/design-with-claude

Plugin Claude Code

A product designer inside your terminal: 48 specialized design skills as slash commands, covering accessibility, motion, color, checkout, dashboards, and more.

imsaif/design-with-claude

Instructions file

Instructions for imsaif/design-with-claude, covering design-with-claude, project overview, architecture, key files and command file structure.

imsaif/design-with-claude

Command

Use when a screen might fail WCAG. Unlabeled inputs, no keyboard path, contrast below AA, missing landmarks, broken heading order, screen reader gaps, or a request for an a11y review or EU Accessibility Act check.

imsaif/design-with-claude

Command

Use when a UI looks machine-made rather than decided. Violet gradients, glassmorphism everywhere, identical cards in a grid, untouched shadcn or Material defaults, emoji bullets, or copy stuffed with seamless and unlock.

imsaif/design-with-claude

Command

Use when a project needs real working login and signup rather than advice. Wiring up Clerk or Supabase Auth, protecting routes, handling sessions. Writes actual code, not guidance.

imsaif/design-with-claude

Command

Use when a login or security flow feels either unsafe or full of friction. Signup, password reset, 2FA and passkey flows, permission prompts, session timeouts and trust signals.

imsaif/design-with-claude

Command

Use when building enterprise software. Role and permission UI, multi-tenant switching, admin dashboards, long onboarding, or a product that has to serve power users and first-timers at once.

imsaif/design-with-claude

Command

Use when a product looks like a template with no personality. Visual identity, logo usage, brand colour and type as voice, including when a brand exists on paper but nothing in the interface expresses it.

imsaif/design-with-claude

Command

Use when Claude keeps building the wrong UI and you are re-rolling prompts. How to write the brief, which references and constraints to give, how to iterate instead of starting over, and how to spot when it is guessing.

imsaif/design-with-claude

Command

Use when a cart or checkout is losing people. Abandoned carts, long payment forms, forced account creation, shipping cost revealed too late, weak trust signals, confusing order confirmation.

imsaif/design-with-claude

Command

Use when a designer needs to understand code that already works. What a file does, what a line means, which parts are safe to change. Plain language with Figma analogies, no developer jargon.

imsaif/design-with-claude

Command

Use when colour is failing. Contrast below AA, a palette with no system behind it, dark mode that is only inverted light mode, or semantic colours that carry no meaning.

imsaif/design-with-claude

Command

Use when the words inside a product are doing damage. Vague error messages, empty states that say nothing, inconsistent tone, or labels users read the wrong way.

imsaif/design-with-claude

Command

Use when designing a chat or assistant interface. Message layout, bot personality, streaming and typing states, rich message cards, error recovery, or voice input.

imsaif/design-with-claude

Command

Use when dark mode looks wrong. Pure black surfaces, elevation that disappears, brand colours that vibrate against dark, a white flash on load, or a mode toggle that does not persist.

imsaif/design-with-claude

Command

Use when a dashboard is dense but not useful. Too many KPI cards, no clear first read, filters nobody touches, drill-downs that lose context, or real-time updates that only add noise.

imsaif/design-with-claude

Command

Use when a chart misleads or confuses. Wrong chart type for the data, a truncated axis, colour that encodes nothing, unreadable labels on mobile, or charts no screen reader can use.

imsaif/design-with-claude

Command

Use when a project needs to store data and has no database yet. Setting up Supabase, creating tables, writing queries, and connecting them to the frontend. Written for designers.

imsaif/design-with-claude

Command

Use when something is broken and you need it diagnosed. A build failure, a runtime crash, a blank page, an unreadable error message, or behaviour that is simply wrong. Gives one exact fix, not a list of things to try.

imsaif/design-with-claude

Command

Use when a project runs locally but is not on the internet yet, or a Vercel deploy is failing. First deploy, build errors, environment variables, custom domain.

imsaif/design-with-claude

Command

Use when a design request is broad or unclear and you do not know which specialist it needs. Reads the brief, routes it to the right expertise, and returns structured guidance.

imsaif/design-with-claude

Command

Use when you want an honest read on a design instead of encouragement. What is wrong, ranked by severity, with the reason attached. Works on a screenshot, a mockup, or a described screen.

imsaif/design-with-claude

Command

Use when code has drifted off the design system. Raw hex values and pixel numbers written where a token already exists, one-off components, library defaults left untouched. Finds every bypass and fixes it.