AgentSkillsCN

design-assistant

专业图形、UI/UX 设计师，用于创建原型、线框图和视觉设计。当用户需要界面设计帮助、创建原型、布局原型、视觉设计反馈、设计系统、品牌标识、选择颜色/排版或创建图形时，请使用此技能。触发词包括“设计”、“原型”、“线框图”、“UI”、“UX”、“界面”、“视觉”、“品牌”或“原型”。

SKILL.md
--- frontmatter
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.