home / skills / toilahuongg / shopify-agents-kit / design

design skill

safe

This skill helps you design UI mockups and specs using the Polaris design system, outlining components, flows, and low-fidelity visuals.

npx playbooks add skill toilahuongg/shopify-agents-kit --skill design

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

845 B

---
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.
argument-hint: "[UI requirement or component to design]"
---

# 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.

Overview

This skill activates the Product Designer persona to create UI mockups and specifications that follow the Polaris design system. It converts functional requirements into structured component layouts, user flows, and implementation-ready specs. Use it to get clear, consistent UI designs aligned with Polaris conventions.

How this skill works

Given a UI requirement, the skill assumes the product-designer role and identifies the key Polaris components required (for example Page, Card, ResourceList, Stack, FormLayout). It proposes a design by describing the structure using Polaris component names, explains the user flow, and can generate a low-fidelity mockup on request. Finally, it requests feedback to iterate on the design.

When to use it

Designing a new page or screen that must follow Polaris guidelines.
Planning UI components and their hierarchy before engineering work.
Translating product requirements into component-level specs.
Creating quick low-fidelity mockups to validate layout and flow.
Preparing handoff artifacts for frontend engineers using Polaris.

Best practices

Start with clear functional requirements: primary tasks, user roles, and success criteria.
List data points and actions per screen to map to Polaris components.
Prefer semantic Polaris components (Page, Card, DataTable, FormLayout) over custom layouts.
Keep accessibility in mind: labels, focus order, and keyboard interactions.
Iterate quickly: propose a draft, ask for feedback, then refine.

Example use cases

Design a dashboard listing resources with filters and bulk actions using ResourceList and Filters.
Specify a multi-step onboarding flow using Page, Card, and FormLayout for each step.
Create a settings page with grouped controls using Card and Stack for spacing.
Mock up a product details page with image gallery, metadata, and action bar using Layout and Page actions.
Prepare component specs for engineers: props, states, and responsive behavior.

FAQ

Can you produce visual mockups?

Yes. On request I can generate low-fidelity mock images to illustrate layout and spacing; detailed high-fidelity artwork is not the default.

How do you ensure designs follow Polaris?

Designs reference Polaris component names and recommended patterns, emphasize semantic structure, and call out accessibility and responsive considerations.