design-production
Design - Production
This skill guides Claude through creating production-ready design artifacts that development teams can confidently implement. Production design is about precision, completeness, and developer handoff quality.
Core Methodology
Purpose of Production Design
Production design provides everything developers need to build accurately:
- Complete specifications: Every state, spacing, interaction documented
- Design system consistency: Reusable components, tokens, patterns
- Developer-friendly formats: Specs that answer common dev questions
- Reduced ambiguity: Minimize back-and-forth during implementation
More from mevans2120/design-suite-claude-skills
design-concepts
Creates conceptual designs that illustrate design strategy and approach. Use when user says "mockup", "wireframe", "concept", "mood board", "visual direction", "design options", "explore designs", "UI design", "prototype", "design this", "show me designs", "create a design", "look and feel", or "design variations". Leverages research insights and design briefs to develop UI concepts, mood boards, and interactive prototypes. Do NOT use when user needs to understand users first (use design-research), is reviewing an implemented product (use design-qa), or is writing code.
7design-qa
Reviews finished and in-progress digital products to assess adherence to design specifications and discover potential issues. Use when user says "design review", "design QA", "QA review", "check implementation", "visual bugs", "compare to design", "match the specs", "review the build", "before launch", "pre-launch review", "implementation review", "verify design", "design validation", "spacing issues", "visual discrepancies", "accessibility review", "WCAG compliance", or "responsive testing". Validates implementation against design intent, identifies visual and interaction discrepancies, and provides actionable feedback. Do NOT use when still designing concepts (use design-concepts), need to understand users (use design-research), or nothing has been built yet.
7design-research
Conducts user experience research and analysis to inform design decisions. Use when user says "user research", "persona", "personas", "who are our users", "target audience", "customer segments", "design principles", "user needs", "pain points", "jobs to be done", "JTBD", "user interviews", "discussion guide", "research plan", "competitive analysis", "understand the users", "user data", or "analytics review". Reviews first-party and third-party user data, analyzes industry trends from UX and visual design perspectives, and plans user research studies. Creates personas, customer segments, design principles, design roadmaps, and research discussion guides. Do NOT use when already have approved personas, in implementation/coding phase, need visual mockups (use design-concepts), or reviewing built product (use design-qa).
4design-components
Designs components and sections within an existing design system. Creates 3 composition variations that use the project's actual tokens, colors, typography, and component primitives. Use when user says "design a component", "component variations", "design a card", "design a hero", "design a section", "component options", "design within our system", "new component", "component concept", or wants to explore how a component could look using their existing design system. Also use when designing larger composed sections (dashboards, settings pages, feature panels) that build on existing primitives. Do NOT use when the project has no design system yet (use design-system-init), or when exploring entirely new visual directions (use design-concepts).
2