SkillDex
中文
Claude CodeCodexOther skillDesign / Imageactive

Frontend Design

A frontend design Skill usable from Claude Code and Codex for creating distinctive, production-grade interfaces for components, pages, applications, and visual web artifacts.

Overview

Use this reference when a frontend task needs polished visual direction and implementation that avoids generic AI-looking interface patterns.

What this Skill can do

  • Frames high-quality frontend design thinking.
  • Supports web components, pages, dashboards, landing pages, and application UI.
  • Emphasizes distinctive visual systems over generic layouts.
  • Connects aesthetics with production-grade frontend implementation.

Best use cases

  • Designing a polished page or component from a rough brief.
  • Improving a web UI that feels generic or unfinished.
  • Creating a coherent visual system for a small product surface.

Not suitable for

  • Backend-only tasks with no visual interface.
  • Blindly copying an existing brand or proprietary design system.
  • Generating images unrelated to frontend implementation.

Inputs

  • A frontend brief, target audience, and desired visual direction.
  • Existing UI constraints, framework, and component context.
  • Reference style goals or examples when available.

Outputs

  • Frontend design direction and implementation guidance.
  • Polished UI code or component/page structure when used in Claude Code or Codex.
  • Visual details such as layout, spacing, typography, and interaction states.

Compatibility

Tools: Claude Code, Codex

Environments: Claude Code, Codex CLI or compatible Codex skill runtime, Frontend codebase or web UI artifact

  • Requires a frontend surface to design or improve.
  • Works best with clear audience, constraints, and style direction.

SkillDex links to the Skill source and does not reproduce its full text.

Evidence summary

implementedVerified 2026-07-02

  • Source directoryrepo

    Public source directory and license metadata are represented as reference-only catalog evidence.

Related projects

Related projects are derived from project records for navigation and portfolio context. They do not replace evidence artifacts, prove shipment, or prove that this Skill was used in a project.

  • Project evidence status: plannedProject record updated: 2026-07-02
    InsightCanvas Agent

    Portfolio project record for a planned analysis canvas agent. Public repository and demo evidence are not yet verified.

    Open project record

Safe example prompts

Design a product page

Use the Frontend Design skill to redesign this dashboard with a distinctive visual system while keeping the existing data and interactions intact.

Polish a component

Use the Frontend Design skill to improve this component's layout, typography, and interaction states without adding a component library.

Installation / usage

Reference the upstream Claude Code source; usage may be adapted for Claude Code or Codex.

  1. 1Open the GitHub source directory for the Skill.
  2. 2Review the upstream Claude Code guidance, then apply the Skill manually in Claude Code or Codex as appropriate.

Source metadata

Author
anthropics
Repository
https://github.com/anthropics/skills
Directory
https://github.com/anthropics/skills/tree/main/skills/frontend-design
License
Apache-2.0
Indexed
2026-05-21
Reviewed
2026-05-21