{"id":23193,"date":"2026-08-01T18:13:02","date_gmt":"2026-08-01T18:13:02","guid":{"rendered":"https:\/\/scannn.com\/designing-with-code\/"},"modified":"2026-08-01T18:13:02","modified_gmt":"2026-08-01T18:13:02","slug":"designing-with-code","status":"publish","type":"post","link":"https:\/\/scannn.com\/lv\/designing-with-code\/","title":{"rendered":"Designing with code"},"content":{"rendered":"\n
\n

Code has always felt like a natural creative medium to me. Maybe it\u2019s that I went to school for engineering, not art or design.<\/p>\n

<\/p>\n

\n<\/p>\n
\n

The OpenAI Gradient<\/em><\/i>: Year in Review 2020<\/span><\/p>\n<\/figcaption><\/figure>\n

When an idea is defined by a set of rules, you can generate endless variations, dial in parameters to your heart\u2019s content, and systematically converge on the strongest solution.<\/p>\n

Instead of individual assets, you design systems. A single idea (like randomized color gradients<\/a>) can scale across many applications while maintaining a consistent visual language.<\/p>\n

The medium itself also reveals new possibilities. Code doesn\u2019t just make design more efficient\u200a\u2014\u200ait expands what a design can be.<\/p>\n

\n<\/div>\n

<\/p>\n\n

Historically<\/strong>, these virtues didn\u2019t come for free. They came with a significant upfront investment.<\/p>\n

You had to learn to program first, of course. Then, before you could even begin the creative work, you had to build the underlying framework. Finally, after everything was in place, you had to write and edit code by hand to explore different branches of an idea.<\/p>\n

This friction kept many ideas from ever getting off the ground.<\/p>\n

\u201cIf there is any delay in that feedback loop between thinking of something and seeing it and building on it, then there is this whole world of ideas which will never be.\u201d<\/p><\/blockquote>\n

\u2014 Bret Victor, Inventing on Principle<\/em><\/a> (2012)<\/p>\n\n

In the age of AI<\/strong>, agents can handle the implementation faster than I ever could. (I never liked coding much anyway; I only liked what it enabled.) Now instead of writing code, I\u2019m free to explore possibilities with the agent\u200a\u2014\u200adirecting, experimenting, asking \u201cwhat if?\u201d<\/em> again and again as an idea comes to life.<\/p>\n

Creating feels more intuitive, immediate, and fun than ever. Across our design team, code has become integral to exploring and producing work. I reach for Cursor to design not just interfaces, but graphics, charts, posters, logos, and animations. Below are a few pieces from earlier this year.<\/p>\n

<\/p>\n

\n<\/p>\n

<\/p>\n

\n<\/p>\n
\n

Securely indexing large codebases<\/span><\/p>\n<\/figcaption><\/figure>\n

\n<\/div>\n

<\/p>\n

<\/p>\n

\n<\/p>\n
\n

How we compare model quality in Cursor<\/span><\/p>\n<\/figcaption><\/figure>\n

\n<\/div>\n

<\/p>\n

<\/p>\n

\n<\/p>\n
<\/figure>\n

\n<\/div>\n

<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

\n<\/p>\n
\"\"<\/figure>\n

\n<\/div>\n

<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

\n<\/p>\n
\n

Training Composer for longer horizons<\/span><\/p>\n<\/figcaption><\/figure>\n

\n<\/div>\n

<\/p>\n

<\/p>\n

\n<\/p>\n
\n

Improving Composer through real-time RL<\/span><\/p>\n<\/figcaption><\/figure>\n

\n<\/div>\n

<\/p>\n

\n<\/div>\n

<\/p>\n

One of my favorite pieces above is the header graphic for the blog post, \u201cImproving Composer through real-time RL.\u201d Reinforcement learning, or RL, is built around repeated cycles of feedback, so a gear system felt like a nice visual metaphor. Here\u2019s a look at how the design came together in Cursor through selected prompts from the conversation.<\/p>\n

    \n
  1. First, we scaffold a blank canvas and reference the code setup of past graphics.<\/li>\n<\/ol>\n

    let\u2019s create a new blog header graphic. it\u2019s for the same post as those other charts, called \u201cImproving Composer through online RL\u201d. reference what we do for other blog-*.py<\/code> scripts. let\u2019s start with black on white blank page to start. then i\u2019ll instruct you what we should draw<\/p><\/blockquote>\n

    \"\"<\/figure>\n
      \n
    1. Next, we define the language for the gears.<\/li>\n<\/ol>\n

      i want to do a line drawing .\u00a0.\u00a0. inspired by this image with gears. instead of full gears, do a simplified abstract representation with just radial lines.<\/p><\/blockquote>\n

      let\u2019s only do perfectly circular radial lines. and we can dial in the inner circle and outer circle for each of the 3 gears .\u00a0.\u00a0. the middle gear should consist of two concentric but different sized gears (like a double gear).<\/p><\/blockquote>\n

      as a rule here in this abstract gear world, i want intersection of the gears to be where the lines are halfway into each other.<\/p><\/blockquote>\n

      great! but it\u2019s too wide now, maybe you need to adjust the sizing so it works. maybe the S and M need to be smaller after all?<\/p><\/blockquote>\n

      oh awesome. but should be a larger hole. and in general the outer circles need to be larger too. for the rightmost one, let\u2019s increase until the inset 96. having a small delta between outer circle and inner hole gives it a less sun quality, and higher gear quality. less radial, more gear-like.<\/p><\/blockquote>\n

      can you offset the rotation so that the lines don\u2019t ever intersect? like gear teeth fitting together.<\/p><\/blockquote>\n

        \n
      1. With the language in place, we work through the details of the composition.<\/li>\n<\/ol>\n

        since we have overlapping gears due to the larger outer gear being in the background .\u00a0.\u00a0. what does it look like to \u201ccrop out\u201d the left gear\u2019s background?<\/p><\/blockquote>\n

        much visually cleaner. but is there any way to remove the partial lines? only show the line if it\u2019s fully not cropped.<\/p><\/blockquote>\n

        perfect. now let\u2019s dial in the densities. the spacing should roughly optically look the same. but can you improve the density formula? should be dependent on inner\/outer radius\/overall size.<\/p><\/blockquote>\n

        i want the left gear to intersect with the outside of the middle gearset. then the right gear needs to intersect with the inner of the middle gearset. it\u2019s reversed right now.<\/p><\/blockquote>\n

        \"\"<\/figure>\n
          \n
        1. After getting the still image just right, we translate the system into motion.<\/li>\n<\/ol>\n

          this looks amazing. now can you create an animated version? want the gears to rotate CW or CCW per how gears operate. want it to rotate slowly, and form a seamless loop<\/p><\/blockquote>\n

          let\u2019s crop it at the shortest loop possible, so that the file size can be much smaller too. does it work to just loop it at one spoke, or do we need multiple spokes for 1 seamless loop?<\/p><\/blockquote>\n

          i like the speed, but the long frame duration makes it jumpy. need the same timing, but make it a lot smoother.<\/p><\/blockquote>\n

          should we adjust spoke counts so it loops more quickly? or this is best we\u2019re gonna get<\/p><\/blockquote>\n

          actually let\u2019s undo that. whole spokes are fine. but maybe what\u2019s bothering me is how they jump in abruptly. anything we can do about that?<\/p><\/blockquote>\n

          i mean, was wondering about a fade in\/out, or something.<\/p><\/blockquote>\n

            \n
          1. Finally, we optimize the animation into a usable asset.<\/li>\n<\/ol>\n

            can we try 30fps? make the fades less long, just a subtle quick one to depop<\/p><\/blockquote>\n

            pretty long GIF duration, so it\u2019s 5MB even at 1200px wide. any other optimizations we can do? ran it through gifsicle already.<\/p><\/blockquote>\n

            \n<\/figure>\n

            The prompts above are an edited selection from a small and straightforward project. Larger projects can stretch across weeks and hundreds of exchanges, with several detours and dead ends along the way. But the rhythm remains the same.<\/p>\n

            That feedback loop between imagining, seeing, and building has become dramatically shorter. And suddenly, a whole world of ideas is within reach.<\/p>\n\n

            And yet<\/strong>, no matter how powerful our tools become, the seed of the idea always starts somewhere human.<\/p>\n

            I\u2019ve found there\u2019s just no substitute for that initial period of thinking deeply about a design problem, sitting with it, putting it down and coming back to it, evaluating it, sketching it out on paper. Before the code, there\u2019s the sketch. To this day, I\u2019ve not yet achieved a good result when letting AI design a concept from scratch.<\/p>\n

            \"\"<\/figure>\n

            The designer is still ultimately responsible for taste, judgment, and deciding what\u2019s worth creating.<\/p>\n<\/p><\/div>\n

            Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

            Code has always felt like a natural creative medium to me. Maybe it\u2019s that I went to school for engineering, not art or design. The OpenAI Gradient: Year in Review 2020 When an idea is defined by a set of rules, you can generate endless variations, dial in parameters to your heart\u2019s content, and systematically […]<\/p>\n","protected":false},"author":16,"featured_media":23194,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[143],"tags":[],"class_list":["post-23193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai"],"_links":{"self":[{"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/posts\/23193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/comments?post=23193"}],"version-history":[{"count":0,"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/posts\/23193\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/media\/23194"}],"wp:attachment":[{"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/media?parent=23193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/categories?post=23193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/tags?post=23193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}