design-with-claude

Plugin design-with-claude from marketplace design-with-claude in imsaif/design-with-claude. Commands read from the repo's manifest — today.

Skills (1)

• design-with-claude

  Use when design work needs a product designer's eye: auditing a codebase for design-system gaps, fixing WCAG contrast and unlabeled inputs, choosing type scales or spacing steps, reviewing UI that looks generic or AI-generated, or designing forms, tables, dashboards, navigation, checkout, onboarding

Slash commands (50)

• /design-with-claude:accessibility-specialist

  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.

• /design-with-claude:anti-slop-designer

  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.

• /design-with-claude:auth-implementation

  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.

• /design-with-claude:auth-security-ux-specialist

  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.

• /design-with-claude:b2b-saas-specialist

  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.

• /design-with-claude:brand-designer

  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.

• /design-with-claude:briefing-claude

  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.

• /design-with-claude:checkout-specialist

  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.

• /design-with-claude:code-explainer

  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.

• /design-with-claude:color-specialist

  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.

• /design-with-claude:content-strategist

  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.

• /design-with-claude:conversational-ui-designer

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

• /design-with-claude:dark-mode-specialist

  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.

• /design-with-claude:dashboard-designer

  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.

• /design-with-claude:data-visualization-specialist

  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.

• /design-with-claude:database-setup

  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.

• /design-with-claude:debug-helper

  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.

• /design-with-claude:deploy-to-vercel

  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.

• /design-with-claude:design-brief

  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.

• /design-with-claude:design-critic

  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.

• /design-with-claude:design-empathy

  Use when you are designing for users you have only imagined. Reads one flow of your code for what it assumes about people, questions you until each assumption meets a real person or is named as a guess, looks for evidence, and records only what you confirm in EMPATHY.md.

• /design-with-claude:design-enforce

  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.

• /design-with-claude:design-grill

  Use when a design keeps getting reinvented every session. Interviews you until you share one understanding, then writes the vocabulary and the binding decisions into the repo so they survive the next context window.

• /design-with-claude:design-system-architect

  Use when a design system needs structure rather than more components. Token architecture, component APIs and variants, theming, and governance over who can change what.

• /design-with-claude:design-triage

  Use when a dwic audit report is full of findings and there is no plan. Ranks them into an order someone can work through, then works through it.

• /design-with-claude:drag-drop-specialist

  Use when building drag and drop or direct manipulation. Reordering lists, dragging onto a canvas, multi-select, drop targets nobody can see, or drag that is impossible by keyboard.

• /design-with-claude:ecommerce-specialist

  Use when shoppers cannot find or evaluate products. Product pages, filtering and facets, image galleries, reviews, and product comparison. The discovery half of a store.

• /design-with-claude:environment-setup

  Use when handling secrets and config. What .env files are, which filename to use, what must never reach GitHub, and why a key works locally but not in production.

• /design-with-claude:error-handling-specialist

  Use when things go wrong badly. Error messages that blame the user, validation firing at the wrong moment, form data lost on failure, dead-end 404 and 500 pages, or no way to retry.

• /design-with-claude:form-designer

  Use when a form is losing people. Too many fields, validation that interrupts typing, unclear required fields, a multi-step flow with no sense of progress, or inputs with no labels.

• /design-with-claude:guide

  Use when you have an idea and nothing else. Takes you from an empty terminal to a working prototype live on a real URL, asking the design questions that decide what to build along the way.

• /design-with-claude:healthcare-ux-specialist

  Use when designing clinical or patient-facing interfaces. Clinical workflows, displaying sensitive patient data, HIPAA considerations in the UI, and medical terminology patients do not speak.

• /design-with-claude:i18n-designer

  Use when a product has to work in more than one language. Right-to-left layouts, German strings breaking buttons, date and number formats, or English hardcoded into the UI.

• /design-with-claude:information-architect

  Use when users cannot find things. Navigation that mirrors the org chart, labels nobody understands, a taxonomy that grew by accident, or content with no obvious home.

• /design-with-claude:interaction-designer

  Use when deciding how something should behave rather than how it looks. Click and tap targets, gestures, keyboard paths, loading and empty and error states, and the feedback each action gives.

• /design-with-claude:landing-page-specialist

  Use when a landing page is not converting. A hero that never says what the product is, weak or buried CTAs, no social proof, or a pricing table nobody can compare across.

• /design-with-claude:mobile-specialist

  Use when a design will be used on phones. Touch targets too small, controls outside thumb reach, bottom navigation, gestures, safe areas and notches, or behaviour with no connection.

• /design-with-claude:motion-designer

  Use when animation feels wrong. Transitions too slow or too bouncy, motion with no purpose, blanket transitions on every property, no reduced-motion support, or animation that drops frames.

• /design-with-claude:navigation-specialist

  Use when people get lost. Choosing between a sidebar, top bar or bottom tabs, breadcrumbs, mega menus, a command palette, or navigation that collapses badly on small screens.

• /design-with-claude:onboarding-specialist

  Use when new users leave before their first success. First-run experience, tooltip tours nobody reads, empty states, setup checklists, or features nobody ever discovers.

• /design-with-claude:performance-specialist

  Use when a product feels slow even when it is not. Blank screens while loading, spinners everywhere, no optimistic updates, missing skeleton screens, or layout that jumps as content arrives.

• /design-with-claude:print-export-designer

  Use when something has to leave the screen. PDF generation, print stylesheets, receipts and invoices, exported reports, or a download that gives the user no feedback.

• /design-with-claude:responsive-design-specialist

  Use when a layout breaks between sizes. Arbitrary breakpoints, type that does not scale, images that blow out the grid, or a desktop design retrofitted onto mobile.

• /design-with-claude:search-specialist

  Use when search is failing users. No autocomplete, results ranked badly, filters that return nothing, or a zero-results state that offers no way forward.

• /design-with-claude:setup-guide

  Use when someone is starting from nothing and the terminal is unfamiliar. Installing Node and Claude Code, creating a first project, and what to do when a command fails.

• /design-with-claude:spacing-layout-specialist

  Use when spacing looks arbitrary. Padding and margins off any scale, inconsistent gaps between the same components, no grid underneath, or a layout that needs a denser mode.

• /design-with-claude:table-designer

  Use when a data table is hard to use. Too many columns, no sorting or pagination, unclear row selection, inline editing, or a table that becomes unreadable on a phone.

• /design-with-claude:typography-specialist

  Use when type is doing no work. Sizes off any scale, headings that fail to establish hierarchy, cramped or loose line height, a bad font pairing, or type that does not scale down.

• /design-with-claude:ui-copywriter

  Use when writing marketing or landing copy. Headlines, hero copy, CTAs, value propositions and section copy that sound like a person making a specific claim rather than a template being filled in.

• /design-with-claude:visual-hierarchy-specialist

  Use when everything on a screen shouts equally. No clear focal point, competing calls to action, related content that does not read as grouped, or a layout with no obvious entry point.

Similar plugins