Claude's frontend-design skill: install it, then put the page online

Anthropic's frontend-design skill is one SKILL.md file that tells Claude to design a page like a studio's design lead: pick colors and typefaces for the subject, avoid the looks AI-made pages fall into, and check its own work. In Claude Code, install it with /plugin install frontend-design@claude-plugins-official, or copy its folder from Anthropic's repository. Then ask for the page as one HTML file, and publish that file on Convika, or let Claude Code publish it through the Convika connector.

What we checked: on November 6, 2026, we read the skill's SKILL.md in both of Anthropic's repositories that hold it, Claude Code's plugin and skills docs, and Anthropic's help center. On an Ubuntu 26.04.1 LTS computer, in an empty home folder, we installed the plugin with the shell commands of Claude Code 2.1.318, without signing in to anything. We didn't run a prompt with the skill, which needs a Claude sign-in or an API key, and we didn't see which skills claude.ai lists in Customize > Skills.

What the frontend-design skill tells Claude

The skill lives in two of Anthropic's GitHub repositories: as a plugin in anthropics/claude-plugins-official (plugin version 1.1.1), and as a folder in anthropics/skills. On November 6, 2026, the two SKILL.md files were the same, byte for byte. The plugin repository last changed it on September 1, 2026, and the skills repository on September 3. Both folders carry the Apache License 2.0.

Its front matter names it frontend-design, with this description: “Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.” Claude Code keeps that description in Claude's context and loads the rest of the file when a task matches it.

The rest of the file opens with a role: “Approach this as the design lead at a design studio known for giving every client a distinct visual identity that is not mistaken for anyone else's.” Here is what it asks for, and what that means for your page.

The plugin's README and its Claude Marketplace page still promise “Bold aesthetic choices” and “High-impact animations”. The SKILL.md that Claude reads asks for restraint: “Spend your boldness in one place. Let one element be the memorable thing, keep everything around it quiet and disciplined, and cut any decoration that does not serve the brief.” Expect a plan, then a calm page with one strong element.

Install the plugin in Claude Code in 4 steps

Claude Code adds Anthropic's official marketplace, claude-plugins-official, “the first time you start an interactive terminal session”, per Install and manage plugins. So in a terminal session you can install the plugin right away. In the desktop app's Code tab, click + next to the prompt box, select Add plugins, and pick frontend-design. In VS Code, type /plugins to open Manage plugins.

1. Run the install command

Start Claude Code with claude in your project, then run:

/plugin install frontend-design@claude-plugins-official

In a session, this “doesn't install right away: it opens the /plugin panel on that plugin's details”. Its Will install list names what the plugin adds, and Context cost what it adds to your messages. For this plugin, our shell check with claude plugin details frontend-design listed one skill, frontend-design, and no agents, hooks, or MCP servers. It estimated about 59 tokens added to every session, and about 2.3k each time the skill loads.

2. Choose who gets it

Pick one of the 3 scopes. Install for you (user scope) gives you the plugin in every project on this computer. Install for all collaborators on this repository (project scope) turns it on for everyone who works in the repository. Install for you, in this repo only (local scope) keeps it to you, in this repository.

3. Read the last line

The install summary ends with Plugin is now active. when you can use it at once. If it says Run /reload-plugins to apply., Claude Code runs that reload when the panel closes. If the reload would invalidate the prompt cache, it warns and leaves the plugin pending instead; /reload-plugins --force turns it on anyway.

4. Check that the skill is there

Type / and look for /frontend-design:frontend-design: a plugin's skills appear “in the form /<plugin>:<skill>”. In your shell, claude plugin list shows the plugin with its version, scope, and status. Ours read frontend-design@claude-plugins-official, Version: 1.1.1, Scope: user, Status: ✔ enabled.

Other ways to install it

From your shell or a setup script

claude plugin install frontend-design@claude-plugins-official installs it without opening a session, at user scope unless you pass --scope project or --scope local. On a computer where no one has opened an interactive session yet, the docs say the official marketplace “isn't registered”. We saw that in our empty home folder: the install failed with Plugin "frontend-design" not found in marketplace "claude-plugins-official". Adding the marketplace first, as the docs say, fixed it:

claude plugin marketplace add anthropics/claude-plugins-official
claude plugin install frontend-design@claude-plugins-official

The second command printed ✔ Successfully installed plugin: frontend-design@claude-plugins-official (scope: user). The plugin loads the next time you start Claude Code, or after /reload-plugins in an open session.

With Anthropic's example skills

The anthropics/skills README registers that repository as a marketplace and installs its example skills, frontend-design among them:

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

We ran the shell form of both. They install 11 more skills along with frontend-design, such as skill-creator and webapp-testing, and each one adds its description to every session.

As a folder in your skills folder

Copy the skills/frontend-design folder from anthropics/skills (SKILL.md and LICENSE.txt) to ~/.claude/skills/frontend-design/ for all your projects, or to .claude/skills/frontend-design/ in a repository, which Claude Code's skills docs list as the personal and project locations. The skill is then /frontend-design. It stays the version you copied: nothing updates it.

The 3 ways compared

Plugin skills are “namespaced as /plugin-name:skill-name”, per the skills docs, which gives the example skills plugin's command; we didn't open the / menu to see it.

Use it in claude.ai or the Claude desktop app

Anthropic's Use skills in Claude says “Skills are available for users on Free, Pro, Max, Ultra, Team, and Enterprise plans. This feature requires code execution to be enabled.” On a Free, Pro, Max, or Ultra plan, go to Settings > Capabilities and turn on Code execution and file creation (Create and edit files in the newer layout), then open Customize > Skills. On a Team plan, skills are on by default for the organization; on Enterprise, an Owner turns them on under Organization settings > Plugins & skills.

Is frontend-design already in that list? The anthropics/skills README says its example skills “are all already available to paid plans in Claude.ai”, and the help center says Free, Pro, Max, and Ultra users “can enable example skills”. Neither page names the example skills a plan shows, and we didn't sign in to look. If it isn't listed, add it as your own skill:

1. In anthropics/skills, open skills/frontend-design/SKILL.md and click Download raw file. Put the file in a new folder named frontend-design, and compress that folder as a ZIP file. Keep the folder's name: the help center lists “Skill folder name doesn't match the skill name” as an upload error.
2. In Customize > Skills, click +, then + Create skill, then Upload a skill, and upload the ZIP.
3. Turn the skill on.

Claude decides when to use it from its description. If it doesn't, say so in the request: “Use the frontend-design skill to make…”. A skill you turn on there also loads in Claude Code in your terminal when you sign in with the same Claude account (Claude Code 2.1.273 or later), per the same help article.

In a chat, Claude makes the page as an artifact or an HTML file. On Pro, Max, Ultra, Team, and Enterprise plans, click Share on the artifact, choose Anyone with the link under Who has access, and copy the link. Anthropic's Share artifacts page says “Most artifacts shared with "Anyone with the link" open without a Claude account or sign-in.” On Team and Enterprise, that choice needs an Owner to turn on External sharing, and the Free plan can't share an artifact by link. For your own address, a form that keeps entries, or a count of visits, download it as an HTML file and publish it as in Put the page online.

A first prompt, and what to expect

Describe the page and its subject in your own words, and ask for one file. That keeps it ready to publish. For example:

Make a landing page for Ridgeline, a weekly trail-running club in Boulder for beginners. One self-contained index.html: CSS and JavaScript inline, fonts from Google Fonts, images as https URLs. Sections: what a first run is like, the route map, and sign-up, with an empty <div data-convika-form></div> where the form goes. Show me your design plan before the code.

The plugin's README suggests shorter prompts, such as “Build a landing page for an AI security startup”. Going by the SKILL.md, expect Claude to confirm the subject if your prompt doesn't make it clear. Then it writes a plan with 4 to 6 named colors, the typefaces, and an ASCII wireframe, revises the parts that read as defaults, and only then writes the code. We didn't run these prompts.

If your prompt fixes a look (“black and white, one serif typeface”), the skill tells Claude to follow it. If Claude Code doesn't load the skill on its own, start the message with /frontend-design:frontend-design and the request after it. To check the page on your computer first, see how to preview an HTML file from Codex or Claude Code.

Put the page online

Convika stores each page as one HTML document. The dashboard takes one .html or .htm file up to 2 MB, not a folder or a ZIP. If the skill built a React, Vite, or Next.js project, ask Claude Code: “Turn this page into one static HTML file with the CSS and JavaScript inline, no build step.” Fonts from Google Fonts or another https address and images at https URLs load as written. An image in your project folder has to move to a public URL or go into the file itself.

Upload the file on the dashboard

1. Sign up at app.convika.com. The Free plan needs no credit card.
2. On your dashboard, select Upload an HTML file, click the Upload a file tab, and pick your index.html. Click Create my preview. Uploading uses no AI credits.
3. When you see “Your preview is ready”, click Open preview and check the page on your phone and your computer. The preview link is private and works for 3 minutes; click Open preview again for a new one.
4. Click Publish page. Under Who can open this page?, choose Public and click Next. The first time, click Publish free. Your page is live at an address like yourpage.convika.page, with the Convika bar at the foot.

To see it online before you sign up, the publish-HTML tool gives a private link without an account, for 3 minutes, with scripts and forms turned off.

Or have Claude Code publish it through the Convika connector

Run this once in your terminal:

claude mcp add --transport http convika https://mcp.convika.com

Add --scope user so the server is available in every project. Start Claude Code, run /mcp, select convika, and sign in to Convika in your browser. Then say: “Save index.html to Convika as a new page, as it is, and give me the preview link.” When the preview looks right, say “Publish it.” Convika's save tool asks for pages that use Tailwind CSS v3 from its CDN. If Claude Code offers to rewrite the skill's own CSS in Tailwind, say no: Convika serves the file's styles and web fonts as written.

The empty data-convika-form box from the prompt is where Convika puts a working sign-up form: click Add a form to my page on the page's screen, or ask Claude Code to add one. Forms, your own domain, and what the connection can and can't reach are in how to deploy a landing page from Claude Code.

Update the live page after changes

Through the connector, ask: “Save the new index.html to the same Convika page and give me the preview link,” then “Publish it.” Each save adds a version. The live page changes only when Claude Code publishes, which Convika's tool tells it to do only when you ask. Free keeps 10 versions of each page, so you can roll back.

On the dashboard, open the page's screen. Under Update from an HTML file, click Upload a new version, choose the new file, and click Upload as a new version. Check the preview, then publish it at the same link. How to update a page you already shared has each screen.

Share the skill setup with your team

In Claude Code, the project scope does it for a repository. Install for all collaborators on this repository (project scope) writes the plugin into .claude/settings.json, which you commit. That turns the plugin on for your collaborators but “doesn't download it to their machines”, so each of them runs claude plugin install frontend-design@claude-plugins-official --scope project once. A skill folder committed at .claude/skills/frontend-design/ reaches everyone who clones the repository.

On claude.ai Team and Enterprise plans, a skill you uploaded can go to colleagues from Customize > Skills: Share in its ... menu gives it to specific people, and Publish to org on the skill's page sends it to your organization's library.

If your team keeps its own design or brand skills next to this one, and not everyone works in Claude, AI Skill Pod lets everyone use your team's skills in their own Claude, ChatGPT or Gemini, on any plan. You send one invite link, and it's free to start. AI Skill Pod is made by the team behind Convika.

Frequently asked questions

Is the Claude frontend-design skill free?

Yes. The skill is a text file that Anthropic publishes under the Apache License 2.0, and installing it costs nothing. Running it uses your Claude plan like any other request. Claude Code “requires a Pro, Max, Ultra, Team, Enterprise, or Console account”, per its setup docs; claude.ai's skills work on the Free plan too, with code execution on.

Does the frontend-design skill work in claude.ai?

Yes, as a skill. Turn on code execution in Settings > Capabilities, then look for it in Customize > Skills. If it isn't listed, upload the frontend-design folder as a ZIP there. Its Claude Marketplace page offers one install button, for Claude Code.

What does claude plugin install frontend-design@claude-plugins-official do?

It installs Anthropic's frontend-design plugin from the claude-plugins-official marketplace at user scope, so the skill is in every project on your computer. In a session, the /plugin install form opens the plugin's details first and lets you choose a scope. On a computer where no one has opened an interactive Claude Code session yet, run claude plugin marketplace add anthropics/claude-plugins-official first.

Where does the frontend-design plugin install?

Claude Code keeps fetched plugins under ~/.claude/plugins/. Our install put the skill at ~/.claude/plugins/cache/claude-plugins-official/frontend-design/1.1.1/skills/frontend-design/SKILL.md and added "frontend-design@claude-plugins-official": true under enabledPlugins in ~/.claude/settings.json. A project-scope install writes that entry to the repository's .claude/settings.json instead.

Why isn't Claude using the frontend-design skill?

Check that it's on: claude plugin list should show Status: ✔ enabled. If you installed it during a session, run /reload-plugins. Claude picks a skill by its description, so name the job in your request (“design a landing page”), or call it directly with /frontend-design:frontend-design, or /frontend-design for a copied folder. In claude.ai, check the skill's switch in Customize > Skills and that code execution is on.

How do I install the frontend-design skill from GitHub?

Either add the repository as a marketplace (/plugin marketplace add anthropics/skills, then /plugin install example-skills@anthropic-agent-skills), or copy the skills/frontend-design folder to ~/.claude/skills/frontend-design/. The official plugin's source is in anthropics/claude-plugins-official under plugins/frontend-design.

Can I host the page the frontend-design skill makes?

Yes, as one HTML file. Upload it on Convika's dashboard and publish it, or connect Claude Code to Convika and ask it to publish. Your page goes live at an address anyone can open without an account. A multi-file build needs to become one HTML file first.

How do I change the page after it's live?

Ask Claude Code for the change, then save it to the same Convika page and publish it again, or click Upload a new version on the page's screen. The link stays the same.

Sources

• frontend-design SKILL.md, README.md, and .claude-plugin/plugin.json (anthropics/claude-plugins-official, plugins/frontend-design) (read November 6, 2026)
• frontend-design SKILL.md (anthropics/skills, skills/frontend-design), the repository's README and its .claude-plugin/marketplace.json (read November 6, 2026)
• Install and manage plugins (Claude Code docs) (read November 6, 2026)
• Plugins overview (Claude Code docs) and Anthropic's marketplaces (Claude Code docs) (read November 6, 2026)
• Extend Claude with skills (Claude Code docs) (read November 6, 2026)
• Advanced setup (Claude Code docs) (read November 6, 2026)
• Use skills in Claude (Claude Help Center) (read November 6, 2026)
• Share artifacts (Claude Help Center) (updated November 5, 2026; read November 6, 2026)
• Plugins (Claude docs, for claude.ai and the desktop app) (read November 6, 2026)
• Frontend Design (Claude Marketplace) (read November 6, 2026)