Frontend Design

Derived from Anthropic's frontend-design skill in anthropics/claude-plugins-official, licensed under Apache License 2.0. Modified for Codex with broader trigger wording, landing page rules, UI anti-patterns, asset guidance, and browser-based visual QA.

Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Implement real working code with strong attention to visual direction, layout, typography, assets, interaction design, responsiveness, and verification.

The user may ask for a component, page, application, or interface. They may include context about purpose, audience, brand, framework, or technical constraints.

Workflow

1. Read the request and existing codebase conventions before choosing a direction.
2. Commit to a concrete visual concept that fits the product, audience, and domain. Examples: editorial finance terminal, Swiss industrial SaaS, luxury hospitality, playful learning lab, cinematic game HUD.
3. Implement the actual usable screen or flow first; do not substitute a marketing shell for an app, tool, or game.
4. Use real, generated, or domain-relevant visual assets when imagery would materially improve the result.
5. Make the interface responsive, accessible, and durable against text overflow, loading states, hover states, and narrow viewports.
6. Run the app locally when needed, inspect desktop and mobile layouts in a browser, fix visible defects, and check console errors before calling the work done.

Design Thinking