# secure-design | Harold Martin | Knowledge Base | Instagit

Open source "Cursor for design" - Secure and privacy first

GitHub Stars: 95

Repository: https://github.com/hbmartin/secure-design

---

## Articles

### [How the SecureDesign VS Code Extension Persists and Restores State Across Restarts](/hbmartin/secure-design/persistence-and-restoration-of-extension-state-on-vscode-restart)

Learn how the SecureDesign VS Code extension persists and restores UI state across restarts using the Memento API and WebviewPanelSerializer for seamless development.

- Tags: internals
- Published: 2026-03-03

### [How to Write Unit and Integration Tests for the Custom Agent Service in SecureDesign](/hbmartin/secure-design/write-tests-for-custom-agent-service-functionality)

Learn to write effective unit and integration tests for your Custom Agent Service in SecureDesign. Discover mocking techniques and real environment testing strategies to ensure robust code.

- Tags: 
- Published: 2026-03-03

### [Logging Mechanisms and Error Handling Strategies in the SecureDesign VS Code Extension](/hbmartin/secure-design/logging-mechanisms-and-error-handling-for-extension-troubleshooting)

Troubleshoot the SecureDesign VS Code extension using its three-layer logging architecture and structured error handling. Learn how to diagnose issues effectively.

- Tags: how-to-guide
- Published: 2026-03-03

### [How SecureDesign Handles Multi-Root Workspaces in VS Code: Implementation Deep Dive](/hbmartin/secure-design/how-does-secure-design-handle-multi-root-workspaces)

Learn how SecureDesign manages VS Code multi-root workspaces by isolating state and data with deterministic IDs and dedicated file watchers for each root. Optimize your workflow.

- Tags: 
- Published: 2026-03-03

### [How to Debug Communication Issues Between Webview Components and the VS Code Extension](/hbmartin/secure-design/debug-webview-communication-issues-between-components)

Effectively debug webview communication issues by logging payloads, validating JSON, checking listeners, and using Chrome DevTools to trace message flow between extension host and UI components.

- Tags: how-to-guide
- Published: 2026-03-03

### [Security Considerations and Measures for File Operation Tools in Secure-Design](/hbmartin/secure-design/security-measures-for-file-operation-tools)

Learn about security considerations and measures for file operation tools in Secure-Design. Discover how workspace boundaries, path traversal prevention, and resource limits protect your files from unauthorized access and destr...

- Tags: best-practices
- Published: 2026-03-03

### [How the Design Iteration Workflow Manages Versioning and Naming in .superdesign](/hbmartin/secure-design/design-iteration-workflow-versioning-and-naming)

Learn how the Secure Design extension manages versioning and naming in the .superdesign folder. Discover the hierarchical integer-based convention for traceable design iterations.

- Tags: 
- Published: 2026-03-03

### [How the GenerateTheme Tool Creates CSS Styling for AI-Generated Designs in Secure-Design](/hbmartin/secure-design/how-does-generatetheme-tool-create-css-styling)

Explore how GenerateTheme creates CSS styling for AI designs in Secure-Design. This AI tool validates paths, creates directories, and writes CSS content using the Vercel AI SDK.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Extend the Secure-Design Tool System with Custom Tools](/hbmartin/secure-design/best-practices-for-extending-tool-system-with-custom-tools)

Learn how to extend the secure-design tool system with custom tools. Implement Zod validation, secure filesystem operations, and register your new tool effectively.

- Tags: 
- Published: 2026-03-03

### [How SecureDesign Detects and Integrates with Cursor and Windsurf Development Environments](/hbmartin/secure-design/integration-with-cursor-and-windsurf-ides)

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

- Tags: how-to-guide
- Published: 2026-03-03

### [How the Secure Design Extension's File Watcher Service Detects and Reacts to Changes in Design-Related Files](/hbmartin/secure-design/file-watcher-service-detecting-design-file-changes)

Learn how the Secure Design VS Code extension's File Watcher Service detects and reacts to changes in design files like HTML, SVG, and CSS to automatically update your canvas panel.

- Tags: deep-dive
- Published: 2026-03-03

### [Architectural Design of the ChatMessagesRepository: Managing Chat History and Conversation State in Secure Design](/hbmartin/secure-design/architecture-of-chatmessagesrepository-for-chat-history)

Explore the architectural design of the ChatMessagesRepository for managing chat history and conversation state within the Secure Design extension. Learn how VS Code workspace persistence and DI are utilized.

- Tags: architecture
- Published: 2026-03-03

### [Troubleshooting Steps for API Connection Issues with AI Providers in Secure Design](/hbmartin/secure-design/troubleshooting-api-connection-issues-with-ai-providers)

Troubleshoot AI provider API connection failures in Secure Design. Verify API keys, check output for errors, and confirm model IDs exist to resolve common issues.

- Tags: how-to-guide
- Published: 2026-03-03

### [How the ServiceContainer Utilizes Dependency Injection to Manage Extension Services in Secure Design](/hbmartin/secure-design/servicecontainer-dependency-injection-management)

Learn how the ServiceContainer uses dependency injection to manage extension services. Discover its deterministic instantiation and type-safe retrieval methods for efficient service management.

- Tags: internals
- Published: 2026-03-03

### [How to Configure and Add Support for Custom AI Provider Endpoints in Secure-Design](/hbmartin/secure-design/configure-and-add-custom-ai-provider-endpoints)

Learn to configure custom AI provider endpoints in Secure-Design. Implement AIProvider, register with IProviderRegistry, and store credentials securely. Enhance your AI integrations now.

- Tags: how-to-guide
- Published: 2026-03-03

### [Protocol for Message Passing Between Webview and VS Code Extension Host in Secure Design](/hbmartin/secure-design/protocol-for-message-passing-between-webview-and-extension)

Discover the secure JSON protocol for webview to VS Code extension host message passing. Learn how vscode.postMessage and onDidReceiveMessage enable seamless communication.

- Tags: architecture
- Published: 2026-03-03

### [How API Keys Are Secured and Stored in the SecureStorageService Extension](/hbmartin/secure-design/how-are-api-keys-secured-and-stored-in-securestorageservice)

Learn how API keys are secured and stored in the SecureStorageService extension. Discover how VS Code's SecretStorage API encrypts credentials at the OS level for safe access.

- Tags: deep-dive
- Published: 2026-03-03

### [How the Canvas View Rendering Mechanism Displays Generated UI Mockups and Wireframes](/hbmartin/secure-design/rendering-mechanism-in-canvas-view-for-designs)

Discover the canvas view rendering mechanism that uses react-zoom-pan-pinch, sandboxed iframes, and SVG lines to display UI mockups and wireframes securely.

- Tags: internals
- Published: 2026-03-03

### [How SecureDesign Manages and Persists Workspace State Across VS Code Sessions](/hbmartin/secure-design/manage-and-persist-workspace-state-across-sessions)

**SecureDesign uses a singleton `WorkspaceStateService` that wraps VS Code's `ExtensionContext.workspaceState` Memento API to generate stable workspace identifiers and namespace all stored keys, ensuring chat history, secrets, ...

- Tags: internals
- Published: 2026-03-03

### [How Communication Works Between the Chat Sidebar and VS Code Extension Backend](/hbmartin/secure-design/communication-between-chat-sidebar-and-extension-backend)

**The chat sidebar communicates with the VS Code extension backend through a bidirectional postMessage API, where the React-based webview sends JSON requests to the ChatSidebarProvider, which delegates to ChatController for AI ...

- Tags: internals
- Published: 2026-03-03

### [How to Generate and Save UI Designs to the .superdesign Folder in Secure‑Design](/hbmartin/secure-design/process-for-generating-and-saving-ui-designs-to-superdesign-folder)

Learn how to generate and save UI designs to the .superdesign folder in Secure-Design using VS Code file system APIs. Follow this workflow for efficient design management.

- Tags: how-to-guide
- Published: 2026-03-03

### [How SecureDesign Establishes and Manages Connections with Local AI Models (LM Studio and Ollama)](/hbmartin/secure-design/secure-design-connections-with-lmstudio-and-ollama)

Learn how SecureDesign connects to local AI models like LM Studio and Ollama using VS Code's secret storage and a standardized interface for seamless integration.

- Tags: 
- Published: 2026-03-03

### [AI Provider Integration Architecture in Secure-Design: Unifying OpenAI, Anthropic, OpenRouter, and Local LLMs](/hbmartin/secure-design/architecture-for-integrating-multiple-ai-providers)

Explore the AI provider integration architecture in Secure-Design, unifying OpenAI, Anthropic, OpenRouter, and local LLMs via an abstract AIProvider interface for seamless model discovery and execution.

- Tags: architecture
- Published: 2026-03-03

### [How the SecureDesign Tool System Works: AI-Powered File Manipulation Architecture](/hbmartin/secure-design/how-does-the-tool-system-function-in-secure-design)

Explore the AI-powered file manipulation architecture of the SecureDesign tool system. Learn how read, write, edit, and other tools ensure secure workspace isolation.

- Tags: architecture
- Published: 2026-03-03