claude design

Usually, one is blessed with backend skill at the detriment of frontend skills or vice versa. I have been blessed with neither, so I use AI as a clutch. While opus and gpt are both excelled in writing my 170k rust code CRUD TODO app, only opus truly "gets" the design I am aiming for. I really like Claude Design as a product and I feel I personally learned quite a bit about what makes a good and ugly app. Though I sometimes wonder. We can see slop code. Can educated UX folks see slop design?

In this page I want to share all the claude design mockups I got and whether they made it into the system or not. So

I used to have a notion of AI block, which is a Block with AI conversation you can scroll through. The content was stored in metadata you could read, and it had special styling. However, I kept not liking it. in blog/lifelab/ai]] I thought I solved it because I did not want a support agent on the bottom right column. Instead, I wanted to see if it makes sense to have every turn of the agent be conditioned on the messages before, and every response should be another block. This is still undetermined but I thought if we had a tree structure, we could traverse up to the first top level header to build the context needed.

I asked claude to help me quickly write metadata to my notes. This is similar to markdown frontmatter you In lifelab, metadata is a key property, because I use it to log and track things over time. There are different mechanisms how to add them and I poorly implemented all of them, so this was a unification attempt. Note claude keeps suggesting inferring the schema and "automagical" moments but I am fairly against, because it limits the capability to Claudes vision instead of being truly malleable.

I didn't like the original right click menu and I wanted to lean into the emacs minibuffer for contextual menu, but I think it did not work. Claude did not step in and tell me the idea is stupid.s

I fought the tree based structure of org a lot, because I hate tree traversal. It does not scale across all a lifetime of notes unless you do some unclean indexing, so I prefer to have flat blocks in a database. That being said, I already contantly do subheaders and I prefer lite-nesting. I talked to claude about whether I can have some minor nesting without making Lifelab a tree based note taking system. It kinda worked!

I had a fairly long chat with about fonts and styling and I did hit a tension where I want to have a terminal, but also a website. The font picker did not help.

Transclusion is a feature from tiddlywiki I cherish. You can summon other notes in your current note for nested editing. You could see both the current note and the other note to get more context without having to open it in a new tab. Obsidian has this for markdown where you can open another file but I wanted something more dynamic. I want to open all blocks

Lenses are my favorite AI hallucinated feature in Lifelab. Since tagged blocks automatically appear on the page, I struggled with having too many blocks of different types on a given page. I used to have a tag bubble you could click to filter them, but it was ugly. I thought... why not have users write it into a field? If I want all tasks in my page, I could write {TODO}. If I wanted to filter by tag, I could write {:food:} to exclude others. I worked hard (== I spent a lot of claude tokens discussing) on a syntax where I could express a lot of configurations of a page. We can also express different views of blocks. The default one is called a river, which stacks all blocks vertically.

Just by typing "grid" into the lens, it configures the blocks on a drag-and-droppable 2D grid. If I type paper, I get two column typeset format. Using lenses is my default way to control everything. Claude design can even give you a demo you can play with!

As final note, since lens acts as a natural filter and group-by, it can also aggregate for actually computing values using your notes

I played with a swift ui based app but struggled differentiating it with the tauri app

I played with various ways to style the notes. I started with plaintext based views but I kept getting pulled into glass like view given my employment.