Skip to content
Get packs

Product Design Workflows

Guides an agent through UX audits, design ideation, cloning live UIs into code, and design QA

Source Download skill
Repository
XiaomiMiMo/MiMo-Code
Stars
13,743
Licence
MIT
Files
15 files

What it does

This is a bundle of instruction files that teaches an AI coding agent how to behave like a product designer. Once installed, when you ask for design help, the agent first reads a routing guide, then follows the matching workflow: saving design context, auditing a user flow, brainstorming visual directions, recreating a live web page as code, implementing a chosen design, checking the result visually, or packaging a prototype to share. The bundle itself is written as instructions and reference material rather than a standalone program.

Great for

  • Designers who want an agent to run structured UX audits or critiques of a flow
  • Developers turning a chosen visual direction or live page into a working frontend
  • Product teams doing design QA against a source-grounded prototype

Skip it if

  • Users who expect a finished design tool or app: this only changes how the agent works, and output quality depends on the host agent and its tools
  • Anyone who needs production code changed automatically: the instructions say prototypes should be isolated and production code should not be modified when a workflow requires it, but the agent can still make mistakes
  • Cloning or reproducing third-party live products without checking rights: the skill's purpose includes cloning live product surfaces, which may raise copyright or terms-of-service concerns

Try asking

  • “Audit this checkout flow for usability problems and separate what the screenshots show from what needs deeper testing”
  • “Ideate three visual directions for our onboarding screen before we write any code”
  • “Turn this URL into a React prototype that matches its layout and styling”
  • “Run design QA on the prototype we just built and list visual mismatches”
Step-by-step guide: how to use Product Design WorkflowsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    product-design.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip product-design.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip product-design.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the workflow you want (for example audit or url-to-code) so the agent loads only the relevant instructions
  • Give the agent a target repository or existing frontend stack so it prefers your tools over creating a new app
  • Ask for evidence-grounded findings and note which points still need real user testing

What's inside

  • references/communication-protocol.md
  • references/critical-overrides.md
  • references/existing-codebase-edits.md
  • SKILL.md
  • workflows/audit/agents/openai.yaml
  • workflows/audit/references/design-audit-framework.md
  • workflows/audit/SKILL.md
  • workflows/design-qa/SKILL.md
  • workflows/get-context/SKILL.md
  • workflows/ideate/SKILL.md
  • workflows/image-to-code/SKILL.md
  • workflows/index/SKILL.md
  • workflows/share/SKILL.md
  • workflows/url-to-code/SKILL.md
  • workflows/user-context/SKILL.md

Redistributed unmodified from XiaomiMiMo/MiMo-Code under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.