Build a page with a clear design direction

Before you start

You’ll make: A working interface guided by your brand, with a mobile and keyboard review.

• Claude Code installed, signed in, and open in a local project.
• Permission to install plugins in that environment.
• A short brief with your audience, brand, and actual page content.

1. Install the skill

Run each slash command inside Claude Code, not your terminal shell.

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

The example-skills plugin includes several skills, not just frontend-design. Inspect the official marketplace manifest before installing. Follow Claude Code’s reload instructions if shown.

Open the official source below and review SKILL.md, scripts, and the license. If the skill is missing after installation, start a new session or follow the agent’s reload guidance.

2. Try a small task

Copy this into a new Claude Code conversation. Replace example filenames with your own non-sensitive files where needed.

Use the frontend-design skill to build a simple tutorial landing page in this project. First explain your design direction. Keep our existing brand, use real text, and check a 390px mobile layout and keyboard focus. Do not deploy it yet.

3. Check the result

• Claude describes a design direction before building.
• The page uses your content and works at a narrow viewport.
• You inspect the actual rendered page and keyboard controls, not only a screenshot mockup.

If something doesn’t work

Plugin not found

Confirm that anthropics/skills was added and that the marketplace name is anthropic-agent-skills. Managed environments may restrict plugin sources.

The skill does not appear

Follow the installer’s reload message or start a new session, then explicitly ask Claude to use frontend-design.