56:I[473921,["/creators-assets/_next/static/immutable/chunks/1hsplt7jfjgnh.js","/creators-assets/_next/static/immutable/chunks/0ct7__d3eqq0r.js","/creators-assets/_next/static/immutable/chunks/0c-r9a3oxph1w.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1co9epfn9jp6v.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/3or5zvywp1ubp.js","/creators-assets/_next/static/immutable/chunks/1k3rwcufrnywl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/0lx6ikbaymow8.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/0ina8hhu8zfh2.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/1mpx4d_3k5had.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/3_ujmu63m88vf.js","/creators-assets/_next/static/immutable/chunks/25l6djez1lvts.js","/creators-assets/_next/static/immutable/chunks/3pe6luvwzbwnz.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/3nzo9vld-4e3c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/31lxg3j13mof7.js"],"PostDetailCard"] 57:T866,

MATTER is my hackathon entry: a luxury creative studio site built entirely with Framer 3.0 agents. You can browse the work, talk to a built-in Matter AI that turns a plain-language idea into a structured brief, and move through a brand experience that feels less like a website and more like a statement of intent.

Why I built it

I didn’t want to make just another studio page. I wanted to build the best creative studio site to ever exist — something precise, restrained, and unmistakably human, the way the best brands in the age of AI should feel. MATTER was the perfect test because it has to do everything at once: positioning, identity, product, motion, and editorial, all under one point of view.

What’s inside

A home that opens with the studio’s manifesto and an AI brief tool — describe what you’re imagining, and it maps how the studio makes it real
A Work section with selected identities, products, and films, driven by a CMS so every project stays consistent
Detail pages for each project, generated from the same collection
An About page with the studio’s principles, six disciplines, and a deliberate process from first conversation to lasting system
A shared MATTER layout template, reusable Button, Navigation, and Customer Ticker components, plus custom code visuals and a preloader.

The whole thing splits into shared components and a layout template, so navigation, branding, and structure stay in sync across every page.

What agents helped with

Agents helped me build and refine each piece on its own — the brief tool, the CMS-backed work grid, the responsive layouts, the dropdowns and motion. That made it genuinely easy to iterate on the hard parts like mobile behavior and keeping the brand system coherent across surfaces.

Try it: read the manifesto, brief Matter AI in plain language, and browse the work.

Built with Framer 3.0 AI agents

53:[["$","$L56",null,{"post":{"id":"019ed694-75c7-768e-a75c-c8d3b7883352","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"e91357a0-5757-4499-96f8-183443c2437c","name":"DukeDesigns","slug":"douak-nouh","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/332184/avatar-UI4iyCUxpcQUUvBXR9SyCY1QoIR5Zc.jpg","badges":["expert"],"followed":false,"followsYou":false},"media":[],"resources":[],"contests":[{"id":"019ed694-75c7-768e-a75c-cdbaf2953f3a","contestId":"agents-hackathon","author":{"framerUserId":"e91357a0-5757-4499-96f8-183443c2437c","name":"DukeDesigns","slug":"douak-nouh","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/332184/avatar-UI4iyCUxpcQUUvBXR9SyCY1QoIR5Zc.jpg","badges":["expert"]},"title":"Matter","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"MATTER","marks":[{"type":"link","attrs":{"href":"https://matterstudio.framer.ai/","target":"_blank","rel":"noopener noreferrer"}},{"type":"bold"}]},{"type":"text","text":" is my hackathon entry: a luxury creative studio site built entirely with Framer 3.0 agents. You can browse the work, talk to a built-in Matter AI that turns a plain-language idea into a structured brief, and move through a brand experience that feels less like a website and more like a statement of intent."}]},{"type":"paragraph","content":[{"type":"text","text":"Why I built it","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"I didn’t want to make just another studio page. I wanted to build the best creative studio site to ever exist — something precise, restrained, and unmistakably human, the way the best brands in the age of AI should feel. MATTER was the perfect test because it has to do everything at once: positioning, identity, product, motion, and editorial, all under one point of view."}]},{"type":"paragraph","content":[{"type":"text","text":"What’s inside"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A home that opens with the studio’s manifesto and an AI brief tool — describe what you’re imagining, and it maps how the studio makes it real"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A Work section with selected identities, products, and films, driven by a CMS so every project stays consistent"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Detail pages for each project, generated from the same collection"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"An About page with the studio’s principles, six disciplines, and a deliberate process from first conversation to lasting system"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A shared MATTER layout template, reusable Button, Navigation, and Customer Ticker components, plus custom code visuals and a preloader."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"The whole thing splits into shared components and a layout template, so navigation, branding, and structure stay in sync across every page."}]},{"type":"paragraph","content":[{"type":"text","text":"What agents helped with"}]},{"type":"paragraph","content":[{"type":"text","text":"Agents helped me build and refine each piece on its own — the brief tool, the CMS-backed work grid, the responsive layouts, the dropdowns and motion. That made it genuinely easy to iterate on the hard parts like mobile behavior and keeping the brand system coherent across surfaces."}]},{"type":"paragraph","content":[{"type":"text","text":"Try it: read the manifesto, brief Matter AI in plain language, and browse the work."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with Framer 3.0 AI agents"}]}]},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e91357a0-5757-4499-96f8-183443c2437c/k3da1hoi","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2400}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e91357a0-5757-4499-96f8-183443c2437c/nd1vv2kr","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2312}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e91357a0-5757-4499-96f8-183443c2437c/vg71elvw","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":1944}}],"post":null,"data":{"previewUrl":"https://matterstudio.framer.ai/"},"winner":false,"createdAt":"2026-06-17T17:15:14.282Z","updatedAt":"2026-06-17T17:15:14.282Z"}],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-17T17:15:14.253Z","updatedAt":"2026-06-17T17:15:14.253Z","reported":false,"type":"post"}}],"$L58"] 54:E{"digest":"NEXT_REDIRECT;replace;/community/contests/agents-hackathon/submissions/SQTa4gBJwCBeuH43caL47Q/;307;"}

Suggested for you