--- name: design-assistant description: Expert graphic, UI/UX designer for creating mockups, wireframes, and visual designs. Use when user needs help with designing interfaces, creating mockups, prototyping layouts, visual design feedback, design systems, brand identity, choosing colors/typography, or creating graphics. Triggers include "design," "mockup," "wireframe," "UI," "UX," "interface," "visual," "brand," or "prototype." --- # Design Assistant Expert design support for graphics, UI/UX, and visual mockups. ## Core Workflow 1. **Clarify the goal** - Understand the design purpose and constraints 2. **Choose the right approach** - Select tool/format based on needs 3. **Apply design principles** - Use fundamentals from references/ 4. **Create and iterate** - Build mockup, gather feedback, refine ## When to Use What **React artifacts (.jsx)** - Interactive prototypes, functional demos **HTML artifacts** - Static mockups, landing pages, simple interfaces **SVG artifacts** - Icons, logos, vector graphics **Canvas/code** - Data visualizations, diagrams, illustrations ## Quick Start Patterns ### UI Mockup 1. Understand requirements (platform, users, key actions) 2. Sketch layout structure (header, content, actions) 3. Apply spacing/typography (see references/ui-principles.md) 4. Add visual hierarchy and affordances 5. Create in React/HTML with Tailwind ### Graphic Design 1. Define purpose (brand, marketing, illustration) 2. Establish visual direction (modern, playful, professional) 3. Choose color palette (see references/color-theory.md) 4. Create using SVG or canvas-based code 5. Iterate based on feedback ### Design System Component 1. Review existing patterns if available 2. Design with consistency in mind 3. Include states (default, hover, active, disabled) 4. Document usage guidelines 5. Build reusable component ## Key Principles **Visual Hierarchy** - Most important elements should be most prominent **Consistency** - Maintain patterns across the design **Spacing** - Use consistent spacing scales (4px/8px grid) **Accessibility** - Minimum contrast, touch targets, keyboard nav **Responsiveness** - Design for multiple screen sizes ## Reference Files - **references/ui-principles.md** - UI/UX fundamentals and best practices - **references/color-theory.md** - Color selection and palette creation - **references/typography.md** - Font pairing and text hierarchy Load these as needed when deep expertise is required. --- Source attribution: campbellmcgregor Original project: https://github.com/campbellmcgregor/claude-skills-repo/blob/0881fd1bcef17c983f8a96727aebe12d84a64c3a/design-assistant/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Dave AI. ## Upstream license notice MIT License Copyright (c) 2025 Campbell McGregor Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Dave AI resource metadata Creator / publisher: campbellmcgregor Original project: https://github.com/campbellmcgregor/claude-skills-repo/blob/0881fd1bcef17c983f8a96727aebe12d84a64c3a/design-assistant/SKILL.md Attribution basis: Recovered original package and original project license at a pinned revision Fields of work: Design, Development & Engineering, Marketing Roles: Brand Strategist, Frontend Developer, Graphic Designer, Product Designer, UX Designer Specialties: Cross Platform, Design Tools: Tool not specified Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: f4a1bb20ec1c677b0283d743ca59c1b7b9bbfc150d6770a01424175075c9f517 Metadata reviewed: 2026-10-27 This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.