design

Generates UI mockups and design specs for Shopify apps using Polaris components.

10|2|Updated Nov 11, 2025
One-click install
npx skills add https://github.com/toilahuongg/Shopify-Agents-Kit --skill design-toilahuongg
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/toilahuongg/Shopify-Agents-Kit/tree/main/.claude/skills/design
Command: npx skills add https://github.com/toilahuongg/Shopify-Agents-Kit --skill design-toilahuongg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create user interface mockups and design specifications that adhere to Shopify's Polaris design system, ensuring a consistent and professional look for your applications.

Core Features & Use Cases

  • UI Mockup Generation: Creates visual representations of user interfaces.
  • Polaris Compliance: Ensures designs follow Shopify's established design guidelines.
  • Component Suggestion: Recommends appropriate Polaris components for different UI elements.
  • Use Case: When you need to design a new settings page for your Shopify app, this Skill can help you lay out the structure and choose the right components.

Quick Start

Use the design skill to create a mockup for a new product creation form.

Frequently Asked Questions about design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create UI mockups that follow the Shopify Polaris design system?

To create Polaris-compliant UI mockups, you can use this Skill to generate visual representations of user interfaces and design specifications tailored for Shopify applications. It analyzes your requirements and suggests appropriate Polaris components for your layout.

What is the best way to design a Shopify app settings page using Polaris components?

Designing a Shopify app settings page with Polaris components involves laying out the structure and selecting the right UI elements. This Skill activates a product designer persona to propose designs, describe user flows, and recommend appropriate Polaris components for your interface.

Can I use this to plan UI components for a new product creation form?

Yes, you can plan UI components for a new product creation form. The Skill generates mockups and design specifications that adhere to Polaris guidelines, helping you structure the form and choose the correct components for a consistent application interface.

Does this Skill provide user flow descriptions along with the UI mockup?

Yes, the Skill provides user flow descriptions alongside the UI mockup. It analyzes your requirements to propose designs using Polaris components and explicitly describes the user flows to ensure a comprehensive design specification.

When do I need to generate design specifications for Shopify applications?

You need to generate design specifications for Shopify applications when you want to ensure a consistent and professional look. This Skill helps by creating visual UI mockups and recommending Polaris components that follow Shopify's established design guidelines.