frontend-ui

Build interfaces that actually stand out — this plugin steers Claude toward bold typography, striking color palettes, and distinctive layouts instead of cookie-cutter AI output.Create frontend designs that actually look like they came from a real designer, not a template generator. This plugin lets Claude build interfaces with intentional style—think bold typography choices, color palettes that pop, smooth animations that feel purposeful, and details that match what you're actually building. The result is polished, production-ready code that stands out from the typical AI-generated stuff.

Connect Claude Code to your Figma files and pull design data into your editor. It reads pages, frames, layers, and component sets; extracts design tokens (colors, typography, spacing, radii); and returns a JSON representation you can inspect. The plugin maps auto-layout and constraints, so layouts and flow are preserved when you generate code or build components.Claude reads component instances and their overrides, then returns a component tree and CSS-like styles. It finds nested components, images, and vector paths, and it reports missing fonts or unsupported effects. You can ask Claude to generate React, Vue, SwiftUI fragments or plain CSS variables based on the tokens and component structure it pulled from Figma.It connects to your Figma account via a personal access token and can target specific file IDs or pages. The GitHub repo (https://github.com/tokens-studio/figma-plugin) contains the code for token extraction and mapping rules, which you can extend if your design system has custom properties or naming conventions.In a typical workflow, you open a design, point Claude at the file, and get ready-to-edit component code and a token set—no manual copy-paste of color values or re-measuring spacing. That saves time when converting a final Figma screen into components for a sprint, and avoids flipping between Figma and your IDE to reconcile tokens and layout details.

Playground spins up single-file HTML sandboxes you can drop into a repo, share in a review, or open in a browser without installing anything. It builds a live preview pane that reloads as you edit, a set of visual controls you can bind to variables, and a prompt/output area that records the current state and copies it to clipboard with one click. The sandbox bundles CSS, JS, and assets into one standalone file so collaborators can open the same playground on any machine or environment. The tool lets you map controls to DOM properties, run custom scripts on change, and watch specific variables so you can inspect how interactions flow. It reads your HTML, injects the control UI, and runs the preview inside a safe iframe. It also logs events to a panel so you can trace how inputs affect state without leaving the page. Developers use Playground to prototype animations, debug interactive widgets, and collect reproducible steps for bug reports. In a client review, you can send a single file that the client opens locally; they tweak sliders, you watch the logs, and you copy the current prompt output to paste into a ticket — no rebuilding, no switching between editor and browser.

Build Wix platform extensions from the CLI: the tool reads your project, scaffolds dashboard widgets, generates Velo backend APIs, and creates site components and CMS collections without leaving your editor. It runs local previews, watches file changes, and bundles code for deployment so you can iterate on features fast. The CLI parses your package and routing files, checks permissions and scopes required by Wix, and generates boilerplate routes, handlers, and type stubs you can edit. It runs linters, runs unit tests you point it to, and reports errors in a single terminal output. You can link a GitHub repo, push build artifacts, and run deploy commands from the same interface. It also reads your site schema and maps CMS collections to form components, generates dashboard manifest files, and produces OAuth or API key configuration stubs. The tool validates manifest JSON, confirms allowed origins, and flags missing fields before deployment to reduce runtime surprises. Imagine adding a new dashboard widget, a Velo API endpoint, and a CMS collection while coding in VS Code: you scaffold routes, preview the widget locally, and deploy from the CLI without switching to the Wix web console. That saves time and keeps context in one place during feature work and bug fixes.