--- title: NoJS 4 - Pure CSS hackery with AI | daily.dev description: An experiment tests whether AI models can be taught to build pure CSS-only (no JavaScript) projects like calculators and platformer games, building on a prior... canonical: https://daily.dev/posts/nojs-4---pure-css-hackery-with-ai-etq0oiffc twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: NoJS 4 - Pure CSS hackery with AI | daily.dev og:description: An experiment tests whether AI models can be taught to build pure CSS-only (no JavaScript) projects like calculators and platformer games, building on a prior... og:url: https://daily.dev/posts/nojs-4---pure-css-hackery-with-ai-etq0oiffc og:image: https://api.daily.dev/og/posts/ETQ0OiFfc.png og:image:alt: NoJS 4 - Pure CSS hackery with AI og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # NoJS 4 - Pure CSS hackery with AI **[Scott Logic](https://daily.dev/sources/scottlogic)** · 5 min read · 0 upvotes · 0 comments ## Summary An experiment tests whether AI models can be taught to build pure CSS-only (no JavaScript) projects like calculators and platformer games, building on a prior series of hand-crafted CSS hacks. The author extracts reusable 'skills' from past blog posts as an AI harness and tests Claude Opus, Sonnet, and Haiku with and without it, finding that a good harness lets a weaker model (Haiku) outperform a stronger unharnessed one (Opus). Later testing with a newer premium model, referred to as Fable, shows the harness became unnecessary since the model succeeded without it, though manual feedback was still required to enforce constraints like avoiding JavaScript. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Can AI harnesses help a weaker AI model outperform a more powerful model on a coding task? Yes, in a CSS-only hacking experiment, Claude Haiku equipped with a custom harness of extracted 'skills' outperformed Claude Opus 4.8 working without any harness. The harness consisted of reusable CSS trick documentation extracted from prior hand-built projects, and it let a lower-tier model beat a higher-tier one on building a calculator using only HTML and CSS. _daily.dev surfaces experiments like this for developers refining their own AI agent harness setups._ ### Why did Claude Opus struggle to build a pure CSS calculator without JavaScript? Claude Opus 4.8 insisted that implementing division was practically impossible in a pure CSS-only calculator and initially produced a flawed version with several bugs, including an overflow bug when multiplying large numbers caused by CSS counters hitting an upper limit. It only fixed these issues after receiving manual feedback describing the symptoms, not the underlying cause. _daily.dev helps developers track how AI coding agents handle constraint-heavy, no-JavaScript CSS challenges._ ## Similar posts on daily.dev - [Stop Using JS for Everything: Harnessing the Power of Pure CSS in 2026](https://daily.dev/posts/stop-using-js-for-everything-harnessing-the-power-of-pure-css-in-2026-jql9shws1) · Ruby Flow · 6 upvotes · 0 comments - [Stop Building AI Slop: Build High-End Web Apps with AI](https://daily.dev/posts/stop-building-ai-slop-build-high-end-web-apps-with-ai-vfyjdmao2) · freeCodeCamp · 18 upvotes · 0 comments - [CSS Refactoring with an AI Safety Net](https://daily.dev/posts/css-refactoring-with-an-ai-safety-net-ptgflbwq7) · RUBYLAND · 0 upvotes · 0 comments --- Tags: [#ai-agents](https://daily.dev/tags/ai-agents), [#github](https://daily.dev/tags/github), [#css](https://daily.dev/tags/css), [#claude](https://daily.dev/tags/claude), [#vibe-coding](https://daily.dev/tags/vibe-coding) [View this post on daily.dev](https://daily.dev/posts/nojs-4---pure-css-hackery-with-ai-etq0oiffc) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"NoJS 4 - Pure CSS hackery with AI","url":"https://daily.dev/posts/nojs-4---pure-css-hackery-with-ai-etq0oiffc","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/nojs-4---pure-css-hackery-with-ai-etq0oiffc"},"datePublished":"2026-09-30T16:00:03.535Z","dateModified":"2026-09-30T16:00:56.104Z","description":"An experiment tests whether AI models can be taught to build pure CSS-only (no JavaScript) projects like calculators and platformer games, building on a prior...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a14f2af4e14e09478226ce6aee79a29c?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a14f2af4e14e09478226ce6aee79a29c?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Scott Logic","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Scott Logic","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/65c5cc47d7674fbc83d00599d7b44552","url":"https://daily.dev/sources/scottlogic"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/nojs-4---pure-css-hackery-with-ai-etq0oiffc","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"ai-agents,github,css,claude,vibe-coding","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Scott Logic","item":"https://daily.dev/sources/scottlogic"},{"@type":"ListItem","position":3,"name":"NoJS 4 - Pure CSS hackery with AI"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/nojs-4---pure-css-hackery-with-ai-etq0oiffc#faq","mainEntity":[{"@type":"Question","name":"Can AI harnesses help a weaker AI model outperform a more powerful model on a coding task?","acceptedAnswer":{"@type":"Answer","text":"Yes, in a CSS-only hacking experiment, Claude Haiku equipped with a custom harness of extracted 'skills' outperformed Claude Opus 4.8 working without any harness. The harness consisted of reusable CSS trick documentation extracted from prior hand-built projects, and it let a lower-tier model beat a higher-tier one on building a calculator using only HTML and CSS. daily.dev surfaces experiments like this for developers refining their own AI agent harness setups."}},{"@type":"Question","name":"Why did Claude Opus struggle to build a pure CSS calculator without JavaScript?","acceptedAnswer":{"@type":"Answer","text":"Claude Opus 4.8 insisted that implementing division was practically impossible in a pure CSS-only calculator and initially produced a flawed version with several bugs, including an overflow bug when multiplying large numbers caused by CSS counters hitting an upper limit. It only fixed these issues after receiving manual feedback describing the symptoms, not the underlying cause. daily.dev helps developers track how AI coding agents handle constraint-heavy, no-JavaScript CSS challenges."}}]} ```