Zippa Design Engine

Zippa Design Engine is a VS Code extension that turns a safe, high-performance UI/UX prompt library into fast design workflows for Claude Code, Codex, and other AI coding assistants.

The extension turns the Zippa Design Engine prompt library into Command Palette actions. Each command assembles the right prompt, copies it to the clipboard, and opens it in a Markdown editor so you can paste it into Claude Code, Codex, or any AI coding assistant.

Features

• Command Palette workflows for professional UI/UX improvement.
• Zippa Activity Bar panel with clickable workflows.
• Zippa status bar shortcut.
• Bundled prompt library for self-contained installed use.
• High-performance prompts that require audit, safe implementation, validation, and non-regression reporting.
• No automatic file editing. The extension prepares prompts; your AI coding assistant performs the work after auditing.
• No runtime external dependencies.

Commands

• Zippa: Improve Current Design
• Zippa: Audit UI/UX
• Zippa: Generate Client Portal
• Zippa: Generate Dashboard
• Zippa: Apply Theme
• Zippa: Add Safe Animations
• Zippa: Validate Non-Regression
• Zippa: Open Prompt Library

UI Surfaces

• Command Palette: run any Zippa: command with Ctrl+Shift+P.
• Activity Bar: open the Zippa view and click a workflow.
• Status Bar: click Zippa to choose a workflow quickly.
• Markdown preview document: review the generated prompt before pasting it into Claude Code or Codex.

How It Works

1. Run a Zippa: command from the VS Code Command Palette.
2. If needed, enter the screen, route, or file to target.
3. The extension combines the correct prompt, template, checklist, or design-system document.
4. The combined prompt is copied to the clipboard.
5. The same prompt opens in a temporary Markdown editor.
6. Paste it into Claude Code or Codex and run the workflow.

Run In Development Mode

1. Open this folder in VS Code:

C:\Users\zippa\OneDrive\Desktop\criarREPO\zippa-design-engine\future-vscode-extension

2. Press F5.
3. A new Extension Development Host window opens.
4. Open Command Palette.
5. Run any Zippa: command.

Validate

npm run sync
npm run validate

This syncs the prompt library into bundled-engine/, then checks JavaScript syntax, required engine files, and command manifest shape.

Install Locally As VSIX

This requires internet access the first time because npx @vscode/vsce package may need to download the VS Code extension packaging tool.

npm run install:local

The script validates, packages, and installs the extension into VS Code using:

code --install-extension <generated-file>.vsix --force

After installation, restart VS Code and run Zippa: commands from the Command Palette.

Publish To VS Code Marketplace

Publishing requires a Visual Studio Marketplace publisher ID and an Azure DevOps Personal Access Token with Marketplace management permissions.

Use:

npm run publish:marketplace

The script will:

1. Ask for the Marketplace publisher ID.
2. Update package.json if needed.
3. Sync the bundled prompt library.
4. Validate the extension.
5. Package the extension.
6. Run vsce publish.

When vsce asks for the Personal Access Token, paste it into the terminal only. Do not paste tokens into chat, documents, or source files.

To create only the package for manual upload:

powershell -ExecutionPolicy Bypass -File scripts/publish-marketplace.ps1 -PublisherId YOUR_PUBLISHER_ID -PackageOnly

Bundled Prompt Library

Before packaging, the extension runs:

npm run sync

This copies the current Zippa Design Engine prompts, templates, checklists, examples, and design-system docs into bundled-engine/. That makes the installed .vsix self-contained.

Settings

• zippaDesignEngine.openPromptAfterCopy: opens the generated prompt after copying it. Default: true.
• zippaDesignEngine.showStatusBarButton: shows the Zippa status bar shortcut. Default: true.

Safety Model

This extension does not modify your app directly. It generates high-performance prompts that require the AI assistant to:

• Audit before editing.
• Verify existing behavior.
• Preserve logic, APIs, auth, permissions, database behavior, routes, and integrations.
• Improve only scoped UI/UX.
• Test and validate after implementation.
• Confirm no regression.
• Report exactly what changed and what stayed untouched.