CreatorNil_phy_dreamer →A website case by @Nil_phy_dreamer made with Claude Code · Sonnet 4.6, including the public result, full prompt, and original source.
View original source ↗Prompt
I am building an animated loader and icon library as my second project. This weekend I tried building a landing page for this. But I made an experiment to build it completely with claude code : Sonnet 4.6 I am quite happy what it has built at the very first shot. Here is the exact prompt I have used > I want you to create a landing page for this library. 1. hero section 2. features with CTA buttons and any section if u think can be important take all the components for example Heading.tsx paragraph.tsx from components folders Use `max-w-5xl`, Colours : white and black based (use neutral, stone and white from tailwindcss I want to use specifi pattern to use in the landing page to make it a thoughtfl design inspired by tailwindplus homepage Here is the grid patter use it purposefully, with a good taste as a pro design engineer <div class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10"> <div class="col-start-3 row-start-3 flex max-w-lg flex-col bg-gray-100 p-2 dark:bg-white/10"> <div class="rounded-xl bg-white p-10 text-sm/7 text-gray-700 dark:bg-gray-950 dark:text-gray-300"> <img src="/img/logo.svg" class="mb-11.5 h-6 dark:hidden" alt="Tailwind Play" /> <img src="/img/logo-dark.svg" class="mb-11.5 h-6 not-dark:hidden" alt="Tailwind Play" /> <hr class="my-6 w-full border-(--pattern-fg)" /> <p class="mb-3">Want to dig deeper into Tailwind?</p> <p class="font-semibold"> <a href="" class="text-gray-950 underline decoration-sky-400 underline-offset-3 hover:decoration-2 dark:text-white">Read the docs →</a> </p> </div> </div> <div class="relative -right-px col-start-2 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div> <div class="relative -left-px col-start-4 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div> <div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--pattern-fg)"></div> <div class="relative -top-px col-span-full col-start-1 row-start-4 h-px bg-(--pattern-fg)"></div> </div> Here is the result @mannupaaji any advice how I can improve prompts? What's you would like to add on here to have a better output?
Reusable method
Key decisions
Check whether information hierarchy, module order, and CTA clarity all hold in the final result.
Adapt it to your subject
Extract “target result → the product name, audience, page modules, and primary button → constraints” as a reusable template for similar work.
Where it breaks
Run single-variable comparisons around module order, value proposition, and CTA placement. Record the model, cost, and failures; turn it into a Skill only after it repeats reliably.
Recommended models
Derived Skill
Skills are derived from repeated patterns in published cases. They are not a separate submission type.
Creator
Nil_phy_dreamer focuses on production-ready AI interfaces and is active on X. “Claude Code Animation Asset Library Landing Page” is the current representative case, built with Claude Code · Sonnet 4.6 with its stability retest open to votes.
Keep exploring
A webpage case by @Oluwaphilemon1 using Claude Fable 5 · Three.js · Blender · GSAP, including the public result, full prompt, and original source.
Prompt
Claude Fable 5 and GPT-5.6 are powerful🥵🥵🥵 Here Is How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render al
A webpage case by @uxsweta using AI UI Builder, including the public result, full prompt, and original source.
Prompt
Few people asked for the prompt, so here it is 👇 PS: Tweak it based on your use case. Create a modern, minimal 3D Invoice Generator Machine component with a premium SaaS-style aesthetic. Visual Design - Design a wid
A webpage case by @shushant_l using AI Website Builder, including the public result, full prompt, and original source.
Prompt
Here's how to create your website in minimalist design style with AI. Use this prompt: Design a modern minimalist portfolio website for a digital creator and AI consultant. Use a clean black, white, and neutral color pa
