Category:
Website Design
Client:
Vespr
Duration:
4 weeks
Vespr is a free, dark portfolio Framer template for designers, developers and freelancers who want a personal site that reads like a product. One quiet column, case studies with their own pages, a blog, a contact form and a full design system page, tuned for Desktop, Tablet and Phone.
(MY APPROACAH)
Vespr was built for Framer’s agent from the start. Alongside 87 components, it ships with 58 agent skills written for this template, so you can ask in plain words, like “Create an About page”, and the agent builds it with Vespr’s own components on every breakpoint and links it in the nav and footer.
(VISION & INNOVATION)
A calm, single-column portfolio with a restrained monochrome palette: Manrope with Inter Display and Geist Mono, a Liquid Gradient hero and scroll text reveals. The design steps back so the work and the case studies carry the page.
(CHALLENGES)
The hard part was a template that keeps its style after the remix. Every skill describes what each component is for, which variant fits where and how sections are named, so pages the agent builds look like part of the original design.
(PROBLEMS)
Most templates stop at the pages you get, and anything new means rebuilding sections by hand. Vespr’s skills cover pages, 28 section types, the CMS and writing, and the agent never invents facts: anything it doesn’t know becomes a clearly marked sample.
(USER-CENTRIC DESIGN)
Every page follows how a visitor reads a portfolio: who you are, the work, then how to get in touch. Case studies open on their own pages with project facts, imagery and three content sections, and contact is always one step away with a form, a copy email button and a booking link.
(USER NEEDS)
Designers want to grow their site without a developer or hours of layout work. With Vespr they edit case studies and posts in the CMS, ask the agent for new pages and sections, and get a short list of what’s left to fill in after each change.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 24.635 22.866 C 25.123 23.355 25.123 24.147 24.635 24.635 C 24.147 25.123 23.355 25.123 22.866 24.635 L 12.501 14.268 L 2.135 24.635 C 1.647 25.123 0.855 25.123 0.366 24.635 C -0.122 24.147 -0.122 23.355 0.366 22.866 L 10.734 12.501 L 0.366 2.135 C -0.122 1.647 -0.122 0.855 0.366 0.366 C 0.855 -0.122 1.647 -0.122 2.135 0.366 L 12.501 10.734 L 22.866 0.366 C 23.355 -0.122 24.147 -0.122 24.635 0.366 C 25.123 0.855 25.123 1.647 24.635 2.135 L 14.268 12.501 Z" fill="rgb(0, 0, 0)" height="25.00139023844741px" id="jBymG44fK" transform="translate(7.499 7.499)" width="25.001390238447406px"/></svg>)