UI First VS Code Extension

UI First is a Penpot-first VS Code extension that turns a prompt into:

1. a Copilot-engineered design prompt
2. a Replicate mockup
3. a strict Penpot DSL payload
4. an editable Penpot board
5. a generated Next.js + Tailwind app from the selected Penpot board

Current Workflow

1. Open UI First in the Activity Bar and use the Penpot Studio view.
2. Configure uiFirst.penpotBaseUrl to your local Penpot instance.
3. Configure a Replicate API key with UI First: Configure Replicate API Key.
4. Run UI First: Start Penpot Flow.
5. Open the embedded Penpot editor or your local Penpot instance.
6. Open the UI First Bridge plugin in Penpot, save the bridge URL and session token, then sync the queued design.
7. Edit the board in Penpot.
8. Select exactly one Penpot board and export it through the plugin.
9. Run UI First: Convert Selected Frame To Code to scaffold a Next.js app.

Features

• Penpot-first control panel inside VS Code
• Embedded Penpot editor with strict in-panel embed checks
• Local bridge server for Penpot plugin communication
• Companion Penpot plugin for syncing DSL and exporting the selected board
• Copilot prompt engineering and structured JSON generation
• Replicate mockup generation with SecretStorage-backed API token handling
• Next.js + Tailwind scaffold generation from Penpot board export JSON

Commands

• UI First: Start Penpot Flow
• UI First: Open Penpot Editor
• UI First: Sync Design To Penpot
• UI First: Convert Selected Frame To Code
• UI First: Configure Replicate API Key
• UI First: Open Penpot Studio

Configuration

• uiFirst.penpotBaseUrl Base URL of the local Penpot instance embedded inside the editor panel.
• uiFirst.penpotBridgePort Local port used by the extension bridge and Penpot plugin.
• uiFirst.outputFramework Current code target. Right now only nextjs is supported.

Generated Flow Artifacts

Each flow writes artifacts into:

.ui-first-flow/<session-token>/

Current contents:

• mockup.png
• penpot.dsl.json
• flow.meta.json
• README.md

The generated flow README includes the session token, bridge URL, plugin manifest URL, prompts, and manual next steps for the Penpot plugin.

Requirements

• VS Code with Copilot chat models available through the VS Code LM API
• A reachable local Penpot deployment
• Replicate API token for mockup generation
• Penpot embedding must not be blocked by X-Frame-Options or restrictive frame-ancestors CSP on your local Penpot proxy

Development

npm install
npm run build
npm test
npm run package:vsix

Local Release Gate

npm run release:local

This runs lint, build, tests, VSIX packaging, and isolated install/uninstall smoke checks.

Strict gate:

npm run release:strict

Marketplace Prep

• Manual signoff checklist: docs/BATCH6_LOCAL_SIGNOFF.md
• Deferred release checklist: docs/MARKETPLACE_PREP.md

Security And Data Flow

• Replicate API tokens are stored in VS Code SecretStorage under uiFirst.replicateApiToken.
• Prompts and mockup requests are sent to Copilot and Replicate during flow execution.
• Penpot board export data moves over a local HTTP bridge between the extension and the Penpot plugin.
• The extension does not implement custom telemetry.