One sentence changes the whole page
“Small ideas. Thoughtful design.” looks quite good as a headline. But what does this studio actually do? Enter “Illustrations for books and small brands” in the preview. We know more immediately, although the layout has not changed. Now add your own name and see whether the template fits your content.
For this exercise, we prepared the fictional Forma Studio, offering visual identity, illustration and websites. Its page fits in one HTML file. Three controls change the name, headline and accent color. Download our example or use the prompt below to build a similar page with AI.
First, a file you can open
One page in one file makes a convenient start: save it and view it immediately in a browser. Paste the instruction below into a coding model. If you receive only code, move it into a text editor and save it as index.html using UTF-8. Check the extension: index.html.txt still opens as text.
Before creating your own version, prepare the name, services and copy. We did not invent clients, awards or contact details for our sample company. When you enter an address or add a form, also decide where a click should lead. The model needs that information just as much as visual direction.
What belongs in a field stays text
It is worth getting the sentences right before shrinking the font or moving elements around. If “Illustrations for books and small brands” covers your offer, there is no need to squeeze the entire service list into the headline. Visitors need to understand what they can ask you to do.
When checking the demo, we entered HTML tags in the name. They remained ordinary text. Repeat with <b>My studio</b>: the brackets should remain visible and the words should not become bold. We used textContent, a property that inserts the field’s contents as text. Its documentation is linked below.
Now try a long headline and a small screen
Narrow the window to 320 px or open the file on a phone. Enter a longer name and headline. The page may grow taller, but text should not disappear or push the layout sideways. Then Tab through the fields. Visible focus should show where you are.
Check the system or browser’s dark theme too. Our example adapts its background and text through prefers-color-scheme, which lets a page read that preference. Your chosen accent stays; we use it mainly in the illustration. If you put that color on small text, check readability separately. A large area of color that looks good may be difficult to read as lettering.
How to save your changes
“Download HTML” gives you the original template with controls. Current preview edits are not included. To keep them, open the downloaded file in an editor and change name, headline and accent in the defaults object at the end of the script. Update the initial text in the HTML too, so your content appears without JavaScript. Save under a new name and reopen it.
Once the content and appearance are ready, ask the model to remove the controls and leave only the page. Add real contact details, click them and check that they lead to the right place. You now have a local project. Publishing it on the internet is a separate next step.
Sources and further reading
The sources behind this article. Instructions and example scenarios are suggestions from our editorial team.
- MDN: textContent and how it differs from innerHTML (opens in a new tab)developer.mozilla.org
- MDN: the color input (opens in a new tab)developer.mozilla.org
- MDN: prefers-color-scheme (opens in a new tab)developer.mozilla.org