SuperDesign Documentation

To publish the Superdesign extension, you must install the VS Code Extension Manager (vsce) and the Open VSX publisher (ovsx) globally via npm.

npm install -g @vscode/vsce ovsx

After initializing the SuperDesign extension, specific rules for Cursor or Claude Code are added. You can prompt the agent to perform design tasks and preview them in the SuperDesign canvas using the command:

cmd + shift + p -> superdesign: open canva

Optimization for Cursor users: For better performance, copy the prompt found in design.mdc and create a custom mode in Cursor using that same system prompt.

SuperDesign is an AI design agent for IDEs like Cursor, Windsurf, Claude Code, and VS Code. It allows you to generate UI mockups, components, and wireframes from natural language prompts.

To get started:

1. Install the extension from the Cursor/VS Code Marketplace.
2. Open the SuperDesign sidebar panel.
3. Type a prompt (e.g., Design a modern login screen).
4. View generated mockups, components, and wireframes.
5. Fork, tweak, and paste designs into your project.

You can use local LLM servers (like LM Studio) by configuring the AI Model Provider settings:

1. Select openai in the Ai Model Provider setting.
2. Enter any value in the Openai Api Key input.
3. Enter your local server endpoint in the Openai Url input (e.g., http://127.0.0.1:1234/v1).

Use this workflow for all regular feature updates and releases. This is the primary publisher.

1. Update Version: Increment the version field in package.json and ensure the publisher is set to SuperdesignDev and name is superdesign-official.
2. Build and Publish: Run the package command and then use vsce for the VS Code Marketplace and ovsx for the Open VSX Registry.

Note: You will need your Azure DevOps Personal Access Token (VSCE Token) and your Open VSX token.

# Build the extension
npm run package

# Publish to VS Code Marketplace
npx vsce publish --pat YOUR_VSCE_TOKEN

# Publish to Open VSX Registry
npx ovsx publish -p YOUR_OVSX_TOKEN

# Or all in one command:
npm run package && \
npx vsce publish --pat YOUR_VSCE_TOKEN && \
npx ovsx publish -p YOUR_OVSX_TOKEN

The extension uses a GitHub Actions workflow located at .github/workflows/publish.yml to automate publishing to the iganbold publisher when a version tag (e.g., v*) is pushed.

Requirements:

• Node.js 20+ is required for vsce compatibility.
• The following secrets must be configured in GitHub Settings:
  • VSCE_TOKEN: For the iganbold publisher.
  • OPEN_VSX_TOKEN: For the iganbold publisher.

name: Publish Extension

on:
  push:
    tags:
      - 'v*'

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm install -g @vscode/vsce ovsx
      - run: vsce publish --pat ${{ secrets.VSCE_TOKEN }}
      - run: ovsx publish -p ${{ secrets.OPEN_VSX_TOKEN }}

Use handleToolError to convert exceptions or raw error messages into a standardized ToolErrorResponse. This helper automatically handles Error objects (including truncated stack traces), strings, or unknown types, and allows you to provide context and an error_type.

Supported error_type values:

• validation
• security
• file_not_found
• permission
• execution
• unknown

To prevent directory traversal attacks and ensure security, use validateWorkspacePath to verify that a requested filePath resides within the allowed context.workingDirectory.

It returns a ToolErrorResponse if the path is invalid (e.g., contains .. or is outside the workspace) or null if the path is valid.

When implementing tools, use the standardized response types to ensure consistent communication with the agent. A response must be either a ToolSuccessResponse or a ToolErrorResponse.

• ToolSuccessResponse: Contains success: true and an object of arbitrary data.
• ToolErrorResponse: Contains success: false, an error message, an optional error_type, and optional details.

Use these helpers to verify filesystem entities before attempting operations:

• validateFileExists(absolutePath, filePath): Checks if a file exists at the provided absolutePath. Returns a ToolErrorResponse with error_type: 'file_not_found' if missing.
• validateDirectoryExists(absolutePath, dirPath): Checks if a directory exists at the provided absolutePath. Returns a ToolErrorResponse with error_type: 'file_not_found' if missing, or error_type: 'validation' if the path exists but is not a directory.