AI agent skill · by @nightly-labs

Distinctive Frontend Design

Give new or substantially redesigned interfaces a deliberate visual direction grounded in their subject, audience, content, and purpose. Do not use for minor styling fixes.

Archived 2026-10-23 · Source updated 2026-10-11. Check the original repository for the latest version.

SKILL.md instructions

<!-- Modified by OpenBot from Anthropic's frontend-design skill. See NOTICE.txt. -->

# Distinctive Frontend Design

Ground the design in one concrete subject, its audience, and the interface's primary job. Use real content and the subject's own materials, language, and visual references instead of defaulting to a generic product aesthetic.

Before building, define a compact direction covering palette, typography roles, layout logic, and one signature element. Every structural or decorative choice should encode something true about the content. Review the direction against the brief and replace choices that could belong unchanged to any similar product.

Spend visual boldness in one place and keep the surrounding system disciplined. Match implementation complexity to the idea. Use motion only where it explains change, reinforces hierarchy, or creates one intentional moment.

Treat words as interface material: use plain verbs, name actions consistently, and make errors and empty states explain the next step. Preserve responsive behavior, visible keyboard focus, readable contrast, and reduced-motion preferences.

Reuse the repository's components and design tokens where they fit. Critique the result in context and remove details that do not serve the chosen direction.