---
name: direction-contrast
description: "Develop multiple website directions that differ structurally, not merely in palette. Use for art direction, styles, editorial, brutalism."
---

# Принципиально разные дизайн-направления

Develop multiple website directions that differ structurally, not merely in palette.

## Implementation decisions

1. Compare directions on composition, density, typography roles, image treatment, navigation and motion grammar. Change at least four axes deliberately.
2. A newspaper needs columns and editorial hierarchy; a terminal needs a command/output rhythm; an art-deco page needs symmetry and stepped ornament.
3. Write a distinct content scenario for each direction. Reusing the same hero and three feature cards erases the difference.
4. Keep full-size and thumbnail renderings of the same composition, and document the rules a coding agent should preserve.

## Working source

Read [components/style-world.tsx](../webcraft-shared/source/components/style-world.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- Directions remain distinguishable in grayscale.
- Removing brand names does not make the structures identical.
- The chosen direction still supports mobile content order and readable text.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Version 2.0.0 · Original WEBCRAFT content · MIT