Llevarte el código

Flutter (Dart), widget por widget

Clic derecho sobre un widget y elige copiar código. Se abre una ventana con su vista previa en vivo y su código en Flutter (Dart), para copiar o descargar. Una casilla añade un main() para probarlo en DartPad. Este es el código de un botón, tal como lo escribe Draft:

// Copiado de Draft — "Documentación".
// Pégalo en tu proyecto Flutter y úsalo como cualquier widget:
//   const ContinueButton()

import 'package:flutter/material.dart';

class ContinueButton extends StatelessWidget {
  const ContinueButton({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 120,
      height: 40,
      child: ElevatedButton(
        onPressed: () {},
        style: ElevatedButton.styleFrom(
          backgroundColor: const Color(0xFF3D5AFE),
          foregroundColor: const Color(0xFFFFFFFF),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
        ),
        child: const Text('Button'),
      ),
    );
  }
}

React con TypeScript y Tailwind

Para muchos widgets la ventana también da React con TypeScript y Tailwind: botones, textos, gráficos, íconos, imágenes, campos de texto, casillas, interruptores, deslizadores, chips, insignias, avatares, barras de progreso y los contenedores con lo que llevan dentro. Los estilos usan valores exactos de Tailwind, sin redondear. El mismo botón:

// Copiado de Draft — "Documentación".
// úsalo como cualquier componente: <ContinueButton />
// Asume que tu proyecto ya tiene Tailwind CSS configurado (tailwind.config, las directivas en tu CSS global).

export default function ContinueButton() {
  return (
    <button className="w-[120px] h-[40px] rounded-[8px] bg-[#3d5afe] px-4 py-2 font-medium text-[#ffffff]" onClick={() => {}}>
      Button
    </button>
  );
}

Una página entera a Dart

Exporta la página completa como un archivo .dart con una clase de Flutter lista para usar, con el formato de dart format, los logos como SVG y las fotos incluidas (hasta 300 KB).

Una descripción para una IA

Un texto que describe tu página, listo para pasárselo a un asistente de inteligencia artificial y que la reproduzca.

Asistente de contenido

Escribe los textos de ejemplo por ti, con tu propia clave de OpenAI, Anthropic o Google. La clave queda cifrada en tu equipo.

Archivos de proyecto

Guarda y abre proyectos completos como archivos .draft, con sus fotos, para pasarlos a otro equipo o guardar una copia.

Draft no programa la lógica de tu app: los datos, las cuentas y la navegación real los escribes tú.