Sample designs · replace the fictional content with your own.
01 / Choose a design
Which direction fits your message?
Forma Studio gives editorial projects room. Clearstead Workspace uses interface illustrations. Velora uses a dark developer-tool setting. Formwell is a lighter studio reference. Choose by content, not promised conversion.
Forma Studio
Editorial identity and digital-design portfolio with work and approach.
Dark surfaces, bright accent and product-story heading/media.
Presentation does not provide accounts or integrations.
Forma Studio
Original English editorial source. Source-inspected: paper/dark/brick palette; separate 1440px wrap and 896px project-column constraints.Open full preview ↗
Clearstead · 14-clearstead
Original product source. Source-inspected: --teal:#215e64 and product hero/media composition. Financial interface is illustrative.Open full preview ↗
Velora
Original developer-product marketing source. Source-inspected: dark #070d1b background and #75ebcf accent. No account/integration engine.Open full preview ↗
AI ChatWorkflow example
Adjust the page hierarchy
You
The main message is getting lost. Make the hero heading stronger than section labels, shorten the introduction to my supplied text and check mobile wrapping.
AI · example response
I will adjust heading sizes and the text column, preserving the supplied copy and links. Then I will compare the same page widths.
You
Show the before and after. Keep the change if the message is clearer on my phone.
Steps to take
Name the visible problem
Point to the heading, text column or spacing that needs attention.
Ask for a specific edit
State the intended hierarchy and the elements to preserve.
Compare the views
Review before and after at the same mobile and desktop sizes.
Result to aim for: your main message is easier to find and read.
Illustrative workflow. No live AI connection.
02 / Type and hierarchy
What should be large, and what can stay quiet?
Make the main message visibly more prominent than descriptions and labels. In Forma Studio, large headings introduce the page while smaller project labels identify the work. Ask AI to adapt that hierarchy to your actual text and check that long headlines fit on a phone.
Short original title
One actual title-only source edit; original layout and .word target retained. This is a content-length specimen, not a translated-fit or responsive guarantee.Open full preview ↗
Long German test title
One actual title-only source edit; original layout and .word target retained. This is a content-length specimen, not a translated-fit or responsive guarantee.Open full preview ↗
03 / See an edit
How does spacing change the reading flow?
The prepared Formwell example changes spacing and heading width. Compare wrapping and rhythm. Broad editorial space highlights fewer elements; denser interfaces group more related details.
›_ AI editing exampleFormwell
You
Add breathing room to Formwell’s sections and limit the opening heading width. Keep the wording and links.
AI · example response
This prepared layout example illustrates spacing changes. Compare the actual result at the viewports you will support.
Prepared conversation and project versions. No live AI connection.
AI ChatWorkflow example
Use your own brand assets
You
Replace the sample photos with my files in materials. Use my logo and the licensed fonts I supplied.
AI · example response
I will update the file references and image descriptions, then check the page on desktop and phone. Please identify the image for each project if filenames are unclear.
You
Use these three photos for the three portfolio cards and remove any unused sample client logos.
Steps to take
Supply permitted materials
Provide your own photos or assets licensed for your website.
Assign the images
Tell the agent which image goes with each section or project.
Check crops and loading
Review the actual images on mobile and desktop.
Result to aim for: the website uses your approved images and identity.
Illustrative workflow. No live AI connection.
04 / Colour and media
Which choices need permitted images or fonts?
Use your own images or materials whose licence permits publication on your website. A reference screenshot does not grant rights to its photos, logo or fonts. Tell the agent which supplied images to use and ask it to replace any sample asset you cannot use.
Checked locally on this device; nothing is submitted.
AI ChatWorkflow example
Change the design using plain language
You
Use my brand colours and logo. Make the main headline easier to read on mobile and use my project images. Keep the current sections and links.
AI · example response
I will update the styles and images in the existing HTML, then check headline wrapping and image crops at phone and desktop widths.
You
The logo feels too small. Make it larger without crowding the menu.
AI · example response
I will adjust its size and check navigation spacing again. The updated preview will show whether it matches your preference.
Steps to take
Name the change
Describe the colour, element, image or layout you want.
Give your assets
Supply your logo, colours and images; AI edits the template files.
Review the result
Check the actual page and ask for specific adjustments.
Result to aim for: a design adapted to your brand, without manually editing CSS.
Illustrative workflow. No live AI connection.
05 / Write the direction
How do you turn a preference into clear instructions?
Describe the change you want to see: a warmer palette, larger project images or less text in the introduction. Name the template and supply your content. For example: keep Formwell’s layout, use my portfolio images and shorten the service descriptions to the copy below.
01
Illustrative brief
Keep Formwell’s quiet opening and project emphasis. Use my approved work, a warm palette and shorter service text. Remove fictional clients.
My source-backed visual direction
Prepared original worksheet with a fictional teaching example. Replace it with your approved inputs; copy/download is local and does not grant rights, approval or a working service.
AI ChatWorkflow example
Website project folder
You
Read index.html, RECREATE.md and the assets in this folder. Tell me where the headline, images and contact links are before editing.
AI · example response
I will inspect the files and list the sections, image paths and links. I will also identify any form that only demonstrates an action.
You
Use the existing HTML. My business copy and images are in the materials folder.
AI · example response
I will match those materials to the existing sections and ask about missing content rather than invent it.
Steps to take
Open the folder
Unzip the project and give the agent access to it.
Inspect the page
Read the HTML and instructions before replacing content.
Add your materials
Supply your copy, images and actual contact destination.
Result to aim for: the agent works on your actual website files.
Illustrative workflow. No live AI connection.
06 / Files and scope
Can you inspect more than the screenshot?
Yes. A template gives you editable HTML and instructions, so you can open the page, click its controls and ask AI to change it. A screenshot alone cannot show those behaviours or provide the files you need for editing. Connected online services still need separate configuration.
Website files + design instructions
Existing source and guide
The inspected examples include index.html and RECREATE.md. Companion files vary by product; some images or fonts remain remote.
Your separate setup
Use your own file-capable editing tool. AI access, domain, hosting and operational services are separate.
07 / Choose the next step
Inspect a project or choose another input?
Choose a page whose structure fits. For style-only work, compare input roles. If frequent CMS editing is central, settle that system before buying presentation files.
OneDollarStock is implementing a project to prepare the platform for entry into the German market under the “Go Global” acceleration track of the “Unicorn Hub Startup Booster” programme, project no. FENG.02.28-IP.02-0013/23. The project is co-financed by the European Funds for Smart Economy 2021–2027 under the priority “Innovation-friendly environment”, Measure FENG.2.28 Startup Booster Poland.
Learn more about the project →
