Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
nexu-io avatar

Frontend Design

  • 2.9k installs
  • 82k repo stars
  • Updated July 28, 2026
  • nexu-io/open-design

frontend-design is an Open Design skill for distinctive production-grade web interfaces with strong visual craft and working code.

About

frontend-design creates distinctive production-grade interfaces with clear visual direction, polished typography, considered layout, and working HTML, CSS, JS, or framework code. Workflow starts by understanding audience, primary job, domain tone, and technical constraints including existing tokens, components, or DESIGN.md sources. The skill commits to one concrete aesthetic direction and rejects generic AI defaults such as purple-blue gradients, vague glass cards, and interchangeable SaaS layouts. Real interfaces include controls, empty, loading, and error states, tables, filters, navigation, and responsive behavior with honest sample content labels. Production code follows repository conventions, semantic markup, keyboard access, focus states, contrast, and CSS variables for repeated tokens. Open Design integration treats injected design systems as brand contracts, applying typography, color, and anti-ai-slop craft checks before delivery. Self-review verifies mobile and desktop fit, interaction states, and one memorable visual quality.

  • Commit to one specific aesthetic direction per interface.
  • Reject generic AI slop gradients and interchangeable SaaS layouts.
  • Ship real states: empty, loading, error, and responsive controls.
  • Follow repo tokens and Open Design system injections first.
  • Self-review for accessibility, fit, and memorable visual quality.

Frontend Design by the numbers

  • 2,911 all-time installs (skills.sh)
  • +200 installs in the week ending Jul 28, 2026 (Skillselion tracking)
  • Ranked #114 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
At a glance

frontend-design capabilities & compatibility

Capabilities
brief driven aesthetic direction selection · production html css js or framework implementati · real ui states and responsive layout patterns · open design system and craft reference integrati · accessibility focused semantic markup and focus · anti slop visual self review checklist
Works with
figma
Use cases
ui design · frontend · web design
Pricing
Free
From the docs

What frontend-design says it does

The goal is to ship working frontend code with a clear design point of view
SKILL.md
Avoid generic AI defaults: purple-blue gradients
SKILL.md
Include the controls, empty/loading/error states
SKILL.md
npx skills add https://github.com/nexu-io/open-design --skill frontend-design

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs2.9k
repo stars82k
Security audit2 / 3 scanners passed
Last updatedJuly 28, 2026
Repositorynexu-io/open-design

How do I build a polished web interface with a clear design point of view instead of generic AI UI?

Design and ship distinctive production-grade web interfaces with strong typography, layout, and working HTML, CSS, or framework code.

Who is it for?

Teams shipping websites, dashboards, landing pages, or React components with real visual direction.

Skip if: Skip for pure backend APIs, stock icon packs only, or Figma-only mockups without code.

When should I use this skill?

User asks for frontend design, UI beautification, landing pages, dashboards, or production React screens.

What you get

Working frontend code with intentional typography, color, layout, states, and responsive behavior.

  • Production UI layout specification
  • Typographic and spacing system guidance

By the numbers

  • Defines 5 trigger phrases including frontend design, ui design, and production ui

Files

SKILL.mdMarkdownGitHub ↗

frontend-design

Adapted from Anthropic's official frontend-design skill for Open Design.

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.

  • Prefer the repository's existing framework, component conventions, icons, tokens, and styling approach.
  • For standalone artifacts, create self-contained HTML/CSS/JS unless the user asked for a framework.
  • Use semantic markup, keyboard-accessible controls, visible focus states, sensible contrast, and responsive layout constraints.
  • Use CSS variables for repeated colors, spacing, shadows, and type scale.

5. Refine visual craft.

  • Typography: choose expressive but readable type pairings. Avoid using default system stacks as the main visual idea unless the direction is intentionally utilitarian.
  • Color: create a balanced palette with role clarity. Use accent color sparingly and deliberately.
  • Layout: use alignment, rhythm, density, and negative space intentionally. Do not let cards, panels, or labels drift.
  • Motion: add purposeful transitions for state changes, reveals, and feedback. Prefer transforms and opacity for performance.
  • Details: use texture, borders, shadows, dividers, media, and iconography only when they support the concept.

6. Self-review before final delivery.

  • The interface works at mobile and desktop widths.
  • Text fits its containers and does not overlap adjacent UI.
  • Interactive elements have hover/focus/active/disabled states.
  • The design avoids obvious AI-generated visual tropes.
  • The result has one memorable quality a user could describe after closing the page.

Open Design Integration

When Open Design provides an active design system, treat it as the product's brand contract. Use the injected color, typography, layout, and component guidance first, then apply this skill's frontend craft rules where the design system is silent.

When Open Design injects craft references such as typography, color, and anti-ai-slop, apply those checks before finishing. If the user's brand guidance conflicts with a generic craft rule, the user's brand guidance wins.

Source

  • Upstream: https://github.com/anthropics/skills/tree/main/skills/frontend-design
  • Category: web-artifacts

License

This skill is adapted from Anthropic's official skills repository. See LICENSE.txt in this folder for the upstream Apache-2.0 license terms.

Related skills

How it compares

Pick frontend-design to generate shippable UI structure; pair with web-design-guidelines when you need a standards audit pass on existing screens.

FAQ

What if a design system is injected?

Treat Open Design tokens and components as the brand contract and apply craft checks on gaps.

What visual tropes are banned?

Purple-blue gradients, vague glass cards, over-rounded cards, and decorative blobs without purpose.

Must I include non-happy paths?

Yes. Include empty, loading, error states and honest sample or pending labels.

Is Frontend Design safe to install?

skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.