u/BuffaloConscious7919

This i'm genuinely proud to share. it's far from perfect but it's not overstimulating and i feel it's brought all my hobbies together. after reading and collating official Opus 5.5 prompting tips in another post i decided to get a bit creative and test a new style of video: slower, a different voice, the art style i love. The results i'm really happy with, here's the process:

1. Gather the information - this meant reading the article collating the points and structuring them (i wrote another post on this, links at the bottom)
2. Turning the key information into a speech for suno's new speech mode. I added the style of speaker and I tried it with bg music but it just pumped out some corporate bs
3. Use my video workflow but adapt it. the video was a bit generic on the first prompt (i'll share the first and second prompts below)...
4. Get creative - i decided to add specific direction with a few things i'd been learning from the prompt guide, as well as the things i didn't like in other videos: specifically removing things rather that using, then using some of the shades and colors i like
5. Add something unique - in this case it's a hobby i love, acylic pouring. imo added that special something that made this interesting

the tips (by Claude for Claude):

1. Set a ticking clock. Don't tell an agent to "hurry". Give it a hard time budget, like "you have five minutes". It will prioritize and pace itself.
2. Secure your prompts. Wrap any outside data in tags with random IDs, such as <data-7F3A9C>…</data-7F3A9C>. The model can then tell your instructions from the data, so hidden prompt injections inside the data don't get followed.
3. Ban specific styles. "Avoid generic looks" just produces new clichés. Name the exact aesthetics you don't want and ban those.
4. Use the effort dial. Medium effort on Opus 5.5 now matches Opus 5 on high. If the model overthinks, turn the effort down instead of writing long instructions.
5. Keep your playbook. Don't rewrite your Opus 5 prompts. They already run 30% faster and burn tokens out of the box.

related reddit post: https://www.reddit.com/r/ClaudeAI/comments/1ws08mu/claude_opus_55_official_prompting_guide/
official anthropic Opus 5.5 prompting: https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/prompting-claude-opus-5-5

often i'm testing different buttons and components for clients. this one was interesting to see the difference between the newest models

1. used a button from here ( any will work) -
2. create simple prompt - "make this components into a button that transforms into a cute puppy.remove the gradient . make the button AA accesible and this the primary colour #BD8F71. clean #333 bg [PASTE BUTTON CODE]"

the problem i was having was that output from claude was driving me crazy with extended use.
the solutions is simple: reduce the output in two ways

1. maybe you know ELI5 but adding succinct seems to reduce overly childish stories and keep it tight

>"ELI5 succinct"

2. Make an HTML summary (with a twist) - when i want a consolidation of complex work this is the winner:

>"Create a single page HTML summary of the [conversation | branch | work tree]. Make it visual and digestible without additional cognitive fatigue. Minimal text, clear flow of information. Opt for charts and diagrams over long explanations."

i threw a skill together here with more details which generates simple, accessible and artistic summaries

The process is 3 simple easy free steps:

1. Find a component you like

2. Describe the website you want to Claude...

3. Paste the component on the end

Yes it's that easy ;)

Yesterday, I released the project for 500+ components to make websites more creative. I have been working on for over two months, and I am absolutely buzzing!! I can see in the stats there's around fifty to a hundred people using it each day. And after the release yesterday, ten people signed up in the first day!!! To me, that is absolutely incredible, and you can say whatever you want about the site. But one thing's for sure. I use it, and other people are using it, and I absolutely love that.

I'm gonna keep going.

This is giving me huuuuuge motivation to do that and seeing seeing actual people using it and getting value from it and signing up means so so much to me, and I'm truly grateful. So thank you guys so much for signing up. And, also, even more incredible, thank you to the person that clicked the buy a coffee button and donated that way. Huge, huge thank you, and I'm gonna keep building.

I know there are a lot of weaker components on there from the testing days but I'm working on updating, removing and improving the overall quality of components. It's just me working on this but if you have any requests for components, if there are things you like or things you don't like, I'd love to hear...

Above all else, guys. Hope you enjoy it, and just don't get lost ;)

(Forevercomponents)

Components are fascinating. im pulling apart pre-built HTML components to see what non-coders need to know and 3 top ways to integrate them into websites and whatever you're building.

Tldr - pick one you like (and suits what you're building) and describe what you want in detail. Easy, right? Well not always. Here's a few tips + copy-paste prompts to get you started:

1. Only use self-contained components. One HTML file, no installs, no frameworks. save it, open in browser, it works. If instructions start with "npm install", find a different one. Prompt: "Is this component fully self-contained in one file with no external dependencies? If not, find or rewrite it so it is." Once you've found the one you like...

2. Pick the thing you like about it and focus your prompt on that - Prompt: "use the animation from this component with my brand to create the loading indicator"

3. If you like the whole component, change the data, nothing else - Components keep their content (labels, numbers, items etc.) in one small block. AI can swap it in seconds. the risk is it rewriting other things. Prompt: "replace the example data with my data: [your labels + numbers]. Add/remove stages as needed. Change nothing else keep all animation, accessibility and structure exactly as is."

Ukiyo-e bamboo. One html file. 241 lines. no dependencies, runs by double clicking it.

3 things if you want to use it:

1. Recolour it in one line - The stalks are three constants for depth, FAR, MID and NEAR. Swap those and the whole grove changes. Forest green is FAR="#1f5c2e", MID="#174a25", NEAR="#0f3519". Leaves are LEAF and LEAFD, the moon is MOON.
2. Don't put text over it - The sky is a gradient and the stalks move through it, so anything you overlay gets eaten. It's a background or a hero panel, not a canvas for copy.
3. The instructions ride inside the file - There's a json block near the top with what to change, what to leave alone and what it's bad at. Paste the whole file into Claude or any agent and it already knows, you don't have to explain anything.

the whole thing is three sine waves. Sway at 0.9, gust at 2.2, leaves flicker at 3.1. thatt's it.

ps. don't get lost ;)

today i tested whether working a interactive component made with Claude Design can act as a compact design brief for AI. Truthfully, it can and it can't

The task was deliberately vague: "make a landing page for mobile devices. white bg".

1. Generic prompt - "I gave the AI only the task. The result was fine, generic, maybe and ok base. But zero soul and zero style.

2. Generic prompt + component as context - same task, same prompt but i added a component reference from forever (just get lost here pls) with the Chromatic Aberration Pulse component as branding inspiration.

Was it perfect, no, it still needs some work and definately a better starting prompt and plan but it have something unique and a certain style that the generic UI lacked

I'm always testing and playing around so if there's something you'd like to see lmk

I was lost. Creatively. so I made a forever scrolling set of components to help make my websites unique.

Three simple steps:

1. find - roll around the canvas on components and find one you want. It's random or you can search and filter.
2. copy - screenshot, record or hand-off to your agent in one click.
3. create - paste into Claude Code, Claude Design or any agent with a one-line task description

Everyone is building now, the difference imo is whether it goes in the scrapyard of demo-ware or becomes something creative, unique and genuinely useful.

You know the look by now. Cream background, mono font, the same rounded buttons. It's not that the models are bad, they're just trained on the average, and the average is what we've seen before and what we've seen before doesn't feel interesting for long (we can blame social media for that). Anyway, enter Forever, 600+ weird and wonderful components, if you want it even weirder, try clicking the "art" button on. There's tons of good sites already, awwwards is known everywhere, 21st.dev and magicui are genuinely excellent and I use them regularly. But they're all organised, you go there knowing roughly what you want. When I want something new or creative or unique I open up Forever

It's a different experience, it feels exciting not knowing what I'm going to find. It's become a hobby to create these components (even if they're technically not web components) they're still fun to see and often gives me the burst of motivation when reserves are low.

The grid stays free, that's my promise. Every component load does cost me money though, so from the next release there'll be a limit of 3-5 a day. Right now it's all of them.

If you make something with one, post it below. Id love to see what comes out, especially the properly weird ones

ps. just remember not to get lost ;)

Today 4 models picked the same 3 components, so I built 9 versions of each in Claude Design. most were rough, but a few were decent starts.

Each model researched, I refined and then converged findings: >!1. Loading & skeleton 2. Progress and 3. Button / CTA!<

For each I wanted a grid of 9 variants - the point being 8 can be garbage if one is gold. Time for a a bit more research. Inspired by this post and using a real project I wanted the most useful variants for my core users - non-technical builders that want to build unique websites (I stuck to Claude for this).

Refinement - next I refined the prompt for this design system, which had been made previousuly with Claude design, exported and the zip dropped into Claude Code. There are different ways to do this e.g. /design-sync or only adding specific components, but this way is straight forward. Also asked for a prompt for each component cluster here so I can handoff to Claude Design for the next step...

Prototyping - usually I bang out one or two version with Haiku, yip you read that right, HAIKU! Why? Because it's fast, cheap and sanity checks the prompt and workflow so far. Then maybe one with Sonnet 5 low (often surprisingly decent results still), before using Fable on Max effort.

For each of the 9, I'd say there were at least one or two decent components and others that could be developed.

Models used: Claude Fable 5, Openai Sol, Gemini Pro and Perplexity (auto selected the model)

Opus 5 chat has gone down like a ton of brick, these simple instructs aim to eliminate a lot of verbose bs and also helping keep my mind and memory sharper.

The simplest notion: make Opus 5 (or any model's) output clear, concise and explain key terminology to me to help me learn.

This of course could be extended in many ways but i like it a lot more than the default output already!

Asked all 4 Claude models (Haiku, Sonnet, Opus and Fable) a single question: "What's the most powerful prompt for someone with no coding skills?" Inspired by this post I decided to see how models had advanced and which concepts they'd pick up on. Can you guess which is which?

Spolier Alert in generated synthesis (Claude wrote everything from here):

All 4 models, independently, landed on the same answer: the most powerful prompt for non-coders isn't a prompt about code at all — it's "ask me questions until you have what you need, then build it."

The power move is flipping the specification burden onto the model. Non-coders fail by trying to describe how (the part they're worst at) instead of what (the part only they know). Opus put it best: describe the outcome and constraints, never the steps.

Each model added one unique layer:

• >!Opus — the one-liner itself!<
• >!Fable — iteration beats the perfect opening prompt ("here's what I see" > "fix the code")!<
• >!Sonnet — demand "tell me exactly what to click," or you get correct code you can't run!<
• >!Haiku — never fake technical vocab; "simplest way to get X" beats naming a stack!<

Stitched together, the consensus prompt:

> "I want [outcome] for [audience]. No coding skills. Constraints: [time/tools]. Ask me questions one at a time until you have what you need, then build it as one file I can open in a browser. Explain choices in plain terms and tell me exactly what to click at each step."

Same conclusion, 4 different models, zero coordination. That's about as close to ground truth as prompting advice gets.

I’d been working on a client site for around three months when they asked for a simple coming-soon page.

It was out of scope, but instead of pushing back, I decided to make something more interesting.

A few nights earlier, I’d had one of those late creative zoooomies and started experimenting in Claude Design. I used the project’s brand, researched the local area, and asked Fable to create a grid of 20 branded 3d assets.

It produced a set of rotating 3D models tied to the location and the client’s identity.

So instead of giving them a basic coming-soon page, I used those assets.

The main site had been carefully designed and implemented over months. The coming-soon page took about ten minutes.

That was the part that surprised the room.

It was unexpected, slightly unusual, and immediately led to the client asking what else we could do with it.

I probably should have charged for it. I also think these unplanned creative extras are sometimes what make a project memorable.

Do you charge for every unexpected improvement, or occasionally use them to overdeliver?