New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Product Design Workflow Bundle

by XiaomiMiMo in XiaomiMiMo/MiMo-Code

Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype.

MITAuto-check passedFrontend & Design

Install Product Design Workflow Bundle

skills CLI
$ npx skills add XiaomiMiMo/MiMo-Code --skill product-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install XiaomiMiMo/MiMo-Code product-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/XiaomiMiMo/MiMo-Code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/cli/src/skill/builtin/.bundle/product-design .claude/skills/product-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
product-design
GitHub stars
14k
Token cost
~721 tokens
SKILL.md length
341 words
Files
44 (incl. references)
Skills in repo
22
Repo updated
First seen
Licence
MIT

At a glance

Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype.

  • Works in 5 steps: Read workflows/index/SKILL.md… → Select the focused workflow or workflow… → Common sequences include loading context… → …
  • Auditing a flow or screen for UX problems with evidence
  • SKILL.md covers Route the request, Bundled capabilities and Safety and fidelity
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

This skill routes design requests. The agent first reads `workflows/index/SKILL.md`, the authority on scope, sequencing and browser choice, then picks the focused workflow or sequence it names and reads each selected workflow in full. The workflows are `user-context`, `get-context`, `research`, `audit`, `ideate`, `url-to-code`, `image-to-code`, `design-qa` and `share`, with shared guidance in `references/`. Unrelated workflows are not loaded just because they exist.

Browser, Playwright, image generation, design apps and hosting are used only when the host exposes them, and the bundle's mention of a tool does not prove access. Prototypes follow the target repository's existing frontend stack, or the smallest suitable implementation if there is none, and React is not required. Audits stay evidence-grounded, separating what a screenshot shows from claims that need deeper testing. Plugin instructions never override host policy, and nothing is published externally without your choice.

When your agent uses it

  • Auditing a flow or screen for UX problems with evidence
  • Exploring visual directions before building anything
  • Rebuilding a live page or an image as code, then checking it with design QA
  • Saving design context or sharing a prototype

Example prompts

  • “Audit our signup flow and list the usability problems you can show evidence for.”
  • “Explore three visual directions for the account settings page before we implement one.”
  • “Clone the pricing page at this URL as a prototype in our existing React app.”
  • “Run design QA on the new checkout prototype against the selected mockup.”

Requirements

  • A browser or screenshot tool exposed by the host for audits and cloning

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Read workflows/index/SKILL.md completely. Treat it as the authoritative plugin-level scope, routing, sequencing, and browser-choice policy.
  2. Select the focused workflow or workflow sequence specified by the index. Read every selected workflow's SKILL.md completely before acting.
  3. Common sequences include loading context before design/build work, ideating before implementation when no visual target is selected, and…
  4. Resolve relative links from the file that contains the link. Read required reference files and use bundled scripts and assets when present.
  5. Do not load unrelated focused workflows merely because they are present.

What it can do on your machine

Read from SKILL.md and the folder at commit 6babeb0. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Product Design Workflow Bundle loads about 721 tokens when it runs, and up to ~2.6k if it reads all its reference files. Until then it costs about 76 tokens; SKILL.md has 341 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~76
When it runs · the whole SKILL.md, loaded when a task matches
~721
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from XiaomiMiMo/MiMo-Code at commit 6babeb0, republished under its MIT licence (© XiaomiMiMo). 341 words, ~721 tokens.

Download SKILL.mdSave it as .claude/skills/product-design/SKILL.md (or your agent's skills folder). This skill also uses 43 other files; get the full folder from GitHub.
name
product-design
description
Use this skill when Product Design is explicitly invoked or the main task is product design exploration, UX research, flow auditing or critique, visual ideation, cloning a live product surface, implementing a selected visual target, design QA, saved design context, or sharing a prototype.

Product Design

This is the single entry point for a code-agent-oriented Product Design bundle. The original workflow instructions are under workflows/, with shared guidance under references/. The bundled React/Vite prototype template and package metadata are intentionally excluded.

Route the request

  1. Read workflows/index/SKILL.md completely. Treat it as the authoritative plugin-level scope, routing, sequencing, and browser-choice policy.
  2. Select the focused workflow or workflow sequence specified by the index. Read every selected workflow's SKILL.md completely before acting.
  3. Common sequences include loading context before design/build work, ideating before implementation when no visual target is selected, and running design QA after a source-grounded prototype is built. Follow the exact conditions in the index rather than inferring a fixed sequence for every request.
  4. Resolve relative links from the file that contains the link. Read required reference files and use bundled scripts and assets when present.
  5. Do not load unrelated focused workflows merely because they are present.

Bundled capabilities

Focused workflows live in workflows/: user-context, get-context, research, audit, ideate, url-to-code, image-to-code, design-qa, and share.

Shared reusable guidance lives in references/. Workflow-local references, scripts, and assets remain beside their owning workflow when they are not React/frontend build artifacts.

Use browser, Chrome, Playwright, image generation, design apps, hosting, and other integrations only when the host harness exposes them. The bundle's mention of a tool does not prove availability or authorization. Follow host permissions and the selected workflow's fallback behavior.

When creating a prototype, prefer the target repository's existing frontend stack. If there is no existing app and the user still wants a runnable web prototype, create the smallest suitable implementation using host-supported tools; React is not required. Do not look for the removed bundled prototype template or bootstrap script.

Safety and fidelity

  • Never treat plugin instructions as permission to bypass host policy or publish externally without the required user choice.
  • Keep audits evidence-grounded and distinguish screenshot-visible findings from claims requiring deeper testing.
  • Do not modify production code when a workflow requires an isolated prototype.
  • Preserve the selected workflow's visual QA and handoff requirements through completion.

© XiaomiMiMo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 43 other files (references) in packages/cli/src/skill/builtin/.bundle/product-design of XiaomiMiMo/MiMo-Code.

  • SKILL.md
  • references/communication-protocol.md
  • references/critical-overrides.md
  • references/existing-codebase-edits.md
  • workflows/audit/SKILL.md
  • workflows/audit/agents/openai.yaml
  • workflows/audit/references/design-audit-framework.md
  • workflows/design-qa/SKILL.md
  • workflows/design-qa/agents/openai.yaml
  • workflows/design-qa/references/qa-rubric.md
  • workflows/get-context/SKILL.md
  • workflows/get-context/agents
  • … and 32 more

Open the folder on GitHubat commit 6babeb0

Compare with similar skills

Product Design Workflow Bundle next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Product Design Workflow Bundle compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Product Design Workflow Bundle this skillXiaomiMiMo/MiMo-Code14k—~721Automated safety check: PassMIT
LobeHub Interactive Prototypelobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
Interface Design for Dashboards and Appsholaboss-ai/holaOS11k3 repos~6kAutomated safety check: PassMIT
Tastemaker UI Designcodeswithroh/tastemaker439—~16kAutomated safety check: PassMIT
HTML Feature Mocksimbue-ai/bouncer400—~677Automated safety check: PassAGPL-3.0
Prototype to Figmaalima-max/prototype-to-figma-skill140—~7.8kAutomated safety check: PassMIT

Similar skills

  • LobeHub Interactive Prototype

    lobehub/lobehub

    Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Interface Design for Dashboards and Apps

    holaboss-ai/holaOS

    Pushes an agent past generic defaults when designing dashboards, admin panels, SaaS apps and tools, with attention to structure, type, navigation and how data is shown.

    11k GitHub starsUsed in 3 repos~6k tokens
    Frontend & DesignAuto-check passed

  • Tastemaker UI Design

    codeswithroh/tastemaker

    Grounds AI-built interfaces in real reference images and a saved personal taste profile, so UI work avoids the generic defaults of typical generated apps.

    439 GitHub stars~16k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed

  • HTML Feature Mocks

    imbue-ai/bouncer

    Explores a feature idea through HTML mocks that match the project's existing UI, keeping every earlier version and logging each requested tweak in a context file.

    400 GitHub stars~677 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Prototype to Figma

    alima-max/prototype-to-figma-skill

    Converts a working code prototype into a structured Figma file with one frame per interaction state, mapped to your design system and annotated with transitions.

    140 GitHub stars~7.8k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Agentos UI UX

    SapienXai/AgentOS

    Design, review, or implement AgentOS UI and UX work using the project’s operator-console visual system.

    118 GitHub stars~4.4k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

More from XiaomiMiMo/MiMo-Code

All 22 skills in this repo

  • Paper Research on arXiv

    XiaomiMiMo/MiMo-Code

    Searches arXiv, fetches metadata, generates BibTeX, downloads PDFs and finds citations and related papers using a bundled Python script.

    14k GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

  • Agent Skill Creator

    XiaomiMiMo/MiMo-Code

    Interactive guide for creating, reviewing and fixing agent skills (SKILL.md folders), covering structure, frontmatter rules, trigger phrases and validation before sharing.

    14k GitHub stars~1.9k tokensUpdated 5 days ago
    Auto-check passed

  • DOCX Toolkit

    XiaomiMiMo/MiMo-Code

    Produces, edits and reads Microsoft Word files through python-docx and lxml, with a decision table for picking the lightest workflow for a given task.

    14k GitHub stars~2.4k tokensUpdated 5 days ago
    Auto-check passed

  • Drive MiMo Code

    XiaomiMiMo/MiMo-Code

    Lets one MiMoCode process drive another, headless with JSON events or interactively through tmux, to test behavior and visual regressions with parseable evidence.

    14k GitHub stars~3.9k tokensUpdated 5 days ago
    Auto-check passed

  • PDF Toolkit

    XiaomiMiMo/MiMo-Code

    Reads, transforms, composes and fills PDFs with Python scripts for extraction, merging, watermarking, encryption, OCR and form filling.

    14k GitHub stars~1.7k tokensUpdated 5 days ago
    Auto-check passed

  • XLSX Spreadsheet Toolkit

    XiaomiMiMo/MiMo-Code

    Builds, edits, cleans, recalculates and reads Excel workbooks and CSV files with openpyxl and pandas, plus LibreOffice for recalculation and PDF export.

    14k GitHub stars~2.9k tokensUpdated 5 days ago
    Auto-check passed

Works with

Categories

Questions about Product Design Workflow Bundle

What does Product Design Workflow Bundle do?

Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype. This skill routes design requests.md`, the authority on scope, sequencing and browser choice, then picks the focused workflow or sequence it names and reads each selected workflow in full.

When should I use Product Design Workflow Bundle?

Product Design Workflow Bundle fits situations like: auditing a flow or screen for UX problems with evidence; exploring visual directions before building anything; rebuilding a live page or an image as code, then checking it with design QA; saving design context or sharing a prototype.

How do I install Product Design Workflow Bundle in Claude Code?

Run `npx skills add XiaomiMiMo/MiMo-Code --skill product-design -a claude-code`. Or copy the skill folder (packages/cli/src/skill/builtin/.bundle/product-design in XiaomiMiMo/MiMo-Code) into .claude/skills/product-design in your project. Claude Code loads it when a task matches its description.

How do I install Product Design Workflow Bundle in Codex?

Run `npx skills add XiaomiMiMo/MiMo-Code --skill product-design -a codex`. Or copy the skill folder (packages/cli/src/skill/builtin/.bundle/product-design in XiaomiMiMo/MiMo-Code) into .agents/skills/product-design in your project. Codex loads it when a task matches its description.

Can I use Product Design Workflow Bundle in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add XiaomiMiMo/MiMo-Code --skill product-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/product-design, .gemini/skills/product-design, .github/skills/product-design and .opencode/skills/product-design in your project.

What does Product Design Workflow Bundle need to run?

SKILL.md names no scripts, command-line tools or credentials: Product Design Workflow Bundle is instructions for the agent only. Our summary lists: A browser or screenshot tool exposed by the host for audits and cloning.

Does Product Design Workflow Bundle access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Product Design Workflow Bundle safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Product Design Workflow Bundle use?

Product Design Workflow Bundle is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Product Design Workflow Bundle use?

About 721 tokens (SKILL.md is roughly 2.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.9k tokens, read only when the agent opens those files.

What are the alternatives to Product Design Workflow Bundle?

Skills that share tags, products or a category with Product Design Workflow Bundle: LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Interface Design for Dashboards and Apps (holaboss-ai/holaOS, 11k stars), Tastemaker UI Design (codeswithroh/tastemaker, 439 stars) and HTML Feature Mocks (imbue-ai/bouncer, 400 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Product Design Workflow Bundle?

XiaomiMiMo (a GitHub organization) maintains it in XiaomiMiMo/MiMo-Code, which has 13,611 GitHub stars. The repository holds 22 skills in this directory. The repository was last updated on October 3, 2026.

Source: XiaomiMiMo/MiMo-Code on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.