I think I need to go lie down
twitter.com
twitter.com
Happy to answer any questions about tldraw/this project. It's definitely not putting anyone out of work, but it's a blast to play with. Here's a more complicated example of what you can get it to do: https://twitter.com/tldraw/status/1725083976392437894
Seriously this is lightning in a bottle. Charge $5/mo and have users bring their own OpenAI key.
Here’s a freshly MIT’ed licensing server you can use. It’s written in elixir and powers https://go.robocoder.app
Reach out if you need help getting it running!
https://github.com/emcmanus/robocoder-server/
(Or I’m sure Robocoder.app can walk you through the dev setup)
Edit: found the answer on the github readme
"*To use your own API key, you need to have access to usage tier 1. Check out your current tier, and how to increase it in the OpenAI settings."
``` You are an expert tailwind developer. A user will provide you with a low-fidelity wireframe of an application and you will return a single html file that uses tailwind to create the website. They may also provide you with the html of a previous design that they want you to iterate from. Carry out any changes they request from you. In the wireframe, the previous design's html will appear as a white rectangle. Use creative license to make the application more fleshed out. if you need to insert an image, use a colored fill rectangle as a placeholder. Respond only with the html file. ```
(not sure about why the creative[commons?] license is referred here and why does it help.)
and for each generation the user prompt is:
``` [IMAGE_LINK] Turn this into a single html file using tailwind. ```
https://github.com/tldraw/draw-a-ui/blob/8a889bf36afc06fbb0c...
Looks simple enough to run “privately” by screenshooting a normal tldraw canvas and passing the prompt with it to the API.
Incidentally, here’s a briefer spelling of that function (skipping the superfluous Array.from(), using a for loop instead of forEach, and using .append() instead of .appendChild(), cumulatively reducing 8 years of browser support to 5½+ years, which is no meaningful difference; and although I’ve declared Array.from() superfluous, note that this is only the case because querySelectorAll returns a non-live NodeList—you couldn’t do this with childNodes since it’d be being mutated during iteration so you’d miss half the items due to how it all works):
function moveSelectedItems(fromList, toList) {
for (const item of fromList.querySelectorAll('input[type="checkbox"]:checked')) {
item.checked = false; // Uncheck the item
toList.append(item.closest('li')); // Move the entire list item
}
}Test page: https://output.jsbin.com/jixoqur/quiet
[0] https://output.jsbin.com/hawelubaxo/quiet
[1] https://chat.openai.com/share/faa9e2b7-8e4c-4ee3-9386-1f74ea...
Those in the weeds are generally going to have a more nuanced view of the benefits and challenges--i.e. that it's incredibly useful but also very fallible and requires careful hand-holding to get production-ready results.
I say all that as an AI optimist. The value is real and the most impressive demos are glimpses of where we're heading. But it's going to take some time before the median result catches up to the hype.
The way has been shown with the web. Now many people who would have been paying a designer are using things similar to Wix. A lot of people don’t need top of the line custom work, and most custom work isn’t top of the line. I’ve seen AI frequently, but a bit unpredictably, hit the high notes. https://www.joelonsoftware.com/2005/07/25/hitting-the-high-n...
This low-entropy, repetitive coding is not limited to the user interfaces. We do tend to describe the same structures and logic over and over again in front-ends, backends, and databases.
I am currently building an open-source project that tries to make the definition of applications from database structure to business logic to user interfaces, much more declarative and compact. If you are interested, you can try it on https://sql.ophir.dev
The strange thing is that on HN, the limits of these approaches re: extensibility and maintenance are easily recognized when talking about traditional no-code platforms. But somehow with AI, these problems are now fixed, and we wont have to worry about unspooling spaghetti spat out from a black box.
This extends far beyond just developers. This is a majority of all office work, from data entry to accounting to creative work. Most office work is just doing the same thing over and over again, often times with different people repeating what are essentially the same tasks, just at different companies.
Perhaps to start with, one way to have vastly more creativity/diversity of things people do is to have vastly fewer humans on earth.
I know this isn’t quite a widget, but when something as simple as input type=“number” was introduced, I was excited because it could be used to call up the mobile keyboard for numeric input. (Say for a zip code, which is a common use case). But unfortunately, it can also be changed via your mouse’s scroll wheel, accidentally, so I’m stuck using input type=“tel” for everything. (Do you want to scroll to your zip code?)
The problem with these things is you can’t just push out improvements and fixes. Everything has to be backwards-compatible and I feel like they’re never nearly good enough at the beginning.
This is even more automation of drudgery and easy repetitive work.
UI designers will be able to give a "demo" but how will this basic functionality translate to the rest of the app? It won't.
It certainly will lead to fun and productive conversations like “it’s already working right there! Why is it going to take so long to get it into the app?!? Can’t you just download it?”
Since well before GPT there has been an argument for making very early prototypes/mocks more obviously lo-fi, such that their visual polish is proportional to how functional they are under the hood.
Beautiful, seemingly “working” UI-only prototypes have a way of setting unrealistic expectations even with clear communication, leading to a higher probability of proto-duction.
I don’t know how many times I’ve come across a project where a terrible system design was foisted on a group of engineers because of the constraints required by a Figma design that was blessed by some exec or other.
Granted there are worse problems in these orgs, but easy high fidelity mock-ups vs wire frames has made it worse.
If you want it to do a better job, add "it's very important for my career".
Lol.
<p><label>Rotation<br><input id="rotation" type="range" value="0" max="360" oninput="transformSquare()"></label></p>
<div id="square" style="width:100px;height:100px;background:gold"></div>
<script> const transformSquare = () => square.style.transform = `scale(${scale.value}) rotate(${rotation.value}deg)`; transformSquare(); </script>
He sent me a screenshot of the main form.
I put the screenshot into ChatGPT and said “make a react form like this in bootstrap”.
Made some adjustments, added my software, a few hours later showed the client who was knocked out to see a proof of concept of our systems integrated so quickly.
When doing web development I often take a screenshot of a problem with css layout, upload to ChatGPT and ask how to fix it.
The demo shown in the tweet seems pretty similar.
Yes, there have been exceptions every now and then, but most web devs don't like them. They don't look fancy on your cv and face it, who wants to stick to building web forms for the rest of their career?
Go to a civil engineer and ask to create a building that tilts extremely on one side and requires concrete reinforcement with titanium whatever... they will laugh at you.
Do the equivalent to a software engineer or product manager and they will hurry to invent yet another framework to satisfy your request, without giving a second thought about long-term consequences.
My point is that the real world has the laws of physics keeping things in check. With software, we don't have such obvious hard limits and each situation is case-by-case with lots of variables... it gets messy.
It sounds to me like the commenter has found a subset of his work which can be sped up significantly with chatGPT and is using that to continue conversations with a potential client. Pretty cool if you ask me.
Right now with the increased productivity, it leads to customer engagements that previously wouldn't have been possible for me. E.g. now it's feasible from a cost standpoint to let me as a freelancer build internal tooling that previously would have been to expensive in total. It's also easier to deliver initial MVP milestones for projects for a price that's in a much more comfortable range for smaller companies.
Yeah, that advantage may go away, but just like good "googling" was/is a skill that can set you apart from your peers, proper usage of LLMs is a skill as well that needs to be learned (and that many won't).
Or worse, they'll feel they've been scammed, and that you're a fraud.
AI or not it's not a good strategy, in life and in business, to lie regarding on what you can actually do/deliver.
It’s turtles all the way down :+)
Oh wow, that’s a neat idea that I hadn’t thought of before. I’m decent enough at CSS that I can normally fix it in dev tools then port/copy the styles to the code but I’ll have to remember that trick.
I haven’t used ChatGPT as much for code as I have CLI piping or bash scripts to munge data quickly. Things I wouldn’t have checked (like for debugging or proving a hypothesis) become almost easy when I can give ChatGPT the output of a command and ask it for bash to format/collate/sort/extract what I want out of it. I can do it manually but I’m slow at that process and have to google or use man pages to remember flags/args/etc. For code I mostly just use GH Copilot.
If it takes you a long time to build a form, you've done something very very wrong.
However, you can paste in an image, or you can click the paperclip on the bottom left of the prompt area to upload an image (or other files).
2. Switch model to ChatGPT 4
3. Click the attachment/paperclip button in the prompt bar
4. Send
(So actually technically I think that means no, it's not using ChatGPT, but I don't think that was the point.)
Imagine what happens when you have dozens of barely technical people all adding features by sketching them and clicking “make it real”. Each one is producing hundreds of lines of code. At the end of the day someone is responsible for understanding the output because since the output is non-deterministic, that’s all we have.
Joking reply: Have you seen modern software development?
Joking-but-not-really reply: I wonder if someone could train a "bad AI code to human-maintainable code" AI.
Artisans who can sing on key will continue to make very interesting things.
But also in parallel a whole new wave of people that couldn’t or didn’t want to learn to sing on key will make entirely new genres of music and also pop for the masses with far less effort.
Even the artisans will use it sparingly to enhance and perfect and speed up some of their workflows
Of course metaphors have limits, but the limits of this particular metaphor hide all of the flaws of this technology.
This is the logical progression of those same concepts. If I were a product manager at a website builder, I’d be all over integrating ai builders like this. It will never work for barely defined complex business tasks, but it might do fine to create a cost estimator for a photography business, for example.
Meanwhile most SMBs don't have an app/website or have an useless one. There is so much space for niche markets and good tools.
Business process workflow software is quite popular. There are many applications where people do something similar with drag and drop/interactive widget editors and they can have complex forms, parent-child, state transitions, etc.
Using something like GPT Vision means you can skip the widget drag and drop and use more freeform drawing tools or freehand sketching.
Notion is probably the most popular example today but there are more complex ones going back forever.
Business process workflow software is popular, but have massive downsides. These softwares consume massive amount of resources. One dev becomes one dev plus a business person plus another person plus overhead.
> Using something like GPT Vision means you can skip the widget drag and drop and use more freeform drawing tools or freehand sketching.
To do... what? Where does the UI go? Where does the data go? Where is it stored? How is it accessed? How is security? How are backups? Version control? Etc..
Look at me I'm old yelling at clouds!
Ok, dreamweaver code was ugly and unusable when AI generated code is not too bad (sometimes). But still, I also feel we kinda were already close to where we’re at today.
VB was highly opinionated; it made native windows-style UIs and nothing else. Nobody was taking arbitrary mockups from designers, with a wildly custom look-and-feel, and replicating them down to the pixel in VB.
Today, most product GUIs are part of the brand. For better or worse, every company wants a distinctive look and feel and set of UI behaviors. This requires the tools used to build them to be much more complicated.
You could replicate VB in a browser. Many people have done roughly that. But nobody uses them to build products, because their company doesn't want boring/generic UIs.
I'm sure it was some monstrosity of a hack. I didn't understand it at the time.
Don't get me wrong, these new tools are cool, and I imagine they'll be great for prototyping small things quickly!
A decade after that, something floated around for a year or two called Visix Vibe, which gave the same thing, but for this relatively new language (at the time), Java.
Every few years, maybe 4-5 or a decade or so, someone gets the itch to make all the complexity fade away. Eventually though, they build an OS.
There’s no reason HTML can’t do a lot more than it does out-of-the-box, saving crazy numbers of developer-hours and piles of user frustration every year. It just doesn’t.
I think just regretting an old feature long gone without proper context is dangerous. If we are to bring back those approaches we have to keep in mind exactly why they went away in the first place.
When we went to the browser we took 30 years of UI development knowledge and UI/UX principle and flushed it down the toilet.
Only very recently have we started to gain composability in browser UIs through things like React, and it's a sad facsimile of the widget composability we had in WYSIWYG UI development on PCs in the late 1980s and early 1990s.
The web is a shit UI platform, but that's because it wasn't designed to be one. UIs were shoehorned into a hypertext system designed for viewing documents.
I still think it's impressive that AI can just look at 2 rectangles and discern slider though.
Ignoring that though, I t’s fair to make this point for the current level of capabilities, but look at the trajectory… in a year or two when the training set has lots of examples of people using this, it should be pretty competitive.
20 years ago we also had music, pizza, movies, games and old people yelling at clouds.
Tools like this can be good for indie developers, the ones who in the past may have had to learn a bit of dev/design to release something. The division of labour is larger teams is different. The product manager may have a user research background instead of a software one. The designer may be good with semi-complete prototypes in Framer, but the responsibility for delivering production code may still rest with the dev team.
What really shook me is that GPT-4 can spit out quite solid code for various things. I know there is a lot more to software development than just writing code but if you had asked me 3 years ago if AI would be able to code AT ALL within 10 years I would have said "no chance" with 100% certainty. Had to accept I was very wrong about that and don't have the technical background to really assess how far/fast this stuff can go.
People don't even seem to grasp that the next gen of these tools wont be rolling the dice once it'll be rolling it 1000 times then you pick the one that nailed it. Then the next generation will roll 10,000 times and it'll be picking the one that nailed it even without your input at all.
That's the fear anyway.
> print("hello world")
holy shittttt :o :o
You are an expert web developer who specializes in tailwind css. A user will provide you with a low-fidelity wireframe of an application. You will return a single html file that uses HTML, tailwind css, and JavaScript to create a high fidelity website. Include any extra CSS and JavaScript in the html file. If you have any images, load them from Unsplash or use solid colored retangles. The user will provide you with notes in blue or red text, arrows, or drawings. The user may also include images of other websites as style references. Transfer the styles as best as you can, matching fonts / colors / layouts. They may also provide you with the html of a previous design that they want you to iterate from. Carry out any changes they request from you. In the wireframe, the previous design's html will appear as a white rectangle. Use creative license to make the application more fleshed out. Use JavaScript modules and unkpkg to import any necessary dependencies
... it's doing A LOT more than that. The technique you're referencing is very limited and rarely used for any practical purposes
Making forms UI is one of those.
The challenging part here is creating the design language or style guide) and I plementing the business logic once the form gets validated (which AI could generate code for, too).
An example I recently had was, I was handed a UI kit from a product team. Ok, fine. We only wanted to use about 10% of the kit - basic interface elements. OK.
It took me a long time massaging that into what I wanted, because it was a bit of a mess, honestly. And I'm still dealing with random issues that pop up in their CSS.
It takes me a few minutes to create a form: but if what I get back is some insanity that I can't read, and each time I get a new form it gives me different flavors of that, well, it's going to add up and be a huge pain to maintain.
This is still very early days and nobody thinks this is as good as it's going to get.
It's nuts how quickly something magic becomes mundane.
You can also master a trade and become a knowledge worker. Here in Denmark it's possible to mix pre-university/gymnasium (equivalent to year 10-12 in the US) with a trade. Combined it takes 4.5-5 years.
Knowing what Widget to build and where to place it > $Invaluable.
Also, you end up with an isolated code fragment that will look different the next time you generate it, so what's the point?
Spend half an hour making a simple demo.
Film it 100 times until you get a passable result.
Post on twitter "Oh WOW AI!?! GUYS AI!"
Pick up your VC check.
Instead of Coinbase P&L screenshots, it's short demos of what amounts to a TODO app.
```
Write a python iterator to generate all 5x5 grids of integers that obey the following criteria: 1. the grid contains only numbers 1-5 inclusive 2. each number is included at least once 3. Each number 1-5 forms a continuous connecting region within the grid where two cells are considered connected if they share an edge.
For example the following would be a valid grid subject to these rules: [[1,5,3,3,3], [1,5,3,3,3], [1,5,3,3,3], [1,5,3,3,4], [1,5,2,3,3]]
But the following would not be a valid grid because the `1` in the top right corner is not connected to the 1s along the left edge: [[1,5,3,3,1], [1,5,3,3,3], [1,5,3,3,3], [1,5,3,3,4], [1,5,2,3,3]]
```
[0] https://2023.galacticpuzzlehunt.com/game/ [1] https://www.puzzle-star-battle.com/
Did we get every spaceship control room wrong? Where the Star Trek bridge would simply morph into whatever gui objects were necessary? (I can’t imagine them going away entirely and EVERYONE talking to the ships computer as it would be audio chaos and annoying a/f so I guess we’ll always need a nice quiet user interface.)
These tools are definitely more "magical", but these are essentially an iteration of what we've already had.
Code generation from UML was all the rage for a while too, until it wasn't. People realized its limitations at some point. Sort of like ORMs - if you are not policing SQL generation like a hawk, you are going to end up with an awful non-performant system.
Ultimately it is a productivity and prototyping tool - it will not do the hardest parts and integrations for you, at least not in the way you may want exactly.
I feel like for that level of granularity, you'd spend more time figuring out how to style it than just writing it in code, since you'll need to start using descriptors on things, which is literally just coding again.
https://twitter.com/andreasklinger/status/172521353480679428...
> Disclaimer: This is a demo and is not intended for production use. It doesn't have any auth so you will go broke if you deploy it.
It takes seconds to pick a button and place it somewhere. Is it really so much better to let an AI guess that a green rectangle is supposed to be a button?
https://github.com/tldraw/draw-a-ui/blob/2ac633bbbd5fda39e59...
The point of this demo is to experiment with new ways of interacting with an LLM. I'm very tired of typing into text boxes, when a quick scribble, or "back-of-the-envelope" drawing would communicate my thoughts better.
It worked a lot better than I expected! If you give it a try, let me know how it goes for you! And please feel free to check out the source code: https://github.com/tldraw/draw-a-ui/
I do see the potential as a professional tool if it came in the form of a "fix up" button in a WYSIWYG editor. It would be great if you could haphazardly slap together a UI and have a button that unifies the margins and spacing style without taking too many liberties.
If AI advances to the point where large swathes of workers even amongst developers are put out of work, then worrying about your own job is a little beside the point. Will be a large and apparent social issue then. I am still skeptical this will happen but if you had asked me 3 years ago could AI do what it is capable of already by today I would have said with 100% certainty there is not chance so I'm holding back my opinion at this point.
However, as an answer to your question: If you're looking for a skill to learn once in a short time and apply that for a decade; then web front-end coding is among the worst options.
Perhaps I’m just being shortsighted here. I can sort of see how AI tech would evolve to achieve this. You would need an AI assistant able to persist the entire context of your application across months/years in a stable way to act as your ongoing “web developer“. Will that be feasible?
I've added a note next to the input with more info here, but basically: the vision API is so new that its immediately rate limited on any site like this, and because OpenAI doesn't have a way of authorizing a site to use their own API keys (they should!), this was the best we could do. We don't store the API key or send it to our own servers, it just goes to OpenAI via a fetch request.
Putting an API key into a random text input is obviously a bad idea and I hope this doesn't normalize that. However, you can read the source code (https://github.com/tldraw/draw-a-ui) and come to your own conclusions—or else just run it locally instead.
Every scribe had their own style and flourish. Every scribe was an artisan. Discerning patrons favored particular scribes for their uniqueness and quality.
Somehow, someway, the hivemind mostly settled on today's 'A'. Something good enough.
Moveable type replaced scribes.
And so it is with sliders and flexbox layouts.
„This works by just taking the current canvas SVG, converting it to a PNG, and sending that png to gpt-4-vision with instructions to return a single html file with tailwind.“
Dreamweaver's output was terrible. Figma's is decent but still requires a good deal of cleanup to fall in line with best practices.
Once it can do all our work we can just change over to star trek society.
You know ChatGPT produces a whole REST Api with authentication and db migrations backend in 5 seconds too right?
My experience was starkly less optimistic, and am curious if any one else has tried something similar.
-----
First off, I must state a deep respect to people who build + design websites, while dealing with Clients.
I had assumed that ChatGPT would be very useful in helping me pick up and build things. However, I had to jettison ChatGPT fairly soon. I just couldn't trust the output of the model. It would suggest things that wouldnt work, then link to sites that didnt exist.
I switched to teaching myself. I had to watch hours of videos, learn CSS, Astro, and several other things from scratch. Definitely not the LLM experience I was expecting.
Code from Figma was great - but if I wanted an actual responsive site, I had to write the CSS myself, because boilerplate CSS had all sorts of odds and ends.
Getting an image to come out as I liked from Midjourney was fun - but it was also a massive time sink.
I had hoped to be able to get complex tasks done entirely with assistance from the LLM. In the end it helped maybe 20-30%. Its greatest use was to clarify concepts instead of me having to wade through specification docs.
When I went back to the videos of people using chatgpt to build a website in under 30 minutes - its always someone who knows the domain extensively.
I did get a site up and running after ~1-2 weeks of work including the necessary ritual sacrifices.
edit: writing in a rush, grammar and text are messed up. edit: GPT 4, copilot and midjourney. AFAIK I had no half measures.
I haven't tried Cursor yet, I just get it to write or refactor functions bit by bit maybe that's better for monolithic tasks?
0) LLMs introduce the challenge of automated semantic verification.
1) LLM work should be broken up by usecase. These use cases lie on a semantic complexity continuum.
2) Tasks like classification are simple to verify (precision recall etc.). Tasks that require semantic complexity like summarizaiton are on the other end.
3) Anything on the high semantic complexity end of the scale needs expert human review.
4) Chained or complex calls greatly complicate verification
Which is why you are getting use out of it. There is a human (you) in the loop, and the calls are not complex.
As long as a human is reviewing the output of the LLM every time, its great. This is the vast majority of "generative" output.
Its when you have things like agents, or chained calls that things go awry. ITs why proof of concepts are easy, but production is hard.
For the record, many people have called this out, including people at Open AI, and AI ops was the largest sub group in YC's fall batch.
Using ChatGPT has been a hit or miss experience, helping me maybe 30% of the time as well. But when it did help, it helped me massively, especially for quickly setting up Wordpress PHP designs and accompanying CSS. I can honestly say I couldn't have done my web and blog redesign if it weren't for ChatGPT. Not because I wouldn't have been able to get the knowledge without it– more so because I wouldn't have had the patience to figure all of this out in my spare time.
Using ChatGPT has certainly been a more fun experience than browsing documentation, but I did have to do the latter about half the time anyway.
My experiments https://www.qualitycontainers.io/ https://github.com/msrobot0/llmlexperiments/
Ok but if you would do the same task again, how much would it help you?
> When I went back to the videos of people using chatgpt to build a website in under 30 minutes - its always someone who knows the domain extensively.
You are one step closer to become this person.
100%, since I would never do it again.
And yeah as you said with domain knowledge it works very well
There is a difference when an LLM is used in limited ways, by someone who knows enough to discard bad output.
I'd put it this way - ChatGPT will help you build a ship in the desert without hesitation.
I’m not logged in and the site loaded fine on mobile and then again on desktop. The video played immediately, I didn’t see any ads. Are you hoping to be able to comment without an account? That’s usually not how things work.
I’m guessing this is another case of Elon induced nerd grumpiness?
Malware websites are less awful than this.
Also, if I clicked into the tweet (xeet?) in the web view and hit “open in system browser”, I just got an X “something went wrong” page. Also if I opened the first video that failed to play, closed it, and clicked the second video, the first would attempt to load again instead until I reloaded the whole page and clicked the second…that still failed to play
Anything Elon is bad now though apparently. Seen quite a few comments hoping the Starship launch fails tomorrow, strange times we live in.
problem solved for good
I need it to load the content when I click, it's pretty simple.
The twitter comments.
Some damn sanity. Thank you.
Certainly the least scary horror show I’ve seen in a while.
Friendly fyi... the moderator allows Twitter links and previously explained the reasoning:
>We're not going to ban Twitter because, like it or not, it's the source of some of the most intellectually interesting material that gets posted here. -- from https://news.ycombinator.com/item?id=30430760
There's also a related moderator's post about allowing "paywall" articles : https://news.ycombinator.com/item?id=10178989
Solved!
It's almost as if lots of people still use Twitter / X to post content, yet a year later people still crying and moaning about it.
The hundreds of millions of users still posting their content on the platform don't care regardless.
https://addons.mozilla.org/en-US/firefox/addon/nitter-redire...
Eggs, the site formerly known as twitter. So instead of a tweet you "egg something".
I think it gives the site the dignity it deserves.
I wonder if people still on there realize that their posts are essentially not visible for unregistered users anymore without jumping though major hoops.
Interesting fact is that according to the statistics of DownDetector, Twitter is more stable now. It was down more often prior to the acquisition.
At least I won't have to relearn JS every 2 weeks.
We're not quite at the level (yet) of feeding a whole codebase to an LLM and making it add features or make changes while understanding the big picture of the problem being solved, being consistent with the design principles and coding style of the overall existing codebase. And I'm not even talking about creating complex UIs where performance matters
Another issue I've ran into a lot is staleness of the knowledge the LLM was trained on, a lot of libraries and frameworks get really frequent, quite often breaking changes, and LLMs have a cutoff date.
Try using ChatGPT for something like Godot's GDScript, it will always try to use old Godot v3 style scripting because that's what it's been taught, and the whole documentation for Godot v4 is not something small enough to just fit into context
Maybe this would be a better fit for some agent type workflow where it can decide what to lookup from the documentation and then retrieve it, but it also needs to know and decide what to look up and how. There is still a lot to figure out
We are one step away from that. All we need is a more advanced form of fine tuning.
Manipulate[
Graphics[{Rotate[Rectangle[{-size/2, -size/2}, {size/2, size/2}],
rotation, {0, 0}]}, PlotRange -> {{-1, 1}, {-1, 1}}], {size, 0.1,
2, 0.1}, {rotation, 0, 2 Pi, Pi/12}]