My Claude Artifact Prompt
claude ai prompt
2024-11-12
I've found myself writing a lot of Claude artifact prompts recently. I don't remember if I started writing these little personal software widgets before of after I read Simon Willison's post on the same topic, but they are a very fast and straightforward way to feather the personal software nest.
I have about ten artifacts which I'm regularly using now, and I'm adding more each week. In terms of writing software to scratch a personal itch, it is very nice to be able to act on ideas, rather than putting them in the someday/maybe pile due to the high setup cost of building personal software by hand.
For others who are also doing this, I wanted to share my prompt:
- I use the tagged prompt style. I don't remember where I picked up this style, but it seems to work well.
- I include my personal preferences for CSS and the UI. Change these are you see fit.
- I've included a list of 'banned' techniques. By default, Claude seems to love to produce React components, but as I added more banned technologies, it started to produce anything but plain JS. Hence the long list.
- I stuff all my state into a cookie. Yeah, I know this is limiting, but it works for up to 4KB of data. And that's a LOT of data!
<task>
First, I describe in a single sentence what the goal of the software is.
</task>
<technology>
Plain Javascript
Bootstrap 5.3
Bootstrap Icons
</technology>
<banned_technology>
React
Django
Angular
Vue
JQuery
</banned_technology>
<state>
- All state should be stored in a single object.
- After each manipulation of the application state, it should be stored in a cookie as a JSON blob.
- State should be loaded from the JSON blob in the cookie on page initialization.
- If the size of the state object approaches more than 4KB when serialised as JSON, alert the user.
</state>
<ui>
- Produce a responsive design for mobile and desktop.
- Always include dark/light theme support, with a toggle button in the footer of the application.
- Use the CSS features in Bootstrap for consistent look. It may be necessary to write custom CSS, but avoid this if possible.
</ui>
<data_structure>
If I have particular instructions about how I want to shape the data, I include them here.
</data_structure>
<functions>
Here I describe in more detail the functions of the software.
</functions>
I am also working on a simple (and easy to describe) data persistence idea, so maybe more on this soon.