It starts with research, not design

I never open Framer first. Every template begins with one question: what's missing in the marketplace right now?

• Studying the marketplace. What's trending, what's oversaturated, where are the gaps? If there are already 50 generic SaaS templates, making the 51st won't stand out.

• Browsing real websites. I look at 15-20 actual sites in the niche. Real products with real customers. This is how I learn what sections and features the niche actually needs.

• Defining the unique angle. Every template needs a reason to exist beyond "it looks nice." For Grovia, that was a liquid glass UI with conversion-focused structure for early-stage startups. For Nexura, it was deep page structure for AI SaaS products. The selling point gets defined before a single pixel is placed.

This phase takes 2 to 3 days. Every template I've seen underperform on the marketplace had the same root cause: it does not offer something new.

Planning the structure

Once I know the niche, audience, and unique angle, I map out the template:

• Pages. What does this niche actually need? A SaaS template needs a product page, pricing, blog, and integrations. A portfolio needs a works page with CMS and an about page. I don't add pages just to pad the feature list.

• Section order. Hero, social proof, features, how it works, pricing, testimonials, CTA. The sequence is intentional, not decorative.

• CMS collections. What content will the buyer manage over time? Blog posts, case studies, team members? I plan these upfront because retrofitting CMS into a finished design always creates problems.

Exploring the design language through the hero

I don't build a design system in isolation. The design language gets defined through the process of designing the hero section.

I collect 5 to 10 reference sites with styles I find compelling for the niche, then explore: colors, typography, spacing, corner radius, visual tone. I typically go through around 5 hero variations before landing on the one that feels right.

The hero is both the first thing marketplace visitors see and the foundation every other section builds on. Once the design language is locked in here, colors, type scale, spacing system, and component styles all get formalized from what I discovered during this exploration.

Designing the rest in Framer

I design directly in Framer, not in Figma first. Every layout decision is made in the environment where it will actually live. No translation step, no "it looked different in the mockup" problems.

After the hero sets the direction, the remaining sections come together faster. From here, I focus on creative yet practical layouts for features, social proof, pricing, and CTA.

One thing I'm always thinking about is real-world use cases. Templates need to work for buyers with different amounts of content:

• What happens with 3 feature cards vs. 6?

• Does the testimonial section still look good with a short quote vs. a long one?

• How does a grid of 2 items look compared to 8?

Every layout needs to hold up across different content lengths, card counts, and listing sizes. Inner pages (blog, about, contact, legal) come last and follow the established design system.

Responsive and polish

Each breakpoint gets its own layout decisions: what stacks, what gets hidden, what changes size, what stays visible above the fold. The content variation work from earlier pays off here because layouts that handle different card counts on desktop tend to handle responsive stacking much better too.

Then the polish pass:

• Animations. Subtle, purposeful motion on scroll and hover. Nothing that slows the page down.

• Interactions. Navigation, dropdowns, CMS filtering, tab components. Smooth and predictable.

• Edge cases. Stress-testing with extreme content lengths, empty states, and unusual screen sizes.

Where AI fits in my workflow

I use AI throughout the process, but not for the creative work. Every visual decision, layout exploration, and design direction is mine. AI handles the parts that are repetitive, tedious, or just slow to do manually:

• Writing copy

• Creating components

• Setting up variables

• Renaming layers

• Style and component cleanup

• Site audit

The principle is simple: I do the creative work, AI speeds up the trivial work. This saves hours on every template without compromising the design quality.

Preparing for launch

• Marketplace listing. The preview images, description, and feature list are what sell the template. I treat this like a product launch, not an afterthought.

• Documentation. Setup instructions, customization tips, and prompting guides for the Framer AI Agent so buyers can customize without learning the tool from scratch.

• Quality check. One final pass through every page, every breakpoint, every link before publishing.

Why this process matters

A template is a product, not just a design. The research decides whether anyone needs it. The hero exploration decides whether it has an identity. The structure decides whether it converts. And the polish decides whether someone recommends it after buying.

Every Lunis Design template goes through this process. Browse the free and premium templates at Lunis Design to see the result.