.codex-plugin/plugin.json

{
  "name": "wonder",
  "version": "0.2.2",
  "description": "Create and edit designs with Codex on a canvas where every design is real code.",
  "author": {
    "name": "Wonder",
    "email": "team@wonder.so",
    "url": "https://wonder.design"
  },
  "homepage": "https://wonder.design",
  "repository": "https://github.com/aquila-lab/wonder-plugins.git",
  "license": "MIT",
  "keywords": [
    "wonder",
    "design",
    "ui",
    "canvas",
    "design-to-code",
    "code-to-design",
    "design-system",
    "mcp"
  ],
  "mcpServers": "./.mcp.json",
  "skills": "./skills/",
  "interface": {
    "displayName": "Wonder",
    "shortDescription": "Design on a real-code canvas",
    "longDescription": "Wonder connects ChatGPT and Codex to a canvas where every design is real code. Your agent can inspect existing designs, components, variables, and documentation, create new screens and flows, and edit designs in place. It works with the actual HTML and CSS structure instead of screenshots, so you can design from your codebase and move approved designs back into production without rebuilding them. Wonder requires a Wonder account. It works on any Wonder file you can reach, and the Wonder app does not need to be open.",
    "developerName": "Wonder",
    "category": "Creativity",
    "capabilities": [
      "Interactive",
      "Read",
      "Write"
    ],
    "websiteURL": "https://wonder.design",
    "supportURL": "https://wonder.design/docs/support",
    "privacyPolicyURL": "https://wonder.design/privacy-policy",
    "termsOfServiceURL": "https://wonder.design/terms-of-service",
    "brandColor": "#D262FF",
    "composerIcon": "./assets/icon.png",
    "logo": "./assets/icon.png",
    "logoDark": "./assets/icon.png",
    "defaultPrompt": [
      "Use the Tailwind tokens from my repo and design a pricing page in Wonder",
      "Implement my Wonder design in this codebase, using my code conventions",
      "Match this Wonder artboard's style to the components in src/components/"
    ],
    "screenshots": [
      "./assets/design-and-code-in-sync.png",
      "./assets/full-code-context.png",
      "./assets/browse-component-library.png",
      "./assets/visualize-production.png"
    ]
  },
  "extensions": {
    "com.openai": {
      "review": {
        "test_cases": {
          "positive": [
            {
              "description": "List a file's artboards with the Wonder app closed, without changing anything",
              "prompt": "Use Wonder to list the artboards in my Wonder file Review Sample.",
              "tools_triggered": "list_files, open_file, get_artboards",
              "expected_behavior": "Finds the Review Sample file, returns the name and size of each artboard on its page, and changes nothing. Works with the Wonder app closed."
            },
            {
              "description": "Create a single component on the canvas",
              "prompt": "In my Wonder file Review Sample, create a purple primary button that says Get started.",
              "tools_triggered": "list_files, open_file, get_skills, create_artboard, update_elements, take_screenshot, finish_artboard, finish_session",
              "expected_behavior": "A new artboard sized to the button is added to the Review Sample file, holding a purple button labeled Get started."
            },
            {
              "description": "Design a multi-section page",
              "prompt": "Design a pricing page in my Wonder file Review Sample with three plans: Free, Pro, and Team.",
              "tools_triggered": "list_files, open_file, get_skills, create_artboard, update_elements, duplicate_elements, take_screenshot, finish_artboard, finish_session",
              "expected_behavior": "A new desktop-size artboard is added to the Review Sample file with a header and three plan cards named Free, Pro, and Team, each with a price and a button."
            },
            {
              "description": "Edit an existing design in place",
              "prompt": "In the pricing page you just created in Wonder, change the Pro plan price to $29.",
              "tools_triggered": "find_elements, update_elements, take_screenshot, finish_artboard, finish_session",
              "expected_behavior": "Only the Pro plan price changes to $29. The other plans and artboards stay the same."
            },
            {
              "description": "Read a design as code",
              "prompt": "Give me the React and Tailwind code for the pricing page artboard in Wonder.",
              "tools_triggered": "get_artboards, get_element_code",
              "expected_behavior": "Returns JSX with Tailwind classes for the pricing page artboard and leaves the canvas unchanged."
            }
          ],
          "negative": [
            {
              "description": "Deleting files is out of scope. Wonder exposes no tool that moves files to the trash, so the agent should say it cannot delete files and must not delete artboards instead.",
              "prompt": "Delete all of my Wonder files."
            },
            {
              "description": "Changing who can see a file is out of scope. Wonder does not let the agent change file visibility, so the agent should explain that and point the user to the share settings in Wonder.",
              "prompt": "Make my Wonder file Review Sample public so anyone with the link can view it."
            },
            {
              "description": "Other design tools are out of scope. Wonder cannot read or edit Figma files, so the agent should say so and not call any Wonder tool that changes the canvas.",
              "prompt": "Open my Figma file and change its brand colors."
            }
          ]
        },
        "demo_recording_url": "https://youtu.be/Lx9wjV5YBys",
        "commerce": false,
        "commerce_description": "Wonder does not sell products or process payments in ChatGPT or Codex."
      },
      "publication": {
        "release_notes": "First directory release. Read, create, and edit Wonder canvas designs from ChatGPT and Codex through the Wonder MCP server, with or without the Wonder app open."
      }
    }
  },
  "apps": "./.app.json"
}