Prompts 手順
How this page was made, prompt by prompt
Every instruction behind the Sunset landing page, in order: from a Mobbin search to a fully 3-D, published site. Short follow-ups like “continue” are left out; each card notes what the prompt led to.
-
Give me the top five websites from Mobbin for a solar panel website.
Mobbin search: Daylight, T1 Energy, MOUTHWASH Studio’s T1 case study, Samara and Rivian. Daylight was the only real match for home solar. -
Can you give me screenshots of those?
Thirteen full-resolution section screenshots, downloaded from Mobbin and grouped by site. -
Use the inspiration from Daylight and create the landing page, and then mix between sections. For example, I want testimonials from other websites. I want the map from Daylight. I also want the charts from Origin. Let’s bring it all together and give me 5-10 sections for the landing page, and let’s plan that first. Give me the screenshots.
A nine-section plan: Daylight’s hero, steps, hardware and map; Origin’s chart; Klarna’s plan cards; Coda and Cake testimonials; a Farm Minerals FAQ; a Maze footer. One reference screenshot per section. -
All right, let’s brainstorm this.
The first thing that I want is this hero section. I don’t want the giant text, but we do want a floating menu at the top. We want the lines and the grids to express the solar panels, and we want the whole home and the background to be in 3D. We’re going to do this in Three.js, and for the chart as well.
The second section: we’re going to have the charts in 3D. I want everything to be Japanese style, and the brand is going to be Sunset. Everything has to come together. It needs to be clean but 3D and really powerful.
Try to recreate all the scenes in 3D, especially the houses, the phones, and the solar panels. All the sections need to be together, but inspired by those sections that we have here. We want to be consistent with that grid theme, that Japanese theme, that sort of sakura and trees, sakura falling, the light god rays, and the colors around sunset. Obviously, we want that sort of beige light background and transitioning into some alternative sections, which are maybe more dark with a dark background.
The brand became Sunset, set in Japan. Every section got its own three.js scene on one shared canvas, and the page grid became the solar array’s cell lines. -
Self-verify until it’s perfect.
A verification loop: headless retina captures of every scene, then strict AI art judges each round, with their notes sent back to the scene builders. -
Now, I want you to ensure that all the 3D scenes are not going to get into the human characters, mostly buildings, phones, landscapes, and backgrounds. That’s going to be done in 3D.
For some of the images, if we see real people, then we’re going to use the Aura MCP to generate images or Higgsfield to generate the images. A lot of those images and logos will be done using transparent PNGs as layers, especially for ornaments, Japanese style, for example. We’re going to have a lot of ornaments that maybe look like a stamp or branch layers that are kind of in front, so we’re going to have some of those ornaments to express the concept of the website.
Lastly, for the icons, I don’t want you to draw them from scratch. I want you to use Iconify Solar Duo Tone.
Aura testimonial portraits, sakura branches keyed to transparent layers, a photographic blossom atlas for the 3-D trees, the 陽 hanko, and 50 Iconify Solar Duotone icons. -
Now, for all the 3D scenes, I want you to have amazing textures and high-resolution 3D. The wood has to look amazing like wood. It has to be for a retina display. It has to have beautiful lighting like in a AAA game. It has to have god rays from the background. Get it to a score of at least 8 out of 10 so that it’s the most amazing experience.
Scanned CC0 wood and a real sunset HDRI from Poly Haven, an HDR post chain with god rays and bloom, retina rendering, and round after round of judging. The final whole-page score was 7.3 on desktop and 6.9 on mobile. The map on its own reached about 8. -
In a new thread, can you explore the logo for this? One logo would be in SVG, and another logo would be using Transform PNGs. We’re going to generate using Higgsfield, and we will find the best ones. You can also use Mobbin for inspirations. It’s for the brand Sunset.
Ten SVG directions and six Higgsfield emblems keyed to transparent PNG, for about $0.53. The recommended pick is Dusk cell: a sun cut by a solar-cell grid, setting on the wordmark’s baseline. See the brand guide. -
Publish to sunset-tutorial.mengto.here.now, as public.
Staged the page and the assets it uses, checked it with a clean console, and published it to here.now with a public link. -
For Savings, change to Prompts and include a timeline of all the prompts I used for this conversation, except the “continue”, so only the important ones.
For How it works, change to Brand and include sunset-brand.html.
For Hardware, change to Ads and include sunset-ads.html.