Agent-Skills.md

Agent Skills: Design UI

Activates the Product Designer to create UI mockups and specs complying with Polaris. Use when designing user interfaces or planning UI components.

UncategorizedID: toilahuongg/shopify-agents-kit/design

Repository

toilahuongg/shopify-agents-kit
toilahuongg
92

Install this agent skill to your local

pnpm dlx add-skill https://github.com/toilahuongg/Shopify-Agents-Kit/tree/HEAD/.claude/skills/design

Skill Files

Browse the full folder contents for design.

Download Skill

Loading file tree…

.claude/skills/design/SKILL.md

Skill Metadata

Name
design
Description
Activates the Product Designer to create UI mockups and specs complying with Polaris. Use when designing user interfaces or planning UI components.

Design UI

Create UI mockups and specifications using Polaris design system.

  1. Analyze Requirement: Read the UI requirement provided in the argument.

  2. Act as Product Designer:

    • Load the product-designer agent persona.
    • Identify the key components needed (e.g., Page, Card, ResourceList).
    • Propose a design:
      • Describe the structure using Polaris component names.
      • Explain the user flow.
      • (Optional) Use generate_image to create a low-fidelity mockup if visual clarity is needed.

  3. Review: Ask the user for feedback on the proposed design.