playbooks

home / skills / partme-ai / full-stack-skills / modao

modao skill

/skills/modao

This skill guides rapid prototyping and collaboration in Modao, helping you create quick prototypes and reusable components efficiently.

npx playbooks add skill partme-ai/full-stack-skills --skill modao

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

Files (2)
SKILL.md
636 B
---
name: modao
description: Provides comprehensive guidance for Modao prototyping tool including rapid prototyping, component libraries, and collaboration. Use when the user asks about Modao, needs to create quick prototypes, or work with Modao components.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- [待完善：根据具体工具添加使用场景]

## How to use this skill

[待完善：根据具体工具添加使用指南]

## Best Practices

[待完善：根据具体工具添加最佳实践]

## Keywords

[待完善：根据具体工具添加关键词]

Overview

This skill provides practical, step-by-step guidance for using Modao, a prototyping and collaboration tool for UI/UX design. It covers rapid prototyping, building and managing component libraries, and tips for team collaboration to speed up design-to-development handoff. The content focuses on actionable workflows, common patterns, and troubleshooting advice to get working prototypes quickly.

How this skill works

The skill explains how to create screens, link interactions, and export assets in Modao. It describes organizing reusable components into libraries, applying variants and responsive constraints, and maintaining versions for team projects. It also outlines collaboration features like comments, permissions, and handoff notes for developers.

When to use it

  • When you need to produce a clickable prototype for usability testing or stakeholder demos.
  • When building a reusable component library to keep UI consistent across screens.
  • When coordinating design handoff with developers and exporting specs and assets.
  • When iterating quickly on interaction flows and testing transitions before engineering.
  • When setting up a shared project for a cross-functional team to review and comment.

Best practices

  • Start with a low-fidelity flow to validate structure before detailing visuals.
  • Create atomic components (buttons, inputs) and compose them into higher-level components.
  • Use clear naming and folders for components and pages to simplify reuse and maintenance.
  • Annotate interactions and states for developers; include spacing and behavior notes.
  • Leverage versioning and branches for major changes to avoid disrupting the main prototype.

Example use cases

  • Design team prepares a 10-screen clickable prototype for a usability test in two days.
  • Product manager assembles a component library from an existing app to standardize new features.
  • Developer exports assets and interaction specs from Modao for implementation in a sprint.
  • Cross-functional review uses comments and version history to converge on interaction details.
  • UX researcher runs quick A/B variations by duplicating flows and toggling component variants.

FAQ

Can I export assets for development from Modao?

Yes. Export images, SVGs, and CSS-like measurements; include notes and interaction specs for developers.

How do I keep components consistent across projects?

Publish shared component libraries and enforce naming/structure conventions so teams import the same sources.