High-End Visual Design Skill: Style a Landing Page Hero

Build a restrained landing-page hero with a clear typographic hierarchy, well-spaced elements, and purposeful motion. This guide uses the original archived Soft Skill edition.

中文

Setup for Codex / Claude Code (archived skill)

Codex or Claude Code in a local frontend project. Run the project in a browser to check layout and motion. Use the project’s existing stack and install optional motion libraries only if your implementation calls for them.

Open the pinned skill document from the maintainer’s archive. Keep this standalone edition separate from the current consolidated Taste Skill.
Save it as .agents/skills/high-end-visual-design/SKILL.md for Codex or .claude/skills/high-end-visual-design/SKILL.md for Claude Code.
Start a new project session and select the skill from the skills picker. Run the example in a simple frontend project where the browser can render your changes.

Example task

Use high-end-visual-design to style a single hero for a fictional ceramic studio called Still Kiln. Give it the headline ‘Objects made to be held’ and one View collection action. Create a calm composition with distinct heading and body scales and a clay-colored accent. Keep motion limited to button feedback and support reduced motion. Preview the hero at 390px and 1280px widths.

Expected result

The hero shows the heading, short descriptive copy, and one clear action at both widths without horizontal overflow. The action has legible focus and hover states. With reduced motion enabled, the action remains accessible and the layout remains stable.

Upstream documentation

Original SKILL.md on GitHub · MIT license · Source reviewed 2026-11-15

Frequently asked question

How is this archived edition different from the current Taste Skill repository?

This edition is the standalone Soft Skill document from the maintainer’s archive. Its guidance concentrates on softer contrast, spacious layout, layered component details, and deliberate motion. The current repository uses a consolidated skill with its own installation path.