Mokly is an AI-native design tool created to prevent "AI slop" and accidental clobbers in software development by codifying design specifications and forcing AI coding agents to align their implementations with these defined constraints. By bridging the gap between design and development, Mokly ensures that teams maintain consistency across their applications. The tool allows developers to mockup their entire app using React, which then acts as a single source of truth for both human and AI developers. Mokly is developed by Calum Moore Consulting Limited and is designed to operate within existing Git workflows, ensuring that design decisions are versioned alongside the code. By treating designs as code, Mokly enables teams to review, comment on, and approve screens directly within pull requests, keeping the design process tightly integrated with the development cycle. The platform supports both private and public projects, with dedicated cloud hosting for catalogues, and offers an open-source CLI that allows developers to maintain full control over their source code and local development processes. Mokly Cloud manages hosting, review interfaces, and agent sessions, but it does not claim ownership of the source material, ensuring a developer-centric experience. Some of the key features are:

• Codified Design: Enforces implementation alignment by using React-authored mockups as the authoritative design specification for agents.
• Catalogue Browsing: Provides a visual catalogue of every branch and screen, allowing teams to browse, search, and review changes with ease.
• Pull Request Integration: Links design reviews directly to Git pull requests, ensuring comments and approvals stay in sync with code changes.
• Agent Sessions: Facilitates live sessions where AI agents can edit mockup sources directly within a branch, allowing for real-time collaboration.
• Component-Driven: Author designs using React and shared component libraries to ensure consistency between design prototypes and final implementation.
• CI/CD Support: Publishes catalogues automatically via CI/CD workflows, providing visibility into design changes for every single pull request.
• Secure Collaboration: Offers workspace management with role-based access control, keeping private projects protected while supporting open-source catalogues.

To use Mokly, developers install the Mokly CLI as a development dependency in their repository and define their screens using TypeScript. Once configured, the CLI allows users to build and serve these screens locally. During development, developers can publish their catalogues to the cloud, where teams can review visual changes, leave comments on specific components, and approve designs. When integrated with Git, Mokly automatically tracks changes across branches, creating a clear audit trail of design updates. Some common use cases include:

• Preventing Design Drift: Ensuring that AI-generated code remains faithful to the approved design specifications by setting hard constraints.
• Design Reviews: Enabling non-technical stakeholders or designers to review and comment on functional screen mockups within a pull request workflow.
• Component Documentation: Maintaining a living library of shared components that are automatically updated and visually verifiable as the codebase evolves.
• Collaborative Prototyping: Using AI agents to rapidly iterate on UI mockups while ensuring that all changes are tracked and approved within a version-controlled environment.