Design distinctive frontends


ID	`ap-frontend-design`
Kind	skill
Selection	optional
Category	Frontend
Targets	claude, codex, cursor

Create intentional, production-grade interfaces and maintain the project design system.

When to use

Use when designing or implementing distinctive web UI while respecting an existing design system.

How it is selected

Optional. Select during initialization or when offered in an update, or install separately when you need it.

Install

agents-pack install ap-frontend-design --dry-run
agents-pack install ap-frontend-design --yes

How to invoke

Use ap-frontend-design to redesign this project dashboard. Preserve the current
task flows and design tokens, but give the interface a product-specific visual
direction. Verify the rendered result at desktop and mobile widths.

How it approaches visual direction

The skill derives one memorable design idea from the product’s actual subject, content, materials, or workflow. Before coding, it challenges whether the same composition could belong to an unrelated product after changing only the logo and copy.

When Design Studio supplies a creative packet, its content-native generator, binding visual contracts, and rejected fallback patterns guide implementation. Those constraints never override legibility, accessibility, or the interface’s primary job.

Typography and responsive checks

Typography uses a limited set of intentional weight roles instead of making every heading, label, button, and metadata line bold. Hierarchy can also come from scale, spacing, position, color, case, and style.

The final rendered check waits for fonts to load and inspects desktop, mobile, and relevant transition widths for clipped glyphs, accidental text overlap, near-tangencies, overflow, and hierarchy. A deliberate overlap is retained only when it belongs to the stated direction, remains readable, and survives responsive reflow.