如何讓 AI 網站看起來像由人設計
How to Make an AI Website Feel Like Someone Designed It
文章提出審查 AI 製作網站的方法,主張從訪客任務出發,追蹤每項選擇如何改變畫面及後續結果。四個虛構商業網站的例子涵蓋傢俱規格、植物篩選、維修及散步備註流程,並建議用相同內容比較不同設計方向。作者指出,這些案例沒有建立質素評分或速度提升;檢查亦未涵蓋客戶偏好研究、實體手機可用性測試或已確立的輔助科技可用性。
A bicycle cog mechanism worked and still had to go. Fixing its controls hadn't given a visitor any useful reason to operate it.
That was one of the more useful design decisions in a set of four AI-built fictional business websites. The furniture site's controls survived: changing a desk's width and finish changes its drawing and specification. The nursery's plant choices survived because they change what someone can inspect.
When reviewing an AI-built site, ask the agent to explain that relationship. What is the visitor choosing, what changes on screen, and what can they do with the result? Those questions give you more precise feedback than another request to make the page look better.
You can open all four working examples while reading. They are fictional businesses with local notes and lists. None of the flows sends a message, books an appointment or places an order.
Follow the control into the result
Commonset's furniture demo gives the width and finish controls something visible to affect. The furniture itself changes, alongside the specification. Keep the drawing and controls together and the visitor can inspect the choice they are making.
Commonset keeps the desk drawing, dimensions, finish and specification together. The controls change the drawing as well as the selected specification.
The same question applies to less conspicuous controls. In Morrowfield's nursery catalogue, growing conditions and mature size help narrow the plant selection. Quantities then belong in the garden or trade list. The useful interaction continues beyond the first change on screen.
Morrowfield's catalogue filters at a 390-pixel browser width. Inspect the working controls as well as the opening screen; this is a browser view, not a physical-phone usability test.
Follow a selection through that whole journey when reviewing the build. Change it, inspect the next screen, return and edit it. Does the site retain what you selected and any text you entered? Can you read and use the controls at a narrow width?
The two service sites offer other versions of that inspection. In Second Spoke, read the repair scope and price, then prepare a repair note. In Moss & Mile, choose a walk, then review, edit and keep the walk note. Those local outcomes give the onward journey a purpose without pretending a booking happened.
A revision request can name the broken relationship and protect the parts you want to keep. This is an edited example, derived from the constraints used in the studies, rather than an exact tested prompt:
Preserve the chosen visual direction. Carry the selected service into the note, keep the visitor's entered text when they return to edit it, and make the service details help them compare their options. Review the complete flow at desktop and phone widths.
That is a more inspectable request than asking for extra interactivity. The bicycle cog had no equivalent job. The review called for removing it even after its controls had been corrected. Motion can still contribute to atmosphere and hierarchy without needing its own separate control.
Compare directions on the awkward content
An opening screenshot tells you little about the catalogue, service details or next action. Ask to see how a direction handles those parts before choosing it.
Moss & Mile pairs woodland dog photography with green and burgundy type and a looping lead shape. Its subject supplies material for the composition.
Moss & Mile combines outdoor photography, green and burgundy type, and a looping lead shape. Judge how the material and layout work together.
Second Spoke takes a different route with a drawn bicycle and bold lettering. Its repair information and note flow need to carry that direction too.
Second Spoke uses a bicycle illustration and bold lettering. Its repair details and note flow carry the same direction beyond this opening.
To make that comparison useful, keep the business content consistent across the alternatives. Otherwise a stronger offer or shorter page can distract from what the design is doing. Here is another edited example, not the historical wording that produced these screenshots:
Show two or three distinct directions using the same business content. Include the opening, a detailed service or product section, and the next action at desktop and phone widths. Explain how the imagery, type, composition and interaction fit the subject. Make the alternatives differ beyond their palettes.
You then have ordinary content to judge alongside the most flattering screen. Look at whether each section answers a different visitor question and whether the chosen identity continues through it.
There are recurring habits to watch in these examples: Moss & Mile and Morrowfield both use warm backgrounds, large serif type and photography. If the next business calls for a different character, challenge those choices while the directions are still being compared.
Check the assignment before polishing it
The earlier Causeway attempt became a carefully built folding landscape. The coordinating agent had turned a business-site brief into a digital exhibition. Passing technical checks could only confirm properties of the thing it had built; more polish would have continued the wrong assignment.
Give the agent the offer, visitor and next decision before asking it to choose effects. A nursery visitor narrowing plants by growing conditions has a different information problem from someone checking a bicycle repair's scope and price. Supplied facts and assets belong in that brief, along with a request to identify missing information before inventing claims.
During browser review, check keyboard access, visible focus, overflow, reduced-motion treatment and missing-media behaviour as well as the design. Automated checks help establish particular properties. They leave the visitor's task and the design judgement for you to inspect.
These four fictional briefs support reusing a process of setting the purpose, comparing directions, selecting and revising. They do not establish a quality score, a speed gain or reliable results without human direction. The checks were digital, with no customer-preference study, physical-phone usability result or established assistive-technology usability. Real clients also bring fixed identities, content and integrations that these studies could avoid.
For the next review, take one choice all the way to its outcome. That gives the agent a concrete relationship to fix, preserve or remove.
Want to talk about something I’ve written or built? Get in touch.
This article was adapted with AI assistance from an original article on billiem.uk. The original article was reviewed before publication.
來源:DEV Community · dev.to



