InterfaceKit

A visual design tool for styling your React app directly in the browser. Select any element, tweak design parameters, then copy a single prompt for your coding agent.

Development-only — automatically disabled in production builds.

Install

npm install interface-kit

Quick Start

import { InterfaceKit } from "interface-kit/react";

export default function App() {
  return (
    <>
      <main>{/* your app */}</main>
      {process.env.NODE_ENV === "development" && <InterfaceKit />}
    </>
  );
}

A small paintbrush button appears in the corner of your app. Click it to activate the editor, then click any element to start styling.

No Tailwind or CSS setup required — InterfaceKit injects its own stylesheet at runtime.

Features

• Style tab — Background color, border, border radius, shadow, backdrop blur, opacity
• Typography — Font family, size, weight, line height, letter spacing, style, alignment, color
• Layout tab — Width, height, padding, margin, flex direction, alignment, gap
• Tailwind mode — Toggle to snap values to Tailwind utility classes
• Copy as prompt — Export all changes as a prompt-ready diff for your coding agent

Requirements

• React 19+

Contributing

1. Open an issue first. All PRs must reference an approved issue. PRs without a corresponding issue will be automatically closed.
2. Keep PRs atomic. One feature or fix per PR.
3. Avoid adding dependencies. If a dependency is absolutely necessary, justify it in the issue.

License

MIT