AgentSkillsCN

design

使用设计师代理进行 UI/UX 设计。创建布局、组件和设计规范。

SKILL.md
--- frontmatter
name: design
description: UI/UX design using designer agent. Creates layouts, components, and design specs.
user_invocable: true
arguments:
  - name: component
    description: What to design
    required: true
  - name: implement
    description: Also generate implementation code
    type: boolean
    default: false
  - name: responsive
    description: Include responsive design
    type: boolean
    default: true
  - name: dark
    description: Include dark mode variant
    type: boolean
    default: false
triggers:
  - "design"
  - "UI"
  - "UX"
  - "layout"
  - "component"
  - "interface"
  - "style"
  - "responsive"

UI Design Skill

Design UI components and layouts using noin-ai:designer agent.

Usage

bash
/design <component>              # Design only
/design <component> --implement  # Design + code
/design <component> --dark       # Include dark mode

Workflow

code
/design <component>
    ↓
Task(noin-ai:designer, component, options)
    ↓
Return design spec
    ↓
If --implement: Task(noin-ai:coder, implement design)

Output

  • •Visual specification
  • •Component structure
  • •Accessibility considerations
  • •Responsive breakpoints
  • •Optional: Implementation code

Examples

bash
/design user profile card
/design navigation header --dark
/design login form --implement