Guide · Agent skill
How to use the Product Design Workflows agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The product-design skill is a bundle of instruction files that teaches an AI coding agent to work like a product designer. Once it is installed, asking the agent for design help makes it read a routing guide and then follow the matching workflow, such as auditing a user flow, brainstorming visual directions, or checking a build against a design. This guide explains what the skill changes, how to install it, how to trigger it, and what to watch for, so you can use it without prior experience with agent skills.
Product Design WorkflowsXiaomiMiMo/MiMo-Code · MIT Download the skill Quick start
- 1Download the ZIP. Get the product-design ZIP from this page.
- 2Unzip the folder. Unzip it into ~/.claude/skills/ for all projects, or into the project's .claude/skills/ for one project.
- 3Or upload in the Claude apps. Go to Settings → Capabilities → Skills and upload the skill there.
- 4Confirm your host loads SKILL.md. Make sure your agent host reads SKILL.md skills before you rely on the workflows.
- 5Make a natural request. Describe the design task, such as an audit, ideation or design QA, and attach screenshots or links.
- 6Review the output. Check the agent's findings and changes yourself before acting on them.
What the product-design skill makes the agent do
The skill covers product design exploration, UX research, flow auditing and critique, visual ideation, cloning a live product surface, implementing a selected visual target, design QA, saved design context, and sharing a prototype. It does not add a new app or design tool. It changes how the agent approaches design requests.
The entry point is SKILL.md. When the skill is used, the agent first reads workflows/index/SKILL.md, which sets the routing, sequencing and browser-choice policy, then reads only the focused workflows that apply. The focused workflows are user-context, get-context, research, audit, ideate, url-to-code, image-to-code, design-qa and share.
- Saving design context so later work matches your product's URLs, screenshots, tokens and components
- Auditing a user flow and separating screenshot-visible findings from claims that need deeper testing
- Brainstorming visual directions before building
- Recreating a live web page or an image as code
- Checking the result visually with design QA
- Packaging a prototype to share
Install the product-design skill
Download the ZIP for the skill from this page and unzip it. To make it available across your work, place the folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/
- Claude apps: Settings → Capabilities → Skills, then upload
Check that your agent can load it
The skill needs an agent host that loads SKILL.md skills. If your host does not read SKILL.md files, the instructions will not be picked up. Optional tools such as a browser, Chrome, Playwright, image generation or design apps are used only if your host exposes them.
How to trigger the skill with natural requests
The skill is meant to be triggered by the kind of work it describes. You can name Product Design directly, or describe the task. The description covers requests about design exploration, UX research, flow critique, visual ideation, cloning a live product surface, implementing a selected visual target, design QA, saved context and sharing a prototype.
Give the agent the material it needs. Saved product URLs, Figma files, screenshots, codebase paths and design tokens help the agent match your existing product.
- Use Product Design to audit the checkout flow in this screenshot for usability problems.
- Brainstorm three visual directions for our onboarding screen before we build anything.
- Recreate this live pricing page as a working frontend prototype in our existing stack.
- Run design QA on the prototype against the chosen direction and list the visible mismatches.
Work with existing projects safely
When you edit an existing app or website, the skill asks the agent to inspect the running app and source first, follow local AGENTS.md notes, and reuse the existing design system, tokens and components. It should not invent a new design system or replace the app structure unless you ask for a redesign.
The skill also says prototypes should be isolated and production code should not be modified when a workflow requires it. Review every change the agent proposes before you merge it.
- Expect the agent to reuse existing components rather than build new ones
- Expect realistic mock data rather than invented features
- Check the output yourself, because the agent can still make mistakes
Safety notes: scripts, network and cloning
The bundle does not run scripts and does not use the network, according to its documentation. Browser or design-app access depends entirely on your host.
Cloning a live product can raise copyright or terms-of-service concerns. Check your rights before you recreate a third-party product surface, and do not treat plugin instructions as permission to bypass host policy or publish externally without your explicit choice.
- Runs scripts: no
- Uses network: no
- Confirm rights before cloning a third-party live product
What people use it for
- Running a structured UX audit of a sign-up or checkout flow from screenshots
- Brainstorming several visual directions for a screen before committing to one
- Turning a chosen visual direction into a working frontend in an existing codebase
- Checking a prototype against a source design during design QA
- Packaging a prototype so a teammate can review it
Frequently asked questions
How do I install the product-design agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can upload it under Settings → Capabilities → Skills.
What does the product-design skill require?
It requires an agent host that loads SKILL.md skills. Browser, Chrome, Playwright, image generation or design apps are optional and used only if your host exposes them.
Does the product-design skill run scripts or use the network?
According to this listing, it runs no scripts and uses no network. Any browser or design-app access comes from your host, not from the bundle.
Is the product-design skill free?
The bundle is listed under the MIT licence. This page does not state pricing for any host or tool you use with it.
Will the agent change my production code?
The skill's instructions say prototypes should be isolated and production code should not be modified when a workflow requires it. Still, review every change, since the agent can make mistakes.
What should I check if the skill does not seem to activate?
Confirm the folder is in ~/.claude/skills/ or the project's .claude/skills/, that the host loads SKILL.md files, and that your request clearly describes a design task or names Product Design.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want an AI coding agent to follow structured design workflows such as flow audits, visual ideation, and design QA, and you are comfortable reviewing its output. Pick something else if you need a finished design tool or app, or if you need production code changed automatically. Check your rights before cloning any third-party live product.
Download the skill