# How SecureDesign Detects and Integrates with Cursor and Windsurf Development Environments

> SecureDesign seamlessly integrates with Cursor and Windsurf by inspecting IDE app names and creating specific rule files for a streamlined development experience.

- Repository: [Harold Martin/secure-design](https://github.com/hbmartin/secure-design)
- Tags: how-to-guide
- Published: 2026-03-03

---

**SecureDesign detects Cursor and Windsurf by inspecting `vscode.env.appName` and creates IDE-specific rule files (`.cursor/rules/design.mdc` and `.windsurfrules`) to expose the Open Canvas command while adapting UI elements like prompt copying and icons accordingly.**

SecureDesign is a VS Code extension that brings secure design workflows to AI-powered development environments. According to the hbmartin/secure-design source code, the extension automatically detects whether it is running inside **Cursor** or **Windsurf** and configures itself to expose the **Open Canvas** command through custom rule files tailored to each platform.

## IDE Detection via VS Code Environment

The detection logic resides in [`src/extension.ts`](https://github.com/hbmartin/secure-design/blob/main/src/extension.ts) within the `detectCurrentIDE` function (lines 141-147). This utility inspects the `vscode.env.appName` property and checks for substring matches to determine the host environment.

```typescript
function detectCurrentIDE(): { isCursor: boolean; isWindsurf: boolean } {
    const appName = vscode.env.appName.toLowerCase();
    return {
        isCursor: appName.includes('cursor'),
        isWindsurf: appName.includes('windsurf'),
    };
}

```

This simple string-checking approach returns two boolean flags that drive all subsequent IDE-specific behavior throughout the extension lifecycle. The method runs during the **project initialization** routine (`initializeSecuredesignProject`) to determine which helper files to generate.

## IDE-Specific Rule File Generation

During project initialization, SecureDesign creates custom rule files that register the **Open Canvas** command within the host IDE's custom-rules engine. The extension only generates files for the detected environment, leaving other platforms untouched.

### Cursor Integration with `.cursor/rules/design.mdc`

When `isCursor` is true, the extension creates a `.cursor/rules/design.mdc` file inside the workspace root. This file contains a "securedesign: Open Canvas View" command that Cursor's rule engine recognizes and surfaces in the command palette.

The file creation logic (lines 1142-1150 and 1151-1169) ensures the directory structure exists before writing:

```typescript
if (isCursor) {
    const cursorRulesFolder = vscode.Uri.joinPath(workspaceRoot, '.cursor', 'rules');
    await vscode.workspace.fs.createDirectory(cursorRulesFolder);
    const designMdcPath = vscode.Uri.joinPath(cursorRulesFolder, 'design.mdc');
    await vscode.workspace.fs.writeFile(designMdcPath, Buffer.from(designRuleMdcContent));
}

```

### Windsurf Integration with `.windsurfrules`

For Windsurf environments (`isWindsurf` is true), the extension writes a `.windsurfrules` file directly to the workspace root (lines 1197-1206 and 1207-1218). This flat file structure aligns with Windsurf's configuration conventions and similarly exposes the Open Canvas functionality:

```typescript
if (isWindsurf) {
    const windsurfRulesPath = vscode.Uri.joinPath(workspaceRoot, '.windsurfrules');
    await vscode.workspace.fs.writeFile(windsurfRulesPath, Buffer.from(designRuleContent));
}

```

Both files are generated at runtime and are not bundled with the extension source, allowing them to reflect the current project state.

## UI Adaptations for Cursor and Windsurf

Beyond file generation, SecureDesign adjusts its webview UI to match the detected IDE. The extension passes the platform identifier to React components, which modify both the prompt-copying behavior and the displayed brand assets.

### Platform-Specific Prompt Copying

In [`src/webview/components/DesignFrame.tsx`](https://github.com/hbmartin/secure-design/blob/main/src/webview/components/DesignFrame.tsx) (lines 18-27), the `handleCopyPrompt` function builds distinct prompt strings for each platform. Cursor receives instructions to "use that as a reference to build a similar UI component," while Windsurf prompts request the AI to "analyze this design and create a similar UI component."

```tsx
switch (platform) {
    case 'cursor':
        promptText = `${file.content}\n\nAbove is the design implementation, please use that as a reference to build a similar UI component.`;
        platformName = 'Cursor';
        break;
    case 'windsurf':
        promptText = `${file.content}\n\nAbove is the design implementation. Please analyze this design and create a similar UI component.`;
        platformName = 'Windsurf';
        break;
    // …other platforms
}

```

This differentiation ensures that the copied prompts align with each IDE's AI assistant conventions and expected context formats.

### IDE Logo Assets in Webview

The extension registers distinct logo assets for each environment in [`src/templates/chatTemplate.ts`](https://github.com/hbmartin/secure-design/blob/main/src/templates/chatTemplate.ts) (lines 14-15). The `chatTemplate` function resolves URIs for both Cursor and Windsurf logos, allowing the React frontend to display the correct brand icon based on the active platform:

```typescript
export const chatTemplate = (extensionUri: vscode.Uri) => ({
    // …
    windsurf: webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'src', 'assets', 'windsurf_logo.png')).toString(),
    cursor: webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'src', 'assets', 'cursor_logo.png')).toString(),
});

```

## Summary

- **Environment Detection**: SecureDesign uses `vscode.env.appName` substring matching in `detectCurrentIDE` to identify Cursor and Windsurf.
- **Rule File Creation**: The extension generates `.cursor/rules/design.mdc` for Cursor and `.windsurfrules` for Windsurf to expose the Open Canvas command in each IDE's rule engine.
- **UI Customization**: Prompt copying logic in [`DesignFrame.tsx`](https://github.com/hbmartin/secure-design/blob/main/DesignFrame.tsx) and logo assets in [`chatTemplate.ts`](https://github.com/hbmartin/secure-design/blob/main/chatTemplate.ts) adapt to the detected platform, providing tailored AI instructions and visual branding.

## Frequently Asked Questions

### How does SecureDesign know which IDE is hosting it?

SecureDesign inspects the `vscode.env.appName` property and checks for the substrings "cursor" or "windsurf" in the `detectCurrentIDE` function located in [`src/extension.ts`](https://github.com/hbmartin/secure-design/blob/main/src/extension.ts). This runtime detection returns boolean flags that determine which integration paths to activate.

### What files does SecureDesign create for Cursor integration?

When running inside Cursor, SecureDesign creates a `.cursor/rules/design.mdc` file within the workspace. This file contains custom rules that register the "Open Canvas" command with Cursor's AI assistant, making the SecureDesign workflow visible in Cursor's command palette.

### Can SecureDesign work with both Cursor and Windsurf simultaneously?

The extension detects one environment per session based on `vscode.env.appName`. While the detection logic can theoretically identify both flags if the app name contains both substrings, the standard behavior creates files for the specific detected IDE only. The codebase supports both integrations, but each workspace typically activates one at a time.

### Where are the IDE detection rules defined in the codebase?

The detection rules are defined in [`src/extension.ts`](https://github.com/hbmartin/secure-design/blob/main/src/extension.ts) at lines 141-147 within the `detectCurrentIDE` function. The actual file creation logic for Cursor appears at lines 1142-1169, while Windsurf file creation is handled at lines 1197-1218 in the same file.