The feature section is where landing pages go to be boring. Every model defaults to the same three-up card grid with a generic icon, a two-word heading, and a sentence of filler. It's instantly forgettable.
What helped was banning the card-grid outright and giving the model a small menu of alternative feature-presentation patterns, each tied to a reason to use it. Forcing it to match pattern to the shape of the content (sequential vs comparative vs one hero feature) produced layouts that actually communicate.
Sharing the prompt. What other feature-layout archetypes belong on this menu?
Design the primary feature section of a landing page as a single HTML file with inline CSS, no framework. Features: {FEATURE_LIST with importance ranking}.
BANNED: the default 3-column grid of (icon + short heading + one line). Do not produce it.
CHOOSE a pattern based on the content's shape and NAME your choice + reason:
- 'zig-zag': alternating text/visual rows - use when each feature benefits from its own explanation and space.
- 'lead feature + supporting': one feature gets a large treatment, the rest are a compact list - use when one feature is clearly the headline.
- 'sequential/steps': numbered flow - use when features describe a process or order.
- 'comparison/before-after': use when the value is a transformation.
RULES: give the #1-ranked feature the most visual weight (size, position, or motion) - features are not equal. Real copy, benefit-led headings (outcome verbs), no icon unless it genuinely aids scanning. Consistent spacing via a token scale. Semantic headings in order (one h2 for the section, h3 per feature).
Output: (1) named pattern + why it fits this content, (2) the code.