Contenu du pack

Un fichier SKILL.md (le guide pratique) + un modèle de départ. Aperçu :

Skyline Hero

When to use

• A homepage needs a hero that says "city", "urban", "local", or "built here" without a word of explanation
• A real-estate, travel, local-services, or civic site wants a hero rooted in its place
• A product page needs a hero with depth and character that still loads fast and reads instantly
• A startup's homepage hero is a generic gradient and needs a scene with identity
• A landing page needs a hero that works as well on a phone as on a desktop without a second design

Workflow

1. Pick the message (input: page goal → output: headline + subhead + call to action)
   Write the words before drawing the skyline: one headline (the page's promise, under ten words), one subhead (one sentence of support or proof), and one call to action (the button text and where it goes). If the skyline is beautiful but the headline is vague, the hero fails; the scene serves the message, never the other way around.
2. Compose the skyline (input: message → output: skyline composition)
   Sketch the skyline as a silhouette: a row of buildings in two or three widths and heights, with a few distinctive shapes (a tower, a dome, a crane, a bridge) so it reads as a place rather than a barcode. Keep the skyline to the lower third or lower half of the hero, and leave the sky above it open — that open sky is where the headline lives. If the skyline is meant to be a real city, match its recognizable landmarks; if it is generic, keep it clearly illustrative so nobody mistakes it for a real place.
3. Layer depth (input: composition → output: layered scene)
   Build depth with three layers: a far layer of pale, low-contrast buildings; a mid layer of medium buildings; and a near layer of dark silhouettes with a few lit windows. The far layer should nearly melt into the sky, the near layer should anchor the bottom edge. Keep the window lights sparse and warm — a handful of lit windows suggests a living city; a hundred looks like static. Depth comes from contrast between layers, not from detail inside them.
4. Place copy over the scene (input: scene + copy → output: hero)
   Put the headline in the open sky, the subhead beneath it, and the call-to-action button below that — all in the calmest part of the scene, never crossing a busy building edge or a bright window. Check contrast: dark text on a light sky, or light text on a deliberately darkened sky band — and if the skyline's sky is photographic or gradient, place a soft, even scrim behind the text rather than letting letters sit half on cloud, half on blue. The button must be the highest-contrast element in the hero.
5. Test responsive and motion (input: hero → output: shipped hero)
   Test at phone width first: the skyline should compress or simplify (fewer buildings, wider spacing) rather than shrink into a thin strip, and the headline must stay readable without the skyline crowding it. If the skyline moves (a slow drift, twinkling windows, a passing cloud), keep it subtle, slow, and pausable — motion that draws the eye away from the button is a bug. Finally, check load: a vector silhouette or a single optimized image beats a heavy photo with a skyline baked in.

Aperçu du modèle

Skyline Hero — Template

The skyline sets the scene; the headline does the selling. Words first, scene second.

Message (write this before drawing anything)

Headline (≤10 words): {the page's promise} Subhead (one sentence): {support or proof} Call to action: {button text} → {destination} Page goal: {what the visitor should do}

Skyline composition

• Place: {real city — match its recognizable landmarks / generic illustrative skyline}
• Building mix: {2–3 widths and heights; distinctive shapes: tower / dome / crane / bridge}
• Position: {lower third / lower half of the hero}
• Open sky above: {the headline's home — keep it clear}

Le pack de compétence lui-même (SKILL.md + modèle) est rédigé en anglais.

Acheter le pack complet — $4.99 Pro — les 511 compétences