Akke Knitwear

Six prompts, in build order. Each one describes the visual language, not the original site.

• Main build prompt+−

  Copy

  Use the following dimensions and timings as reconstruction targets inferred from the reference, not exact measurements of the original implementation. Build an original fashion-commerce homepage whose signature is the alternation of full-bleed outdoor knitwear campaigns, gigantic ultra-condensed labels, and quiet sage-green catalogue fields. At the 1920×968 reference composition, begin with a roughly 100vh hero photograph: a model in a textured knit is framed from torso upward against dark rust-coloured rock. Make the image cover the stage at approximately 1.98:1, preserving a deliberately editorial crop rather than trying to show the full body. Overlay a very small all-caps navigation bar about 24–40px from the top and 50px from both sides. Use your own simple starburst-like symbol plus wordmark, collection links, account/cart labels and language selector. Add tiny shipping or service text close to the upper edge, but use original wording.
  
  Place an original two- or three-word campaign heading at visual centre in white ultra-condensed uppercase display lettering, approximately 100–145px high at desktop, with very tight line height around 0.82–0.95. It should overlap the model and be the dominant graphic element. Use a condensed display face resembling Humane Grotesque; set all interface and metadata in Inter or a neutral sans serif. Place sparse left/right carousel arrows near the horizontal middle, and a small white pagination dot toward the right. Keep controls light, plain and functional.
  
  After the hero, transition into a muted sage page ground (#9aa499). Create an approximately 100vh editorial collection module with two portrait-to-landscape photographic tiles, around 340–450px wide each, positioned high and widely apart: one near the left gutter and one nearer the right side. Overlay each image with a large condensed category label. Leave the central area intentionally empty. Near the lower-right, add a fixed-looking circular outlined scroll-direction control about 52px across, with a small filled triangular chevron. This control should reverse direction at the end of the page.
  
  Follow with a pale near-white product shelf. At desktop, display four equal columns, each with a tall clipped model/product image, a centred condensed uppercase product name, a small one-line description and a price. Use a generous gap around 24–36px and only roughly 20–50px of side inset. Do not put products inside rounded cards, do not add shadows, ratings, badges, quick-shop buttons, coloured CTA buttons or a generic feature grid. Beneath the shelf, use an enormous low-contrast condensed heading announcing the next product edit, partly cropped by the viewport, then interrupt the page with another approximately 100vh campaign image: an original model in a dark brimmed hat against a moody blue-grey mountain sky, with a massive white condensed slogan stretching behind or across the figure.
  
  End with a sage newsletter/footer section about 75–100vh tall. Its top row pairs a bold condensed heading and small explanatory text on the left with a very long, thin, rounded outlined email field on the right; use placeholder text and a right-aligned arrow. Below, create three compact all-caps link columns. Put legal text low at left and retain the circular up control low at right. Use #1c130b for ink, #fcfcfc for light surfaces, #dadada where a pale separator field is useful, and photo-led rust, orange and blue-green accents only inside imagery. Prefer semantic DOM, responsive images and CSS layout/transforms; no canvas or WebGL is needed. Use accessible text labels for icon-only controls, visible keyboard focus, meaningful image alt text, lazy-load below-the-fold images, and reserve image dimensions to prevent layout shift. Keep all brand copy, logos, campaign wording and photography original.

• Build frontend
• Generate assets
• Add animations
• Responsive polish
• Final visual polish

These prompts describe a visual language: composition, rhythm, type scale and motion. Build with your own branding, copy, logos and imagery — the design and content of Akke Knitwear belong to their authors.

Agent

Claude Code

Model

Claude Fable 5.1This is a visually exacting but DOM-led fashion storefront where responsive editorial composition, crop handling and typographic tuning matter more than advanced rendering.

The visual system, scroll sequence and commerce layout reproduce reliably with current frontend tools; the main remaining challenge is sourcing or generating a campaign image set with equally coherent styling and location work.