I have to say, I am truly enjoying the power of Claude and Custom Components. I’ve started converting some of my HTML components over to actual custom components with inspector controls. I am no programmer, but evidently Claude is. I’ve converted my Read by Author, Copy Article and created a Read Time component (until Massimo gets back from vacation and I will revert back to his ReadTime). It was able to incorporate the Gradient background functionality of Tailwind 4 as well.
It said it was possible and told me how to add create a Dev Pack. So then my second prompt was:
Elements 3 now supports Tailwind 4. What I would like is a component that estimates Read time for the articles with a styleable button that uses svg icon that can be colored and the text of the button supplied by the user in a text box. It would need margin and padding controls.
From that point on it was a back and forth of adding things to the inspector until I had what I wanted.
Nice work! May I ask which Claude model you used? Sonnet, Opus, Fable? Effort level? Obviously the lessor the model the more efficient it is, that’s why I ask.
using the real mac software elements api and resources create a pdf viewer plugin component with the following screen breakpoints - i want field options for lazy loading on/off - alternate plain title screen with name field on/off - border colors choices - header color choices - included svg logo placement in upper left hand corner - print / download / email icons and buttons on the bottom and any other features we discussed in the past
AI is extremely sensitive to patterns. So when your pattern doesn’t match a specific pattern, that’s when you get a lot of thinking and often wind through detours.
So, in your prompt, first start with the context: “I am designing a Web site using Realmac Software Elements.”
Next make sure you match exactly what you need: “I need an installable custom Component that will display PDF files that is created using the DevPack. The PDF files will be in [/resources, /cms/pdf, URLx, or chosen directly]. The Component needs to be responsive to the Breakpoints in my Project.” When any of these things is a close match but not an exact match to naming Elements uses, you’ll start getting misunderstandings and conflations.
Finally, wrap up with your additions: “In the Inspector for the Component there needs to be an option for Lazy Loading.”
Now, as to the border, text, SVG options, I wouldn’t start with those. Get the PDF Component working first. Then ask Claude to add a header section for text header (with text entered in Inspector) and SVG (with SVG also entered in Inspector). But when you do this you’re opening up sizing complexities. My approach has been to just get a PDF Component, and then put the PDF Component in a Container that also contains a text header and image field and controls background/border/etc.
very cool - I like it a lot!!!
I like having all the options showing for editing in the inspector