App Frames

Inspiration

I’ve always felt that creating App Store and Play Store screenshots should be simple, fast, and fun — but the tools available felt rigid, expensive, or too narrowly focused. I wanted something that could handle store-ready layouts, but also produce device-framed visuals for websites, portfolios, landing pages, and marketing pages.

The idea became: what if developers and designers could create beautiful device screenshots the same way they mock up UI — visually, intuitively, and without limits?

What it does

App Frames is a visual editor for building beautiful, device-framed screenshots — perfect for App Store, Play Store, websites, presentations, portfolios, and more.

Users can:

Drag, arrange, and style layers visually
Choose any device frame (phones, tablets, desktops, etc.)
Build multi-screen layouts (single, dual, stacked…)
Customize backgrounds, text, colors, and stickers
Export high-resolution images for any platform

It’s a lightweight visual design tool focused specifically on screenshot and mockup creation.

How we built it

I actually started with Kiro.dev. Kiro helped me visualize how the app would look and behave before I wrote any code. Instead of guessing UI flows, I used Kiro to quickly sketch out screens, interactions, and layout ideas. This visual-first process helped me clarify what the editor needed to feel like.

After I had the initial visual direction, I began refining the architecture using Kiro specs. The specs helped me:

Define the layer model
Clarify device-frame rendering
Plan multi-artboard support
Improve existing features
Prepare a roadmap for future expansion after the hackathon

The build itself uses:

React for the editor UI
Zustand for canvas state
A shared renderer for both full previews and thumbnails
A high-resolution export pipeline with an offscreen canvas
A modular device-frame system that can scale to any platform

Challenges we ran into

Making the canvas responsive while maintaining real device proportions
Handling multiple artboards without overwhelming new users
Keeping editing smooth while updating thumbnails in real time
Balancing simplicity with power as the feature set grew
Evolving the architecture while prototyping quickly

Accomplishments that we're proud of

Turning a concept into a working visual editor in a short time
Supporting any device frame, not just standard phone mockups
Implementing clean multi-artboard compositions
Using one renderer for both full-size previews and thumbnails
Leveraging Kiro.dev to accelerate both the visual design and the architectural planning

What we learned

Starting visually with Kiro.dev makes early ideas clearer and faster to iterate
Specs help solidify and scale features once the direction is set
DOM-based editing is ideal for draggable, layered mockups
A clear architecture makes adding future features much easier
Kiro dramatically improves the speed of thinking, designing, and stabilizing the app’s direction