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:

<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.