First App.
Your learning space A little progress, every day
CHAPTER 04Lesson 11 of 20

Use Anthropic’s frontend design skill

A skill is a set of instructions the AI can use for a particular job. Anthropic’s frontend-design skill guides choices about layout, type and visual style.

In your AI helper8 min read & do
By the end of this lesson

Find the official design skill, make it available to your helper and ask it to apply the guidance.

Let’s do this

  1. 1
    In your browser

    Open the official skill first

    Follow the source link and check the repository owner is anthropics. The skill is called frontend-design. Read its purpose with the AI. It is guidance for the helper, not a set of website buttons and not a guarantee of a good result.

    Anthropic: frontend design skill (opens a new tab)
  2. 2
    In Claude Code

    If you use Claude Code, install the official skill bundle

    Follow the repository’s installation instructions. In Claude Code’s command interface, register the marketplace, then install example-skills. These are Claude Code slash commands, not Terminal shell commands. If the desktop interface does not offer them, ask it to guide you through its supported plugin controls or use the reference route in the next step.

    /plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
    Anthropic: official skills and installation (opens a new tab)
  3. 3
    In Codex

    If you use Codex, give it the same official reference

    Share the frontend-design link and ask Codex to read and apply it as design guidance. That works as a reference if web access is available; it does not mean the skill is installed. For repeated use, ask Codex to check its supported skill-install method and name the location before installing. Claude’s slash commands are not Codex commands.

  4. 4
    In your AI helper

    Invoke it with your project brief

    Ask: “Use the frontend-design skill for this page. The audience is first-time gardeners. Keep the plant list and watering action working.” Include your style reference. Ask for a short direction, then approve the design work. Keep shadcn/ui for suitable controls.

  5. 5
    In your browser

    Review the result against the job

    Check the actual page, not just the AI’s description. Can you find the main action, read the text and use it on a narrow screen? Ask it to name whether it loaded an installed skill or read a reference, so you know what happened.

A message for your AI helper

Use Anthropic’s official frontend-design guidance at https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md for my first website. Tell me whether you are using an installed skill or reading it as a reference; do not claim to have installed it unless you have. My audience is the people I want to help, and the main job is [describe the problem my app should solve]. Suggest a clear visual direction, then apply it after I agree. Use free shadcn/ui parts where useful and keep all existing actions working.

Make this message fit your idea.

What you should see

The helper explains how it accessed the design guidance, and you have a design improvement you can judge in the preview.

If you get stuck

Go at your own pace. There is no test to pass.

Checked 7 September 2026. Screens can change; the official guides below have the latest steps.

Anthropic: frontend design skillAnthropic: official skills and installationAnthropic: Claude Code on desktop