design-ops

Plugin design-ops in shotcowboystyle/design-ops-plugin. Commands read from the repo's manifest — 1 month ago.

Skills (46)

• accessibility-inclusive-design
• agentic-ai-generative-ux
• ai-design-generation
• ai-spatial-voice-ux
• ambient-calm-zero-ui
• animation-recipe-library
• business-design-templates
• cognitive-psychology-ux
• color-palette-library
• component-patterns-code
• conversion-optimization-patterns
• cross-cultural-i18n-ux
• data-visualization-mastery
• design-critique-case-studies
• design-memory
• design-ops-orchestrator
• design-process-methods
• design-systems-architecture
• design-token-presets
• desktop-app-design
• figma-design-tool-workflows
• form-design-encyclopedia
• icon-illustration-systems
• image-media-patterns
• interaction-motion-design
• layout-block-intelligence
• micro-copy-intelligence
• mobile-ux-design
• navigation-pattern-encyclopedia
• nng-ux-heuristics
• page-composition-engine
• performance-states-patterns
• platform-visual-standards
• reference-intelligence
• responsive-block-patterns
• screen-flow-patterns
• scroll-experience-direction
• sector-style-intelligence
• shadow-elevation-density
• typography-pairing-recipes
• ui-pattern-intelligence
• ui-visual-design-system
• ux-ethics-content-strategy
• ux-metrics-measurement
• ux-research-methods
• visual-design-mastery

Slash commands (39)

• /design-ops:a11y

  Accessibility audit — WCAG 2.2 AA full checklist, ARIA audit, keyboard navigation, color contrast (APCA), focus management, screen reader, cognitive a11y, with code fixes.

• /design-ops:ai-audit

  Audit AI-powered features against agentic, trust, safety, and interaction best practices with scoring and specific fix recommendations.

• /design-ops:animate

  Generate production animations — CSS keyframes, Framer Motion, scroll-driven, micro-interactions, with reduced motion fallbacks.

• /design-ops:audit

  Comprehensive design audit — heuristic, cognitive, flow, fortification, cognitive load analysis, and summary scoring in one command. Run all lenses or pick specific sections.

• /design-ops:before-after

  Before/after comparison — show exactly how AI-generated slop transforms into production-quality UI. Visual proof of every design improvement.

• /design-ops:benchmark

  Competitive analysis — 10-dimension scorecard, gap analysis, improvement roadmap, and differentiation strategy.

• /design-ops:brief

  Problem definition — persona, How Might We questions, constraints, success criteria, and a ready-to-paste Constraint Stack.

• /design-ops:component

  Production component builder — generate complete, runnable UI components (30+ types) with 10 states, full accessibility, design tokens, animation, tests, and platform code (React/SwiftUI/CSS).

• /design-ops:dark

  Generate a complete dark mode system — oklch luminance mapping, surface elevation, accent adjustments, shadows, toggle component, and dark tokens.

• /design-ops:design-ops

  Command map and quick start — see all 39 commands, starter recipes, Design Quality Score, anti-slop engine, and tips for best results. Start with /start if you are new.

• /design-ops:figma

  Generate production code from a Figma design specification using the MCP-powered design-to-code flywheel. Extracts tokens, components, and layout to produce platform-ready code.

• /design-ops:fix

  Anti-slop engine — takes AI-generated UI code and transforms it into production-quality design. Fixes typography, color, spacing, accessibility, and design consistency in one pass.

• /design-ops:form

  Generate production forms — validation, error states, multi-step wizards, accessibility, complete React + Zod code.

• /design-ops:generate

  AI design generation — mockups, icons, illustrations, images via Stitch MCP, Fal.ai, Recraft V3, Veo 3.1

• /design-ops:grade

  Visual quality scoring — Awwwards-calibrated 10-dimension assessment, designer DNA match, canonical rule compliance, production quality verdict.

• /design-ops:icon

  Generate an icon system — library selection, sizing tokens, React wrapper component, animated recipes, SVG optimization, and accessibility.

• /design-ops:inspo

  Source REAL references — live Awwwards winners, Mobbin screens and flows, MotionSites motion recipes — capture the sites, measure their design DNA, and build a Reference Board in .design-ops/refs/ that later commands design and grade against.

• /design-ops:layout

  Generate responsive page layouts — CSS Grid, Flexbox, container queries, spacing rhythm, breakpoint transformations.

• /design-ops:map

  Information architecture — sitemap, navigation model, content hierarchy, cross-linking map, URL structure, and search strategy.

• /design-ops:measure

  Metrics plan — HEART framework, OKRs, experimentation strategy, dashboards, and baseline measurement.

• /design-ops:nav

  Generate responsive navigation systems — top bar, sidebar, bottom tabs, command palette, mega menu, with ARIA and dark mode.

• /design-ops:next

  Context-aware suggestion of what to do next based on what you've generated so far.

• /design-ops:onboard

  Generate a complete onboarding flow — step sequence, progressive disclosure, permission timing, empty states, activation metrics, and production React code.

• /design-ops:page

  Full page builder — generate complete, runnable marketing and product pages with ordered block stacking, SEO, Open Graph, scroll animations, lazy loading, and responsive composition.

• /design-ops:palette

  Generate a deep color system — oklch palettes, APCA contrast scores, dark mode, data-viz colors, gradients, and CSS custom properties.

• /design-ops:preflight

  Pre-launch checklist and post-launch plan — SEO, performance, analytics, legal, security, monitoring, feedback loops, iteration strategy.

• /design-ops:qa

  Design QA — verify implementation matches design spec. Token compliance, state coverage, responsive fidelity, accessibility, pixel-level issues.

• /design-ops:remix

  Redesign existing UI — fix top problems with UX reasoning for every change

• /design-ops:research

  User research and usability testing — interview guides, survey design, test plans, recruitment, and analysis frameworks.

• /design-ops:responsive
• /design-ops:roast
• /design-ops:screen
• /design-ops:scroll
• /design-ops:start
• /design-ops:status
• /design-ops:style
• /design-ops:tokens
• /design-ops:type
• /design-ops:wireframe

Subagents (4)

• art-director

  Design Ops art director. Turns captured references (.design-ops/refs/*/dna.json + screenshots) into a Reference Board, which is a tokenized direction with one stolen trait per reference, a category-norm list, an avoid list and a rejected list, written to .design-ops/refs/board.md + board.json for /s

• critic

  Design Ops critic. Grades a built page or screen SIDE BY SIDE against the Reference Board. It captures the build with the same scripts/capture.mjs, diffs its measured DNA against board.json, scores the build and the best reference on the same 10 dimensions, and returns a DQS, per-dimension deltas an

• scout

  Design Ops reference scout. Sources REAL design references for a brief (Awwwards award winners via scripts/awwwards.mjs, Mobbin screens and flows via the Mobbin MCP, MotionSites motion recipes), captures the live sites with scripts/capture.mjs in one call, and returns a shortlist with measured DNA.

• ux-architect

  Design Ops UX architect. Designs flows, screen inventory, IA and states from REAL app patterns sourced through the Mobbin MCP (plus screen-flow-patterns taxonomy), and records them in .design-ops/refs/mobbin.json. Use for onboarding, checkout, signup, paywall, settings, dashboards, or any multi-scre

Similar plugins