Framer

Framer AI

Framer AI

Framer AI

Framer AI

Framer AI

Framer AI

Framer AI

Framer AI

Framer AI

Framer AI

I replicated Anthropic's Generator-Evaluator harness to build a website through 12 adversarial AI iterations - here's the result and what I learned

Anthropic recently published their harness design for long-running apps — a multi-agent architecture inspired by GANs where a Generator builds code and an Evaluator critiques it in a loop. I built my own version using Kiro CLI and used it to generate a marketing website for my project Mnemo (persistent memory for AI coding agents). The architecture: Planner (runs once) → Generator ↔ Evaluator (12 iterations) Each agent is a separate CLI process with zero shared context. They communicate only through files (spec.md, eval-report.md). The Evaluator uses Playwright to actually browse the live site — not just read code. What made it work: Clean slate per invocation — each agent starts fresh, reads only its input files. Prevents context anxiety. Playwright MCP for testing — the evaluator navigates, clicks, resizes viewports. Catches visual bugs code review never would. Anthropic's frontend design skill — explicitly penalizes generic AI patterns (Inter font, purple gradients, card layouts). Forces creative risk-taking. Continuous iteration, not retry-on-failure— all 12 rounds run regardless. Each one improves. The progression was wild: Iteration 1: Exactly what you'd expect from AI — functional but forgettable Iteration 4: Generator pivoted to "Terminal Noir" — IBM Plex Mono, amber on black, grain textures, scanlines. This is the kind of creative leap that doesn't happen in single-shot generation. Iterations 5-12: Polish, accessibility, responsive fixes, reduced-motion support Stats: Total time: 3h 20min Iterations: 12 (generator + evaluator each) Manual code written: 0 lines (I fixed a few visual issues after) Tech: Next.js, Tailwind, Framer Motion, TypeScript Live result: https://mnemo-mcp.github.io/Mnemo/ Documentation : https://github.com/Mnemo-mcp/Harness Key takeaway: The model is the engine. The harness — the constraints, feedback loops, and adversarial structure around it — is what determines whether you get AI slop or something genuinely distinctive. submitted by /u/killerexelon [link] [comments]

I built an app with Claude Code that converts any text into high-quality audio. It works with PDFs, blog posts, Substack and Medium links, and even photos of text.

I’m excited to share a project I’ve been building over the past few months, created entirely using Claude Code! It’s a mobile app that turns any text into high-quality audio. Whether it’s a webpage, a Substack or Medium article, a PDF, or just copied text, it converts it into clear, natural-sounding speech. You can listen to it like a podcast or audiobook, even with the app running in the background. The app is privacy-friendly and doesn’t request any permissions by default. It only asks for access if you choose to share files from your device for audio conversion. You can also take or upload a photo of any text, and the app will extract and read it aloud. - React Native (expo) - NodeJS, react (web) - Framer Landing The app is called Frateca. You can find it on Google Play and the App Store. I also working on web vesion, it's already live. Free iPhone app Free Android app on Google Play Free web version, works in any browser (on desktop or laptop). Thanks for your support, I’d love to hear what you think! submitted by /u/OneMoreSuperUser [link] [comments]

Claude Design is a cheat code for SaaS landing pages (Built this in 20 mins)

I’ve been revamping the landing page for my app Farcast and wanted to add some simple, sleek, high-velocity animations to show the product in action. Usually, this means spending two or three days wrestling with Framer Motion, tweaking CSS keyframes, or fighting with Webflow. I decided to see how far Claude Design (Artifacts) could actually take it. I fed it one massive, highly detailed prompt containing: My exact color hexes The layout structure The exact sequence of animations I wanted for the hero section This took exactly 20 minutes and only 2 iterations to get right. It spit out the clean React/Tailwind code ready to go. I remember just last year working in a SaaS venture leading growth and i had to wait 3 days for a simple landing page revamp. Only flaw i did another revamp inside my app now the limits will reset in 2 days. submitted by /u/AdVegetable1234 [link] [comments]

Claude is my SEO strategist, content engine, and CTO. From 0 to 10,000 active users in 6 weeks, $0 on ads.

I built a marketplace for AI agent skills called Agensi. The entire thing was built with Claude and Lovable. I'm not a developer. But that's not what this post is about. This post is about how Claude became the single most important tool in my growth stack. Not for coding. For SEO, content strategy, and a new thing called AEO (answer engine optimization) that I think most people are sleeping on. Claude writes all my content, but not the way you think I don't ask Claude to "write me a blog post about X." That produces generic AI slop that nobody reads and Google doesn't rank. Instead, I feed Claude my Google Search Console data (queries, impressions, click-through rates, average positions) and ask it to find keyword gaps. Claude analyzes the data, identifies queries where I have high impressions but zero clicks, finds topics where I have no content but competitors do, and spots cannibalization where multiple pages compete for the same query. Then we write articles together targeting those specific gaps. Every article has a structure that Claude and I developed over weeks of iteration: a Quick Answer block at the top (40-60 words that directly answer the main question), H2 headings phrased as questions (not "Claude Code Skill Locations" but "Where Does Claude Code Store Skills?"), comparison tables where relevant, and internal links to related articles. 96 articles later, we went from 5 clicks per week to 1,000+ clicks per week. 300K search impressions per month. 878+ page-1 Google rankings. All organic. The AEO strategy nobody is talking about Here's what surprised me. ChatGPT, Gemini, Perplexity, and Claude itself are now sending us traffic. 348 AI-referred sessions per month and growing fast. These AI answer engines cite agensi.io when developers ask where to find SKILL.md skills. Claude helped me build the entire AEO infrastructure. We restructured every H2 heading as a question because AI Overviews prefer extracting from question-format sections. We added FAQ schema to every page so Google's AI picks up our Q&As. We built an /about page as an entity anchor with Organization, Person, and AboutPage schema. We created a robots.txt that explicitly allows all AI crawlers and an llms.txt file that tells LLMs what the site is and where to find key content. The result is that when someone asks ChatGPT "where can I find SKILL.md skills" or asks Perplexity "what is the best skill marketplace for AI agents," they get pointed to agensi.io. Claude helped me engineer that outcome deliberately. It wasn't an accident. Claude as a technical SEO auditor Every week I export data from Google Search Console, Ahrefs, and Google Analytics and dump it into Claude. Claude finds things I would never catch on my own. It found that 121 queries where I ranked position 1-3 had zero clicks because AI Overviews were stealing the traffic. That insight changed my entire strategy from chasing rankings to becoming the source that AI Overviews cite. It found that my "best claude code skills 2026" article had 25,000 impressions and only 29 clicks. The problem was the title. Claude rewrote it to "15 Best Claude Code Skills in 2026 (Tested & Ranked)" and we're watching the CTR climb. It found that I had 18 published articles with zero Google impressions because they weren't indexed. Claude generated the IndexNow ping commands and the GSC URL Inspection list to fix it. It diagnosed a duplicate FAQPage schema issue that was causing GSC errors on 90 pages. The root cause was React components emitting FAQ schema client-side AND the SSR edge function emitting it server-side. Claude identified the exact files, wrote the Lovable prompts to fix it, and verified the fix with curl commands. The structured data layer Claude built the entire structured data architecture for the site. Every page type has the right schema: Homepage has Organization, WebSite with SearchAction, and FAQPage with 15 Q&As. Individual skill pages have SoftwareApplication with pricing, BreadcrumbList, and conditional FAQPage. Article pages have Article, FAQPage, HowTo, BreadcrumbList, and Organization. The /about page has Organization, AboutPage, and Person schema for entity anchoring. I didn't know what any of this was before Claude explained it. Now every page is machine-readable for both Google and AI engines. PageSpeed Insights shows "Structured data is valid" on every page with a 100 SEO score. Core Web Vitals fixes Claude diagnosed that our desktop LCP was 2.5-4s on 190 URLs. It identified the causes (460KB eager JS bundle, framer-motion loading on every page for a mobile menu animation, synchronous analytics scripts) and wrote the Lovable prompts to fix each one. Desktop LCP went from 2.5-4s to 0.9s. Performance score went from ~70 to 97. For mobile, Claude found that the LCP element was a 1920x1920px, 179KB PNG logo being rendered at 112px. It was imported as a JS module so the browser couldn't even start downloading it until the entire JS bundle par

How I got my Claude Design landing video to actually play in Safari. * Claude Design is amazing btw.

claude design I used Claude Design to make a 17-second landing animation. The designer output was beautiful, took me ~30 minutes to generate + iterate. Normally this is a week of motion-graphics work. Then I tried to ship it on shipfolio.app. Chrome played it. Safari showed a black screen. 19 commits later I understand why (or claude did lol). Sharing in case someone else is about to eat the same 4 hours: Safari quietly refused my video. Turns out the "most compatible" video format (called Baseline) is the one Safari hates. The big sites like Framer and Resend all use a different flavor (High). Copied their setup, worked instantly. Dark gradients looked like stripes. My intro fades through black. On the first export, the black wasn't smooth, it came out in visible bands. Adding a tiny amount of noise to the video (a single flag called -tune grain) smoothed it out. Human eye reads the noise as grain, not stripes. 3. Safari remembers when a file is broken. I re-exported the video six times to the same filename. Safari had already decided that URL was bad and kept refusing it even after I fixed it. Renaming the file (v2.mp4 → v3.mp4) made Safari treat it as new. 4. Telling the browser to "preload everything" backfired. I assumed preload="auto" would help. It doesn't, it makes Safari less likely to autoplay. Switched to preload="metadata" (just enough to know how long the video is) and autoplay worked. The one that actually broke me. Claude Design's animation tool saves your playback position to the browser. So every time I reloaded to record a clean take, it picked up from wherever I last paused, not from the beginning. That's why I kept getting footage of scene 3 instead of scene 1. Fix was one line of code that tells the tool "pretend nothing was saved." Took 4 hours to find. 5 seconds to write (for claude again lol). Anyone else found a cleaner way to add their animation exports to their landing page? submitted by /u/Vitalic7 [link] [comments]

What Claude Code skills/MCPs actually produce Huly.io-level animation quality? Beyond UI UX Pro Max and 21st Dev

Been deep in a Claude Code build for a SaaS marketing website and hitting a ceiling on animation quality. Currently using: - UI UX Pro Max skill - 21st Dev Magic MCP - React Three Fiber for WebGL - Framer Motion - GSAP ScrollTrigger - Lenis smooth scroll The results are genuinely good but not quite at the level of sites like: - huly.io (the hero illustration + scroll experience) - linear.app - vercel.com - stripe.com - basement.studio Specifically struggling with: The kind of cinematic hero sections where a complex 3D or illustrated scene fills the entire viewport and feels like it was made by a $500K design agency Scroll-driven animations that feel weighted and intentional rather than just "things moving on scroll" Post-processing / shader effects that give scenes that filmic quality (bloom, chromatic aberration, depth of field) without destroying performance The subtle micro-interactions that make you feel the craft even when you can't name what you're feeling Questions for anyone who has pushed Claude Code into this territory: - Are there specific skills or SKILL.md files beyond UI UX Pro Max that reliably produce this quality? - Any MCPs beyond 21st Dev that help with component quality at this level? - Has anyone successfully had Claude Code build something that genuinely rivals huly.io or linear.app in animation sophistication? - Are there specific prompting patterns that unlock better quality from the /overdrive or /animate skills? - Is there a ceiling where you just need a human creative director / motion designer to get past a certain quality threshold, and Claude Code handles execution? Not asking for basic tips — looking for people who have actually pushed this to its limits and know what the ceiling looks like. submitted by /u/BuyOpen5346 [link] [comments]

Struggling with Claude for Branding Design. Please help 🙏🏼

I’ve been struggling horribly with Claude to help me design brand assets and social media assets for my business. I’ve brought in different design skills, added briefs / documentation and played around with different prompts but the results have been horrible. I’m a bit concerned because once I finish touching up some things on framer the plan was to start leveraging Claude to help with social media content (Instagram/Facebook posts, carousels, content for ads, etc.) For context here are some examples of what Claude has been producing. The last logo I’ve added was created by ChatGPT weeks ago. The hope was Claude could come up with something cleaner that matched the typography I’m using better. I don’t think I’m a total beginner but this has definitely stumped me. Any help is appreciated. submitted by /u/Exact-Type9097 [link] [comments]

I built a WebGPU shader editor with a full MCP server: AI agents can create, evolve, and export GPU shaders

Several days ago I posted here about resurrecting a 1992 MUD (Legends of Future Past) entirely with Claude Code. That project taught me a lot about what agentic engineering looks like for game development. This weekend I pushed into GPU graphics territory, again built with Claude Code. The result: https://preview.redd.it/x75qofgxarug1.png?width=3262&format=png&auto=webp&s=a6646ee0a4249a5db8391d1dcb4291eec868b452 ShaderVine is a browser-based WebGPU shader programming toolkit. You write WGSL shaders in a Monaco editor with live preview on 3D geometry, run GPU compute simulations, genetically evolve shaders through visual selection, morph between shaders, and export to Unity, Unreal, Blender, Three.js, or raw HLSL. No install, runs entirely in the browser, MIT licensed. The part I'm most interested in sharing here: I designed it for the agentic era. The whole thing has a full MCP server (built on mcp-go) so Claude or any MCP-compatible agent can: Search and browse the shader gallery Create new shaders from scratch Fork and modify existing ones Adjust uniform parameters Trigger genetic evolution Export to any target format The agent can do everything the browser UI can do. MCP isn't an afterthought; it's a first-class interface. Why shaders are an interesting agentic test case: Shader code is compact (around ~50 lines for a fragment shader), the output is instantly visible, and small parameter changes produce dramatic visual differences. The feedback loop with Claude is actually tighter here than I expected compared to complex 3D scene work. Where it breaks down is the same modality gap I've written about before—"I want to explore variations faster than I can describe them." That's what the genetic evolution and morph tools solve. The agent generates, you select visually, breed the winners, repeat. What I learned about MCP design: Having now built MCP servers for an agent orchestrator, a website CMS, generative engine optimization, a chess platform (Chessmata), a generative art tool (Threelab)... and now ShaderVine, I'm developing real opinions about what makes a good agent-facing API. The tools need to be composable, discoverable (clear names a model can reason about), and bounded. Don't expose 200 tools when 15 well-designed ones cover the same territory. WebGPU compute is the real story. WebGL had no compute shaders at all—you had to fake GPU compute by encoding data into texture pixels. WebGPU's native compute pipeline with storage buffers and workgroup shared memory is a qualitative leap. I'm running a bunch of different compute simulations (fluid dynamics, physarum, reaction-diffusion, particle swarms, erosion, Turing patterns…) all at interactive framerates in the browser. GPU compute through a URL: this was speculative two years ago and now it just works. Stack: React 19, TypeScript, Vite, Go backend, MongoDB, Docker, Fly.io. Designed to be forkable and maintainable with Claude Code. GitHub: https://github.com/jonradoff/shadervine Full writeup on the design philosophy: https://meditations.metavert.io/p/shadervine-a-webgpu-shader-editor Live demo: https://shadervine.metavert.io Happy to answer questions about MCP server design, WebGPU compute, the future of game development and AI agents generally. submitted by /u/jradoff [link] [comments]