OneDollarStock · Improve a generic AI-generated website layout
Does your AI website look bland? Choose a polished template and create a website you want to show your clients.
Identify the actual layout problem and request one specific repair. See when to keep your draft and when a prepared design gives you a more suitable starting composition.
Sample designs · replace the fictional content with your own.
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.
01 / Name the problem
What exactly is wrong with the draft?
Look for a problem you can point to: the main headline is smaller than a secondary heading, text is squeezed into a narrow column or sections feel crowded. The comparison below shows those kinds of issues. Tell your AI agent which visible problem to fix first.
Competing emphasis
Can the actual main heading and next action be distinguished from secondary elements?
Inconsistent rhythm
Does spacing help group related content, or make every section feel unrelated?
Content that does not fit
Check real long titles and phone widths for clipped or cramped text.
Observed issue
Affected source
Visible consequence
First repair / remaining
1. Competing heading emphasis
.hero h1:24px; h2:52px / mobile 46px
A section title is larger than the page headline at 1440px and 390px.
Only this hierarchy is repaired.
2. Disconnected section spacing
section padding:12px; .space padding-block:88px
The large gap separates adjacent ordinary explanations. The source difference is observable; whether it fits is a design judgement.
Preserved to keep this edit bounded.
3. Dense narrow description
.density p max-width:140px; font-size:14px
The unchanged paragraph wraps into many short lines inside a wider available page.
Still present after the headline edit.
Intentionally flawed fictional workshop
New authored teaching page, not typical AI output. Three source-located issues are listed below.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 / Prioritise the repair
Which issue deserves attention first?
Fix blocked reading and unusable controls before decoration. Review hierarchy, type, alignment, density, contrast and media relevance; a design preference is not a conversion or accessibility result.
Message and action hierarchy
Compare h1 with section headings and the available next action; the flawed specimen gives h2 more size than h1.
Type readability
Read the full supplied text at the actual viewport, without zooming a tiny preview to judge it.
Spacing and alignment
The specimen changes section padding from 12px to 88px; decide whether the gap serves the content.
Content density
The explanation stays in a 140px column. Count wrapping and ask whether that reading width suits the description.
Colour roles and contrast
Identify text, background and action roles. Measure relevant contrast separately; this visual rubric does not certify compliance.
Media relevance
The teaching page uses no media. If your draft has images, check permitted use, crop and relevance to the factual offer.
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.
03 / Ask for one change
What should you write instead of “make it look better”?
Name the element, explain the visible issue and say what should change. For example: make the hero headline more prominent than the secondary heading, keep the existing copy and links, and check the result at the same phone width. This gives the AI an edit you can actually judge.
01
Illustrative request
Reduce the secondary heading’s emphasis so the main action stays distinct. Keep the owner’s wording and links; compare the same phone width afterward.
Write one bounded repair request
Fill the fields, copy the request and compare the actual changed page. Nothing is sent to an AI tool.
04 / See an edit
Did the change happen—and what else changed?
The actual edit changes two heading rules and keeps content, links, colours and section spacing unchanged. Compare the two pages; the spacing and narrow-column issues are still visible.
See the source files and technical details
Actual changed rules
lp46-en-repair.diff
Other two issues remain unchanged, so this is not a finished redesign.
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.
06 / Repair or restart
Is one repair enough, or is the composition the problem?
If one headline or spacing rule is wrong, ask for that edit in the existing page. If the whole layout works against your content, start from a template whose structure fits your offer. You can then replace its sample content instead of trying to repair every section independently.
07 / Choose a design
If the structure needs changing, inspect a real starting design.
Choose against the content you have. These layouts are references to inspect, not a guarantee that replacing your draft produces a better commercial result.
Formwell
Creative studio work, services and process in an editorial layout.
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 →
