[{"data":1,"prerenderedAt":564},["ShallowReactive",2],{"project-47702196":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":46,"post_text":48,"what":49,"said":87,"maker_in_thread":220,"shape":233,"grid":238,"attempts":526,"same_week":527,"maker_shows":33,"maker_hidden":556,"reader_version":557,"card":558},"47702196","CSS Studio","CSS Studio. Design by hand, code by agent","title","Show HN: CSS Studio. Design by hand, code by agent","https:\u002F\u002Fcssstudio.ai","cssstudio.ai","SirHound",1775733811,2026,175,107,352,4366,9,"notable","dev_tools","visual css editor","web_app",[21,24,25,26,27],"ai coding agent","live site editing","mcp server","design tool","mixed",-0.123,{"positive":31,"neutral":32,"mixed":33,"critical":34},10,28,2,20,60,{"design":37,"execution":39,"docs":42,"idea":43,"pricing":45},{"positive":38,"critical":31},4,{"positive":40,"critical":41},0,1,{"positive":41,"critical":33},{"positive":33,"critical":44},3,{"positive":40,"critical":38},[44,44,44,44,44,41,41,40,40,44,41,41,40,40,44,44,44,44,44,47,33,47,47,41,44,41,41,41,44,44,44,41,44,41,44,47,47,44,41,38],5,"Hi HN! I've just released CSS Studio, a design tool that lives on your site, runs on your browser, sends updates to your existing AI agent, which edits any codebase. You can actually play around with the latest version directly on the site.\n\nTechnically, the way this works is you view your site in dev mode and start editing it. In your agent, you can run \u002Fstudio which then polls (or uses Claude Channels) an MCP server. Changes are streamed as JSON via the MCP, along with some viewport and URL information, and the skill has some instructions on how best to implement them.\n\nIt contains a lot of ",{"problem":50,"audience":56,"pricing":68,"motivation":75,"time_to_build":75,"stack":76,"openness":85,"stage":86,"team_size":85},{"value":51,"source":52,"evidence":53},"Turning visual design edits on a live site into code changes in the codebase","maker",[54],{"id":55},"post",{"value":57,"source":58,"evidence":59},"Designers and developers working on websites with AI agents","inferred",[60,64],{"id":61,"by":62,"text":63},"47712215","kylex-ken","I'll give my honest take, I think what you've done is taken dev-tools and given it a wrapper that most designers (including myself would love) I find myself in dev tools alot…",{"id":65,"by":66,"text":67},"47703052","mpeg","Motion is an excellent library so I gave this a go on a prod site. Some feedback - I LOVE the concept, no clunky SaaS, you add the package and start it on your dev server and it…",{"value":69,"source":52,"evidence":70},"$99 one-off fee for lifetime updates",[71,72],{"id":61,"by":62,"text":63},{"id":73,"by":11,"text":74},"47728826","It’s a one off fee for lifetime updates",null,[77,81],{"value":78,"source":52,"evidence":79},"MCP server",[80],{"id":55},{"value":82,"source":52,"evidence":83},"Claude Code skill \u002Fstudio",[84],{"id":55},"unknown","launched",{"praise":88,"objections":106,"requests":149,"questions":181,"alternatives":203},[89,102],{"value":90,"source":91,"evidence":92},"Live editing concept feels slick and natural","commenter",[93,97,101],{"id":94,"by":95,"text":96},"47706979","K3UL","I agree, I almost missed it and left the website. Too bad because once I saw it and tried it out, that's when I thought the experience feels slick and polished. I think you shoud…",{"id":98,"by":99,"text":100},"47703285","codetiger","Unlike other comments, for me the experience on the product marketing worked well and straight forward. After reading the title and landing on your homepage, I had the feeling…",{"id":65,"by":66,"text":67},{"value":103,"source":91,"evidence":104},"Works with existing agent and codebase without a clunky SaaS",[105],{"id":65,"by":66,"text":67},[107,119,130,138],{"value":108,"source":91,"evidence":109},"Landing page looks generic, AI-generated, and needs more design personality",[110,114,118],{"id":111,"by":112,"text":113},"47702554","tyleo","The landing page feels tacky to me. It has a similar style to what I’ve seen LLMs churn out across the internet. Unclear if it’s actually generated or not but it’s at least in…",{"id":115,"by":116,"text":117},"47704723","ihycjnigghjljb","Look, if you’re making a design tool, the absolute very least that you can do to show that you know what makes a design tool good is design a good website for it. LLMs already…",{"id":61,"by":62,"text":63},{"value":120,"source":91,"evidence":121},"Demo video unclear about what the product does and how to use it",[122,126],{"id":123,"by":124,"text":125},"47708586","andreasley","Unfortunately, that video does not explain anything at all. I now know that the product can be used with a mouse, that I can select things and set some properties. Who is it for?…",{"id":127,"by":128,"text":129},"47703781","thrownaway561","\"Hi HN! I've just released CSS Studio, a design tool that lives on your site, runs on your browser, sends updates to your existing AI agent, which edits any codebase. You can…",{"value":131,"source":91,"evidence":132},"$99 price is steep",[133,134],{"id":61,"by":62,"text":63},{"id":135,"by":136,"text":137},"47704891","zghst","$99 dollars vs using Cursor\u002FWindsurf?!",{"value":139,"source":91,"evidence":140},"Unclear need for an LLM between source files and the editor",[141,145],{"id":142,"by":143,"text":144},"47707324","my_throwaway23","WYSIWYG, huh? I'm certainly not against the idea, and the editor seems to work well enough (given the 3 minutes I spent on the landing page). I'm not so sure why it needs an LLM…",{"id":146,"by":147,"text":148},"47709910","naet","I'm confused about what the AI is doing, since it seems like a WSYWIG site editor. The AI is just to apply the changes? Why not have the WSYWIG just apply it directly if that is…",[150,162,166,174],{"value":151,"source":91,"evidence":152},"Video or live demo on the homepage",[153,157,161],{"id":154,"by":155,"text":156},"47702552","evancaine","Congrats on the launch. Now put a giant, 30 second video of the product being used, directly below \"Design by hand.Code by agent.\" No one is clicking Get Started or Buy Now until…",{"id":158,"by":159,"text":160},"47702703","serial_dev","I’m on mobile, I’d much rather see some visual demo, ideally video, explaining your product in 60 seconds or less than try to tap around in the live demo.",{"id":65,"by":66,"text":67},{"value":163,"source":91,"evidence":164},"Diff view before applying agent changes",[165],{"id":65,"by":66,"text":67},{"value":167,"source":91,"evidence":168},"Tailwind integration and token-aware editing",[169,170],{"id":65,"by":66,"text":67},{"id":171,"by":172,"text":173},"47703069","megaman821","I was looking at this yesterday and wondering if it would play nice with design systems. AI loves making localized changes and when playing around with spacing I tend to just…",{"value":175,"source":91,"evidence":176},"Narrated walkthrough for accessibility",[177],{"id":178,"by":179,"text":180},"47703154","bigblind","This looks interesting! I understand not wanting to put out a narrated tour as the video, but being visually impaired, i find video demos without narration, that constantly move…",[182,189,196],{"value":183,"source":91,"evidence":184},"How does it handle responsive breakpoints",[185],{"id":186,"by":187,"text":188},"47703526","crepuscularJ","I work in an agency that makes flashy marketing sites. My biggest concern with tools like this is always how it works responsively across viewports. I can make a change in dev…",{"value":190,"source":91,"evidence":191},"How it compares to Figma's AI design tool",[192],{"id":193,"by":194,"text":195},"47702523","ramon156","I'll be the boogeyman, how does this compare to Figma's AI Design tool? I've had an easy experience with it, although it's just a GPT wrapper.",{"value":197,"source":91,"evidence":198},"Whether CSS-in-JS and frameworks like Chakra are supported",[199],{"id":200,"by":201,"text":202},"47702877","rafaelmn","Does this work with CSS in JS stuff and CSS frameworks - like if I was using Chakra would this be able to edit the site elements and have the agent reverse map to where the style…",[204,209,216],{"value":205,"source":91,"evidence":206},"Figma and Figma Make",[207,208],{"id":193,"by":194,"text":195},{"id":61,"by":62,"text":63},{"value":210,"source":91,"evidence":211},"Browser devtools",[212],{"id":213,"by":214,"text":215},"47703771","Vachyas","The video was really good, and the UI looks fun too. If I understand correctly, is this not as useful for frameworkless html\u002Fcss\u002Fjs development? Since when you make edits using…",{"value":217,"source":91,"evidence":218},"Framer",[219],{"id":65,"by":66,"text":67},{"comments":221,"answered":222,"key":223},30,12,[224,227,230],{"id":225,"text":226},"47702603","I did have a video on for launch but removed it when I added CSS Studio itself to the page (check top right). Perhaps it can make a return though!",{"id":228,"text":229},"47702926","It's up!",{"id":231,"text":232},"47702930","It's a great point, I added the video back",{"commenters":234,"max_depth":235,"maker_replies":221,"first_comment_mins":236,"lifespan_hours":237},66,7,36,86,[239,241,243,246,248,249,250,254,256,259,261,263,264,267,269,273,275,277,280,284,287,290,294,297,300,303,306,309,310,312,314,317,319,321,324,328,331,333,335,337,339,341,343,344,346,348,351,353,355,357,361,363,368,370,371,374,377,378,380,384,386,390,392,394,396,399,402,407,411,413,418,421,423,425,428,432,433,435,439,442,446,448,450,452,455,459,461,464,468,472,474,477,479,481,483,488,490,493,497,502,505,509,511,513,515,519,523],[154,40,44,240,155,40],"project\u002Fneutral\u002Fdesign",[225,40,40,242,11,41],"maker\u002Fneutral\u002Fdesign",[244,40,44,240,245,40],"47702624","bossyTeacher",[228,40,40,247,11,41],"maker\u002Fneutral\u002Fnone",[158,40,44,240,159,40],[231,40,40,247,11,41],[251,40,44,252,253,40],"47702781","project\u002Fneutral\u002Fexecution","sassymuffinz",[255,40,40,252,11,41],"47703010",[257,40,44,252,258,40],"47703265","yoz-y",[260,40,40,252,11,41],"47703603",[262,40,44,252,253,40],"47705201",[94,40,44,240,95,40],[265,40,44,240,266,40],"47702871","gianthard",[268,40,40,247,11,41],"47702925",[270,40,41,271,272,40],"47703416","project\u002Fcritical\u002Fdesign","threethirtytwo",[274,40,40,247,11,41],"47703633",[123,40,41,276,124,40],"project\u002Fcritical\u002Fdocs",[278,40,44,240,279,40],"47703679","BloondAndDoom",[281,40,40,282,283,40],"47706175","other\u002Fneutral\u002Fnone","upmostly",[285,40,40,282,286,40],"47708069","noodlesUK",[288,40,40,282,289,40],"47708376","sebmellen",[291,40,40,292,293,40],"47708445","other\u002Fneutral\u002Fdesign","jaredklewis",[295,40,40,282,296,40],"47714434","mikenikles",[298,40,40,292,299,40],"47709611","avtar",[301,40,40,282,302,40],"47710229","TeMPOraL",[304,40,44,240,305,40],"47711816","cush",[307,40,41,308,305,40],"47711813","maker\u002Fcritical\u002Fdesign",[111,41,41,271,112,40],[311,41,40,242,11,41],"47702626",[313,41,41,271,279,40],"47703758",[315,41,41,271,316,40],"47703792","duskdozer",[318,41,41,271,279,40],"47703729",[320,41,40,242,11,41],"47704264",[322,41,40,282,323,40],"47705299","Citizen_Lame",[325,41,40,326,327,40],"47706579","commenter\u002Fneutral\u002Fnone","Dansvidania",[329,41,40,282,330,40],"47709268","aziaziazi",[332,41,40,247,11,41],"47728792",[65,33,44,334,66,40],"project\u002Fmixed\u002Fexecution",[336,33,40,247,11,41],"47703092",[338,33,44,240,66,40],"47703111",[146,44,44,340,147,40],"project\u002Fneutral\u002Fidea",[342,44,40,247,11,41],"47728806",[213,38,44,340,214,40],[345,38,40,252,11,41],"47703846",[347,38,44,340,214,40],"47724798",[349,47,44,252,350,40],"47707044","itsevrgrn",[186,352,44,240,187,40],6,[354,352,40,240,11,41],"47703620",[61,235,44,356,62,40],"project\u002Fmixed\u002Fpricing",[358,235,40,359,360,40],"47718397","commenter\u002Fneutral\u002Fpricing","Terretta",[73,235,40,362,11,41],"project\u002Fneutral\u002Fpricing",[364,365,47,366,367,40],"47705510",8,"project\u002Fpositive\u002Fdesign","lapinovski",[369,365,40,242,11,41],"47728983",[127,18,41,271,128,40],[372,18,41,271,373,40],"47705593","ape4",[375,18,47,366,376,40],"47708013","Yabood",[98,31,47,366,99,40],[379,31,40,247,11,41],"47703650",[381,382,40,282,383,40],"47706912",11,"supliminal",[385,382,40,282,360,40],"47718514",[387,222,47,388,389,40],"47706742","project\u002Fpositive\u002Fidea","unvalley",[115,391,41,271,116,40],13,[171,393,44,240,172,40],14,[395,393,40,240,11,41],"47703124",[178,397,44,398,179,40],15,"project\u002Fneutral\u002Fdocs",[400,397,40,401,11,41],"47703205","maker\u002Fneutral\u002Fdocs",[403,404,41,405,406,40],"47705312",16,"project\u002Fcritical\u002Fidea","65",[408,409,44,252,410,40],"47703728",17,"dgb23",[412,409,40,252,11,41],"47703891",[414,415,41,416,417,40],"47702853",18,"project\u002Fcritical\u002Fpricing","latexr",[419,415,41,416,420,40],"47702892","hapidjus",[422,415,40,362,11,41],"47702962",[424,415,41,416,417,40],"47702996",[426,415,40,427,11,41],"47703043","maker\u002Fneutral\u002Fpricing",[429,430,40,282,431,40],"47703161",19,"hirako2000",[200,34,44,252,201,40],[434,34,40,252,11,41],"47702935",[436,437,44,240,438,40],"47705247",21,"anonymous344",[440,437,40,441,373,40],"47705616","commenter\u002Fneutral\u002Fdesign",[443,444,44,252,445,40],"47726160",22,"midnightn",[447,444,40,252,11,41],"47728817",[193,449,44,340,194,40],23,[451,449,40,340,11,41],"47702589",[453,449,44,340,454,40],"47703066","steve-atx-7600",[456,457,41,405,458,40],"47706842",24,"Polarity",[460,457,40,326,376,40],"47707900",[462,457,40,326,463,40],"47709219","seattle_spring",[465,466,44,242,467,40],"47746542",25,"mvsingh",[469,470,41,276,471,40],"47703577",26,"tipiirai",[473,470,40,401,11,41],"47703585",[475,470,44,398,476,40],"47703604","TehCorwiz",[478,470,40,401,11,41],"47703916",[480,470,44,398,471,40],"47703612",[482,470,40,401,11,41],"47704045",[484,485,47,486,487,40],"47702900",27,"project\u002Fpositive\u002Fnone","dmje",[489,485,40,401,11,41],"47702937",[491,485,47,492,487,40],"47705420","maker\u002Fpositive\u002Fdocs",[494,32,47,495,496,40],"47711189","maker\u002Fpositive\u002Fnone","japaco",[498,499,41,500,501,40],"47710242",29,"project\u002Fcritical\u002Fexecution","toastal",[503,221,47,366,504,40],"47705492","butterlettuce",[506,507,44,340,508,40],"47710415",31,"purple-leafy",[135,510,41,416,136,40],32,[512,510,40,252,11,41],"47729005",[142,514,41,405,143,40],33,[516,517,47,388,518,40],"47703180",34,"nc1zdev",[520,521,41,271,522,40],"47711077",35,"thekevan",[524,236,47,486,525,40],"47729186","vaibhavsing",[],[528,533,538,543,548,552],{"id":529,"name":530,"points":531,"category":532},"47742200","boringBar",520,"productivity",{"id":534,"name":535,"points":536,"category":537},"47727960","Pardonned.com",501,"data",{"id":539,"name":540,"points":541,"category":542},"47739174","Oberon System 3",245,"infrastructure",{"id":544,"name":545,"points":546,"category":547},"47778306","tracksuccession.com",191,"web_saas",{"id":549,"name":550,"points":551,"category":547},"47749674","BrightBean Studio",190,{"id":553,"name":554,"points":555,"category":20},"47705413","Craft",177,false,"v2",{"id":559,"name":5,"line":6,"ai":556,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":560,"top":18,"kw":561,"maker":11,"domain":10,"tier":19,"attempts":40,"strip":562,"url":9,"mix":563,"praise":90,"objection":108,"sub":21},47702196,-0.12,[21,24,25,26,27],"3333311003110033333525513111333131355314",[31,32,33,34],1794036698316]