Easel

Transform text, colors, and ideas into ready-to-use website components instantly

Comment

Inspiration

We wanted to make web design more accessible and fun. Too often, the big picture ideas overshadow details like fonts, colors, and how they blend at the component level. Easel bridges that gap, turning inspiration into implementation.

What it does

Easel makes web design simple and fun by combining two core features:

  • Browse fonts and colors interactively: click through different options to explore palettes and typography.
  • Generate components with natural language: describe what you want, and Easel creates styled components that reflect your font and color choices.

The end result isn’t just a preview — you get the actual source code for every component you create. Easel shifts the focus back to design decisions while handling the code behind the scenes.

How we built it

We built the UI in Next.js and styled everything with TailwindCSS for a clean, responsive look. Code generation and user preference handling were powered by a Mastra agent, which translated natural language into functional React/HTML components while applying user-selected fonts and colors.

To store favorites, prompts, and saved preferences, we integrated MongoDB, giving users a persistent and personalized design experience. Finally, we implemented a live preview sandbox that renders components safely in the browser so users can instantly see their results.

Challenges we ran into

  • Designing a simple but effective way for users to favorite fonts, colors, and prompts.
  • Getting the Mastra agent to consistently apply saved preferences in generation.
  • Keeping generated code both valid and visually polished.

Accomplishments that we're proud of

  • Integrating Mastra to handle both generation and preference persistence.
  • Building a full explore → generate → save → reuse workflow in under 48 hours.
  • Creating a polished preview system that makes experimenting with design effortless.

What we learned

  • How to leverage Mastra agents to not only generate code but also carry over saved preferences like fonts, colors, and prompts.
  • The importance of designing a MongoDB schema that can persist user favorites and inspirations without friction.
  • How tricky it is to balance creative freedom in color and font exploration with maintaining consistency in generated components.
  • Why the frontend developer experience matters: ensuring the outputted code is clean, reusable, and production-ready.
  • Best practices for safely rendering React/JSX inside a live preview sandbox without breaking the app.

What's next for Easel

  • Full layouts & templates: move beyond single components to generate entire page structures (dashboards, landing pages, portfolios).
  • Expanded design exploration: add shadows, spacing, animations, and iconography to go beyond fonts and colors.
  • Developer workflows: let users export directly to GitHub, VS Code, or npm packages so code is immediately usable.
  • Collaboration features: enable sharing, remixing, and versioning of favorite prompts and designs within teams.
  • Deeper personalization: build a recommendation system that suggests fonts, colors, and components based on past user choices stored in MongoDB.
  • Design tool integration: explore Figma and other design platform plugins so Easel can fit into existing creative pipelines.

Built With

Share this project:

Updates