Skip to content

A Figma plugin that allows you to do a simple usability test in Figma using AppAgent

License

Notifications You must be signed in to change notification settings

FigmaAI/klever

Repository files navigation

Klever

Klever Logo

A clever analyzing tool for UI powered by AI

Get an instant usability testing report of your design with the AI AppAgent. Inspired by AppAgent: Multimodal Agents as Smartphone Users, Klever is a Figma plugin project designed to empower designers and developers by providing AI-driven insights into their UI designs.

preview

Features

  • GPT-4o Powered Multimodal Agents: Utilize advanced AI to understand both screenshots and text descriptions, simulating real-world user interactions with your UI.
  • Instant Usability Reports: Receive comprehensive usability testing reports within seconds, highlighting potential usability issues and offering actionable recommendations.
  • Persona Simulation: Experiment with different user personas to see how various users might experience your design.
  • Seamless Figma Integration: Analyze your designs directly within Figma, streamlining your workflow.

How to Use Klever

  1. Open the design file you want to analyze in Figma.
  2. Navigate to Plugins > Klever and open the plugin.
  3. Enter your OpenAI API key. If you don't have one, get it from here. Make sure you have access to GPT-4 Vision.
  4. Select the frame or component you want to analyze.
  5. (Optional) Create a Task for the AI to perform and set up different personas.
  6. Click "Submit" or press "Cmd/Ctrl Enter" to receive your AI-powered usability testing report.

For Developers

Quickstart

  • Install dependencies with yarn.
  • Start webpack in watch mode with yarn build:watch.
  • Import the plugin into Figma by navigating to Plugins -> Development -> Import plugin from manifest... and selecting the manifest.json file from this repo.

Toolings

This project uses:

  • React Webpack for the UI.
  • TypeScript for type safety.
  • Prettier for code formatting.
  • Figma plugin API for interacting with Figma.

Contributing

We aim to improve Klever by enhancing the AppAgent Figma prototype. If you're interested in contributing, please visit our repository and follow the guidelines:

Your contributions can significantly impact designers and developers worldwide.

Acknowledgments

This project was inspired by Tencent's research on AppAgent: Multimodal Agents as Smartphone Users. We are grateful for their groundbreaking work in AI and usability testing.

About

A Figma plugin that allows you to do a simple usability test in Figma using AppAgent

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published