Flash UI

Flash UI is a browser-based design playground for turning one product brief into three distinct, working interface directions. Compare them, refine a direction visually or with another prompt, then export the complete artifact.

What it does

• Plans exactly three meaningfully different design directions with your chosen current model from Google, OpenAI, Anthropic, DeepSeek, or Kimi.
• Starts all three cancellable artifact streams together, preserves partial drafts on failure, and retries one direction without discarding the others.
• Supports explicit image-reference roles: Include embeds the image, Style uses it only as visual guidance, and Both does both.
• Previews at mobile (390×844), tablet (768×1024), laptop (1280×800), and desktop (1440×900) sizes, measures horizontal overflow, and offers targeted responsive repair.
• Provides trusted HTML, ZIP, PNG, design-token, share-link, and bounded Figma JSON exports.
• Offers React, Vue, Tailwind, shadcn, MUI, and Chakra conversions as Experimental output with visible fidelity warnings.
• Opens on a clean landing screen while keeping every saved local project one click away in History.

Image generation uses gemini-3.1-flash-image by default, with gemini-3-pro-image available for higher-fidelity work and OpenAI's current gpt-image-2 available for size- and quality-controlled generation. Text model IDs, list prices, provider capabilities, and recommendations are centralized in services/ai/models.ts. The compact picker shows three useful defaults before the full catalog. Prices were checked on 2026-08-04 and should still be confirmed with the provider before production use. Shared image model metadata is in services/images/models.ts; Gemini-specific capabilities remain in services/gemini/models.ts.

Privacy and local data

Flash UI has no analytics or tracking integration. The browser calls the selected provider directly; there is no Flash UI application server between them.

Provider API keys are entered at runtime and are never read from build-time environment variables or bundled into deployed assets. Each key stays in sessionStorage by default. Explicit device persistence stores that provider's key in localStorage; Wipe Flash UI data removes only Flash UI-owned browser keys.

Projects and full generated HTML are stored locally in IndexedDB without string truncation. Existing flash-ui:sessions:v1 localStorage data is normalized, written and verified before the legacy value is removed. Reference/generated images remain bounded, and API keys never enter IndexedDB.

Generated previews use sandboxed srcdoc iframes, a restrictive preview CSP, source-bound postMessage validation, and host-side validation/error rendering. Downloaded HTML is intentionally unsandboxed, so review its scripts, forms, and external hosts before publishing it.

Exports

The selected viewport is shared by preview, manifest, and PNG capture. HTML and ZIP preserve the complete artifact. ZIP manifests record viewport dimensions, warnings, byte counts, and SHA-256 checksums. Version-3 share links can open as a chrome-free presentation or an editable copy and exclude the original prompt by default. Version-1 and version-2 links remain readable.

Figma JSON is requested only from the focused, instrumented artifact. The controller validates the matching result, size and node count, and fails with a clear timeout rather than downloading partial data. The companion importer is in figma-plugin/:

npm run figma:build
npm run figma:check

Import figma-plugin/manifest.json from Figma's plugin development menu. The handoff uses captured DOM geometry and does not recreate Auto Layout, responsive CSS, component variants, interactions, gradients, or pseudo-elements. See figma-plugin/README.md.

Local development

Requirements: Node.js 24 and npm 11.16.

npm ci
npm run dev

Open http://localhost:3000, choose a model, and add the matching provider key in the app. Google is required for Gemini image generation, while GPT Image 2 uses an OpenAI API key and may require OpenAI organization verification.

Verification

npm run check
npm run figma:check
npm run test:browser
npm audit --audit-level=moderate

npm run check runs strict linting, application and plugin type checks, unit tests, and a production build. The Playwright suite uses mocked provider responses; it never needs or sends a real API key.

Architecture

• services/ai/: current text-model catalog and direct multi-provider adapter.
• services/images/: provider-neutral image catalog and OpenAI image adapter.
• services/gemini/: Gemini image client plus shared structured prompts and schemas.
• services/artifacts/: validation, secure preview policy, viewports, exports.
• services/references/: image normalization, roles, and request budgets.
• services/persistence/: IndexedDB sessions and verified legacy migration.
• services/figma/: bounded export handshake.
• components/ and hooks/: accessible host UI and local state orchestration.
• figma-plugin/: source and committed deterministic plugin bundle.
• e2e/: Chromium workflows with local fixtures and mocked Gemini responses.

Contributing

Create a focused branch and pull request. Add or update a regression test for behavior changes, run the full verification commands above, and keep generated plugin output current. Do not commit API keys, .env files, browser profiles, Playwright reports, or generated application builds.