Hacker News Reader

Comment by kadhirvelm | Hacker News Reader

What are people doing with prototypes afterward? Do you end up shipping it as is to production? What about at work? Are the prototypes useful in that context?

View on HN

I've started making most of my prototypes single HTML documents with inline CSS and JavaScript, because a single file is a lot easier to store somewhere and share and will probably keep on working forever (browsers are really good at backwards compatibility).

I chuck some of them on my public tools.simonwillison.net collection, others in their own GitHub repos with GitHub Pages enabled, and some I just share in a Gist (served via gisthost.github.io) or stick in a public S3 bucket so I have a URL for them.

If a prototype is against an existing project sometimes I'll leave it to silently rot in a branch on GitHub.

The single file is interesting, we’ve been observing something similar too. Do you have a specific prompt that you load in by default to make this work? Are these react files, or just pure HTML/JS/CSS? Aka do you compile it via Esbuild or webpack or something, or are you asking the model to generate something that works out of the box?

We’ve been seeing Claude artifacts sometimes come out as JSX or TSX

Personally I just ask the AI to put everything into index.html.

Here are the custom instructions I mostly use:

  Never use React in artifacts - always
  plain HTML and vanilla JavaScript and CSS
  with minimal dependencies.

  CSS should be indented with two spaces
  and should start like this:

  ```
  <style>
  * {
    box-sizing: border-box;
  }
  ```
  Inputs and textareas should be font size
  16px. Font should always prefer
  Helvetica.

  JavaScript should be two space indents
  and start like this:
  ```
  <script type="module">
  // code in here should not be indented at
  the first level
  ```
  Prefer Sentence case for headings.

I've been using those for a couple of years, there's a good chance they're not necessary against more recent models. I've found that just saying "use Vanilla JavaScript" is enough to skip React / other build steps.

I avoid any build steps because those make it harder to copy and paste code in and out of LLMs.

I have been doing the same thing, creating small one file "apps". The problem that I have currently is that I often want my Agent to be able to present me with something like a report on a code change, have me mark it up (comments, choices), and then present those interactions back to the model.

I'm experimenting with different ways to standardize some aspect of this process in a lightweight way so an Agent and I can "communicate with each other over rendered html".

A simple script or cli the agent can run to to serve an html app, act as a sink for interactions (can just submit a button+form to the runner port), and then close the page when done can work.

A little farther out in this direction would be something like a persistent client+server via web or electron. It's always on and you iterate in a loop, streaming diffs/file edits back and forth to each other.

A little farther out and you can load extensions that contain templates to generate the html, custom server code to serve htmx interactivity, and agent functionality.

Just two days ago I started on this idea https://github.com/hank-bond/uix

I was working on two ideas

1. "highlight a web page a-la obsidian web clipper and then intake that information into a personal wiki of concepts" (my third prototype in a row of this concept)

2. "visualize the code review process and organize discussion in a non-linear branching conversation"

And I realized both of them are basically chat pane on the left, agent with custom tools, and html "app" pane on the right to support interactivity.

The project as of this comment doesn't have any functionality yet its basically just the panes and a simple agent messaging channel, but if you (or anyone) are interested in the idea comment here and I will reach out when its a bit farther along and actually useful for building things.

Likewise please share your experiences with this concept, I would love to learn what others are doing with this type of workflow!

You know how when you finish prompting some code generator to build something, and you look over what it has built and feel a sense of emptiness even if it does what you want? I think about what I wish the prototype looked like, and basically start describing details that I expect to exist (think longer versions of e.g. “this should be using our internal graph library, and I figure we can model this task as a traversal, how far have you strayed from this and why?”) and let the agent analyze what it built against my expectations. I’ve spent hours in conversation just “refining the context” this way, and then I channel that into an update process. I figure the prototype is just about proving out behavior, and this next phase is about refining it into the pieces I’ll use elsewhere. It’s kinda fun, I’d absolutely burn out a coworker if I grilled their PRs the way I roast AI contributions :P

I use AI mostly to prototype features in my existing projects. If I have an idea, I use the AI to implement it and try out different ways in which it could be implemented. Then I throw away the code and mostly write the code manually, with AI used primarily for review or docs.

I used Claude extensively during an internal hackweek at my company to prototype a new data analysis application. Probably would have never attempted the project without AI. Now it’s in production with more than 20k weekly users. Almost never use Claude to dev on it now, but it definitely helped me get off the ground.

In my day job, we commonly create prototypes to sell the idea/concept to the higher ups, then if we get the green light, we throw the prototype in the bin and start from scratch to build it out properly.

I find this is where AI is genuinely useful, it lets us prototype an idea a lot faster, make no bones about the fact that it is a buggy proof of concept but lets people see the potential and get an idea for what the final product might look like.

They chuck it over to the SRE or equivalent team and job done on to the next service/product/feature

> What are people doing with prototypes afterward?

I think what people ARENT doing is interesting.

Usability isn't even in your list, it is not something most people even think of.

The best thing you can do with a prototype is give it to (potential) users and observe what they do with it. Just because you think that you're clearly communicating the intent of your system does not mean you are.

Reply on news.ycombinator.com