Agent skill · design visual · nexu-io
frontend-design
Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.
Why this skill is useful
Provides specific design patterns and production-grade frontend code practices that enhance the AI's ability to create polished interfaces.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
frontend-design Adapted from Anthropic's official frontend-design skill for OpenDesign. Use this skill when the user asks to build or improve a frontend interface: a website, landing page, dashboard, application screen, HTML/CSS artifact, React/Vue/Svelte component, or a visual redesign of an existing UI. The goal is not just "make it nicer." The goal is to ship working frontend code with a clear design point of view, strong craft, and enough product detail that the result feels designed for the user's actual context. Workflow 1. Understand the brief before choosing the look. Identify the audience, primary job, domain, and emotional tone. Note any technical constraints: framework, existing styles, accessibility, performance, export target, or responsive requirements. If the repo already has design tokens, components, screenshots, or a DESIGN.md, use those as the source of truth. 2. Commit to one specific aesthetic direction. Pick a direction that fits the product: brutally minimal, editorial, luxury, playful, industrial, retro-futuristic, dense operational, calm enterprise, artful consumer, or another precise direction. Make the direction concrete through typography, spacing, color, hierarchy, motion, and component shape. Avoid generic AI defaults: purple-blue gradients, vague glass cards, interchangeable SaaS layouts, over-rounded cards, stock icon rows, and decorative blobs that do not serve the interface. 3. Design the real interface, not a placeholder poster. Include the controls, empty/loading/error states, tables, filters, navigation, and responsive behavior a real user would expect. Use honest content. If data is unknown, label it as sample, pending, or unavailable instead of inventing claims. Keep workflows efficient for the target user. Dashboards and tools should be scannable and dense enough for repeated use; marketing pages can be more expressive. 4. Build production-grade frontend code. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/frontend-design