Skip to main content

prism_sketch 0.1.0 copy "prism_sketch: ^0.1.0" to clipboard
prism_sketch: ^0.1.0 copied to clipboard

Wireframe-to-code for the Prism ecosystem. Describe a screen in plain English — "login page: email field, password field, primary button" — and get idiomatic prism_kit Flutter code. Pure Dart, zero de [...]

prism_sketch #

Wireframe-to-code for the Prism ecosystem.

Describe a screen in plain English. Get idiomatic prism_kit Flutter code — state fields, component wiring, tokens — as a complete, compilable file you paste in and edit. Pure Dart, zero dependencies, one command.

$ prism_sketch "login page: email field, password field, sign in button"
class LoginView extends StatefulWidget {
  const LoginView({super.key});

  @override
  State<LoginView> createState() => _LoginViewState();
}

class _LoginViewState extends State<LoginView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Login')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          PrismTextField.email(name: 'email', label: 'Email'),
          PrismPasswordField(
            common: const PrismFieldCommon(
              name: 'password',
              label: 'Password',
            ),
          ),
          FilledButton(
            onPressed: () {}, // TODO: submit
            child: const Text('Sign In'),
          ),
        ],
      ),
    );
  }
}

Install #

dart pub global activate prism_sketch

Usage #

prism_sketch "settings screen with dark mode switch and language dropdown"
prism_sketch "dashboard with stat tile, bar chart, donut chart" --out dashboard.dart
prism_sketch --list          # everything it understands

What it understands #

Screens (detected from keywords): login/signup, settings, dashboard, chat, list, detail, and plain pages.

Components: email/password/phone/OTP fields, search, buttons, FAB, switch, checkbox, slider, dropdown, rating, calendar, bar/line/donut charts, stat tiles, cards, tiles, banners, timelines, avatars, progress, empty states, image/file pickers — 30+ in total, all rendered as prism_kit components that read PrismTokens and PrismColors.

If you list no components, prism_sketch picks sensible ones for the screen type. Generated code is deterministic, so it is snapshot-testable and safe in CI.

Philosophy #

prism_sketch proposes, you dispose. It writes the repetitive 60% — imports, state fields, component wiring, layout scaffolding — and leaves TODO markers exactly where your business logic goes. Every generated file was verified to compile against prism_kit.

Library use #

The two stages are separate APIs, so you can build editors, IDE plugins or chat bots on top:

final spec = SpecParser().parse('dashboard with stat tile, bar chart');
final code = CodeGenerator().generate(spec);

License #

MIT — see LICENSE.

0
likes
140
points
0
downloads

Documentation

Documentation
API reference

Publisher

unverified uploader

Weekly Downloads

Wireframe-to-code for the Prism ecosystem. Describe a screen in plain English — "login page: email field, password field, primary button" — and get idiomatic prism_kit Flutter code. Pure Dart, zero dependencies.

Repository (GitHub)
View/report issues

Topics

#flutter #code-generation #scaffolding #cli #design-system

License

MIT (license)

More

Packages that depend on prism_sketch