{"slug": "maximum-efficiency-automated-qa-and-content-building-in-a-single-pass", "title": "Maximum efficiency: Automated QA and content building in a single pass", "summary": "Developer Seamus James built an automated QA and content-generation loop for his browser image editor lopsy.art in which Claude, driven by a /random skill that uses node for true random selection, autonomously designs full compositions through the Playwright-controlled UI and then acts as an Art Director to judge and iteratively revise the output until it passes. The same token spend surfaces sequence-dependent bugs, such as redo failing after repeated undos on a particular action sequence, that standard end-to-end tests miss, and doubles as step-by-step tutorial content.", "body_md": "# Maximum Efficiency: QA and Content\n\nUsing randomized selection and Claude's incredible design capabilities to automate bug discovery and content creation with the same tokens.\n\n*I love AI tools and I use them all the time, but everything in this article was written by me with my dumb, imprecise monkey fingers.*\n\nI built lopsy.art to replace photoshop in my daily life. It’s not a 1-for-1 replacement, but it provides everything I need for my casual image editing needs. And the best part: I can add any [feature I dream up](https://github.com/theseamusjames/lopsy.art/pull/719) and make it work exactly the way I want it to. I love it.\n\nBut of course there are bugs. A lot of bugs. The engine is written in rust, compiled in WASM, rendered in a React app, and the whole thing was written by Claude. I’ve offered a lot of guidance on best practices and systems (sparse arrays to lower the memory footprint, contracting/expanding layers to their content size when not active, floating selections for independent editing and compositing, and many more), but the implementations are all straight from the agent.\n\nWith that, there’s a particularly pernicious class of bug that’s hard to spot: the kind that only appears in sequence. Undo, for example. You might undo once and it works. You might undo twice and it works. But maybe a bunch of undos in a row on a particular sequence of actions causes redo to fail. Your regular e2e won’t catch that.\n\n## [Design as Diagnosis](#design-as-diagnosis)\n\nSo to combat that, I let Claude build unique, randomized compositions, using the tool the way a user would [through Playwright](https://lopsy.art/SKILL.md).\n\nFirst, I give Claude a `/random` skill that allows for actual random selection via node (because LLMs are really bad at choosing randomly on their own, particularly for the same prompt).\n\nThen I use the skill to choose two letters randomly – these will be initials for the name of its creation. By using random letters to guide the ideation, I get far more interesting, less repetitive designs.\n\nThen it chooses a style like art nouveau or neobrutalist and a project type like album cover or holiday card.\n\nAnd then it just goes.\n\nIt creates full compositions using lopsy the way a graphic designer would, drawing with the tools, adding external images and cropping them, laying out text. From concept to completion, it designs the entire project autonomously in the browser, through the same UI as you or I.\n\n(The complete prompt is at the bottom of this page).\n\n## [This is trash. Start again.](#this-is-trash-start-again)\n\nOnce the design is complete, an agent assumes the role of Art Director and judges the output qualitatively.\n\nThis allows for two things: token optimization by using a more powerful, more critical model to both assess the result as well as suggest improvements. And second, we have a bounded iterative loop. Continue revising until you satisfy the critics. This can take hours, but the results are impressive.\n\n## [This year's model](#this-year-s-model)\n\nThis only became possible with the recent class of models. Early experiments were… less successful.\n\nNow that models can control software competently, a whole new class of generative capabilities becomes possible. Things like photo retouching or color grading – this is no different than a human moving the knobs and buttons, and the product that comes out the other side isn’t generative in the sense of a nano banana retouch that bears the anomalies and watermark of generative AI.\n\n## [Waste nothing](#waste-nothing)\n\nAs it started producing these designs, I was seeing the results and thinking, “That’s awesome, I wonder how it did that.” So to answer that question, I thought, “Well, I could have it give me a step-by-step showing what it’s doing.” Hmm, a step-by-step set of instructions… with screenshots.\n\nThat’s a tutorial.\n\nAnd then it hit me: **my QA process is now a two-fer.** I can have Claude test the product, report bugs that it finds, and then write up that QA as a full tutorial that I can post on lopsy. Instead of wasting all this work on QA runs that may or may not find bugs (hint: they almost always find bugs), these tokens can do double duty and create artifacts that are interesting in their own right.\n\nThere’s a lot of upside:\n\n- I can see what it’s doing when it creates the images (and lo-and-behold it was doing some [weird stuff](https://github.com/theseamusjames/lopsy.art/commit/61b36638966bb4a2941380832552db20bdabf83d) ).\n- Create a showcase of what’s possible with the tool\n- It solves my mobile problem. The tool doesn’t work on mobile, so now people can see *something* when they land from a phone.\n- They can be educational for particular techniques. I’ve been pretty surprised with some of the things it’s doing particularly around texture.\n\nI run this as a Claude Routine, so now every 2-4 hours (depending on how many tokens I can spare), my app is improving, my content library is growing, and I get these really fun artifacts to look at. Not all of them are amazing. Some are better than others. But it’s been tremendously valuable as a catalyst for improvement and adds a lot of fun to my day.\n\n*Here’s my full QA/Autonomous Content building routine.*\n\n```\n# Goals\n1. Create a complex composition that uses the website the way a real person would to help me test that things work as expected. Try to find bugs while producing realistic graphic design/digital art compositions.\n2. Use the final step-by-step, screenshots, and final image to create a tutorial entry. Make sure you use a process screenshot for the og-image on the tutorial page. \n\n## Steps\n- Rebase on main before starting.\n- Do a little research about graphic design techniques. Find inspiration on the web. Try to make something visually impressive.\n- You can also use reference images from the web as any digital artist would.\n- Review FEATURES.md to understand what is available.\n- Check for LAST_RUN.md in the [base project folder]/compositions folder. Review what was used in the previous run and when making choices about what features, colors, and iconagraphy to use, try to avoid repeating too closely. Sometimes it will be unavoidable, ie. if you need a gradient, just use a gradient, but we're just generally trying to get a good variety in the techniques and tools being tested.\n- Use the e2e system with playwright \n- You're working on a worktree, so [base project folder] would be the folder for the main trunk\n- Use an agent and run `/random a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z` to choose two random letters, and then choose a topic that starts with those letters to base your composition on.\n- Use an agent and run `/random cyberpunk,art-nouveau,art-deco,psychedelic,bauhaus,vaporwave,retro-futurism,swiss/international,memphis,brutalist,grunge,pop-art,constructivist,de-stijl,futurism,dadaist,surrealist,isometric,glitch,y2k,synthwave,steampunk,dieselpunk,atompunk,solarpunk,gothic,victorian,baroque,rococo,neo-expressionist,abstract-expressionist,suprematist,op-art,kinetic,lowbrow,kawaii,ukiyo-e,woodcut,risograph,lithographic,screen-print,collage,photomontage,typographic,hand-lettered,calligraphic,illuminated-manuscript,propaganda-poster,pulp,noir,mid-century-modern,tropical,tiki,americana,folk-art,naive,outsider,street-art,graffiti,stencil,sticker-bomb,skate,punk,zine,lo-fi,maximalist,anti-design,neubrutalism,claymorphism,skeuomorphic,blueprint,technical-illustration,infographic,cartographic,scientific-illustration,botanical,anatomical,woodblock,etching,engraving,halftone,duotone,neon,holographic,iridescent,chrome,liquid-metal,pixel-art,8-bit,16-bit,ascii-art,voxel,op-pop,neo-pop,post-modern,deconstructivist,anti-aesthetic,vernacular` to get an art style.\n- Use an agent and run `/random poster,logo,albumCover,zineCover,invitation,restaurantMenu,billboard,digitalPainting,tshirtDesign,holidayCard,birthdayCard,flierDesign,editorialMagazineCover,dataVisualization,tattooFlashSheet` to choose a project type.\n- Use playwright to create your composition using the UI. Simulate mouse movements, clicks, etc -- control the UI the way a person would. \n- It's also acceptable to bring in images from the internet to assemble in your composition the way a graphic designer might. \n- Use many layers, layer effects, filters, tools, colors, blend modes. \n- Use marquees, rotate things, resize them, etc. Test the transforms.\n- Use undo and redo often, undo multiple steps, redo back to where you were. Verify that things don't change unexpectedly.\n- When needed, use erase, cut and paste for duplication, etc. \n- Use groups and group manipulation, like setting the group as active and moving the whole thing at once.\n- Use snap, grid, guides, etc.\n- For some of your compositions (but not all) use text. Manipulate it. Rotate it, select and fill it, etc. Use the google fonts we have available. Something like a digital painting or a holiday card need not have text to convey the meaning. IMPORTANT: when positioning text inside a shape make sure it's properly seated -- descenders inside the container, appropriate margins, etc. \n- Act as an expert, incredibly creative graphic designer. You have a powerful tool available. Push it to the limits of its ability. \n- At the end, spin off an Art Director agent and ask for a critique. Ask for feedback and suggestions around composition, readability, color and texture, and technical competence. Don't excuse mistakes in the name of artistic license. If using text, ask specifically about the position of it. Then run a new iteration with those suggestions in place. \n\n**IMPORTANT: After each step, take a screenshot. If using marquees or making transformations, make sure you screenshot with the marquees active. Evaluate the screenshots for bugs and ensure that the app is performing to spec, as intended.**\n\n## Bug reports\n- When you discover a bug, check github issues to see if a similar bug already exists.\n- If it does exist and you have a new way to replicate it, add a comment with the new replication.\n- If it doesn't exist, add a github issue for it. Attach a screenshot if possible. \n- Don't solve the bugs you find, just report them. I want to triage first. \n-  In your bug reports add very clear steps to recreate it.\n- Before submitting your report, open a new window and make sure your steps actually do recreate the bug. If your steps don't recreate the bug, you should still submit the bug report, just make a note that you had trouble recreating the bug.\n\n## Composition files\n- Export a PNG of your composition with the topic you came up with as the file name. \n- Save all screenshots and exports in e2e/screenshots with a prefix for your project.\n- Also save your .lopsy project file. \n- I will review your work and score it on artistic quality, originality, complexity and composition. \n\n## Tutorial Entry\nWe have highly seo-optimized tutorial pages. Use your screenshots and the final step-by-step to make one of these entries. Create a PR with the new entry. \n- Only use the screenshots from the final process. If you're testing/iterating, make sure your process shots include the elements that actually made it into the final product and not the stuff that didn't. Especially fonts. \n- Be careful with \"the rest of the fucking owl\" -- make sure you're showing the right intermediate steps such that someone could reasonably follow along. \n- Use the tools the way a human would, and write in a way that's reasonable for a human to understand. For example, don' t use a marquee to make 1px line -- we have a pencil with cmd+shift+click for that purpose. \nBad instruction: \"Draw a marquee from (17,134) to (2871,2499)\" -- that's not how people write tutorials. \nGood instruction: \"Draw a marquee from the top left to the bottom right, leaving some margin around the edge. \n- Make sure your og-image screenshot is of the final project, not an intermediate shot. \n- Begin each tutorial post with the final exported image just below the headline/subheadline section. \n- Make sure you're using the swatch-style component for the palette section.\n- Review how other tutorials include the \"Follow along in lopsy\" flow to incorporate the .lopsy files publicly and allow users to open them in the app. This should be included with every tutorial.  \n- When you're done, use and adversarial review agent to verify that the tutorial reads like something a human would write, it's comprehensible, and doesn't overly condense or skip steps. \n\n## Overwrite the summary\nIn the [base project folder]/compositions folder, look for LAST_RUN.md and overwrite it with a summary of the project you just did. Summarize the tools used, the type of project (poster, logo, etc), and a general summary of the palette (ex: \"muted beige background with bold red and black overlays\" or \"vivid blues, purples and greens\") . Keep it very brief. It doesn't need the full e2e or all of the steps, just a summary of the exact features we used. If the file doesn't exist, create it.\n\n## Cleanup\nDelete the worktree at the end. The only artifacts should be the composition png file, .lopsy project file, and any github issues.\n```\n\n", "url": "https://wpnews.pro/news/maximum-efficiency-automated-qa-and-content-building-in-a-single-pass", "canonical_source": "https://lopsy.art/blog/autonomous-qa-and-content-building/", "published_at": "2026-10-02 19:28:09+00:00", "updated_at": "2026-10-02 19:36:23.817277+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "generative-ai", "developer-tools"], "entities": ["Seamus James", "lopsy.art", "Claude", "Playwright", "Rust", "WASM", "React"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/maximum-efficiency-automated-qa-and-content-building-in-a-single-pass", "markdown": "https://wpnews.pro/news/maximum-efficiency-automated-qa-and-content-building-in-a-single-pass.md", "text": "https://wpnews.pro/news/maximum-efficiency-automated-qa-and-content-building-in-a-single-pass.txt", "jsonld": "https://wpnews.pro/news/maximum-efficiency-automated-qa-and-content-building-in-a-single-pass.jsonld"}}