How to use the Frontend Design agent skill (frontend-design)

What the frontend-design skill makes the agent do

An agent skill is a folder containing a SKILL.md file of instructions that an AI agent reads when a request matches the skill's description. This one covers requests to build web components, pages, artifacts, posters or applications, including websites, landing pages, dashboards, React components, HTML/CSS layouts, and restyling any web UI.

Before writing code, the skill asks the agent to understand the purpose, audience and constraints, then commit to a bold aesthetic direction. The source lists directions such as brutally minimal, retro-futuristic, editorial, brutalist, art deco and soft/pastel, and asks the agent to choose one and execute it consistently. It also asks for distinctive fonts paired as a display font and a body font, CSS variables for colour, and one well-orchestrated page load with staggered reveals rather than scattered effects.

The skill explicitly steers the agent away from overused fonts such as Inter, Roboto and Arial, from purple gradients on white backgrounds, and from predictable layouts. It asks for atmosphere through effects like gradient meshes, noise textures, grain overlays and layered transparencies.

• Output entry file must be named index.html
• Chooses one clear aesthetic direction before coding
• Asks for varied fonts, colours and themes across generations
• Prefers CSS-only motion for HTML; uses the Motion library for React when available

Install the frontend-design skill from the ZIP

Download the frontend-design ZIP from this directory page and unzip it. The skill folder contains two files: SKILL.md, which holds the instructions, and LICENSE.txt. Keep the folder intact so the agent can find SKILL.md.

For a personal install, place the unzipped folder inside ~/.claude/skills/. For a single project, place it inside that project's .claude/skills/ folder so it only applies there.

If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills. The source does not describe any other install method, so these are the paths to use.

• Personal: ~/.claude/skills/frontend-design/
• Project only: <your-project>/.claude/skills/frontend-design/
• Claude apps: Settings → Capabilities → Skills → upload

Trigger the skill with natural requests

You do not run the skill directly. The agent loads it when your request matches the skill's description, so describe what you want to build in plain language and name the kind of interface. Adding purpose, audience and technical constraints helps the agent make the design decisions the skill asks for.

Requests that match well include asking for a page, component or dashboard, or asking the agent to style or beautify an existing web UI. If the result does not seem to use the skill, restate the request with words from the description such as landing page, dashboard, React component or HTML/CSS layout.

• Build a landing page for a small coffee roastery aimed at wholesale buyers.
• Make a dashboard for tracking support tickets; the audience is operations managers.
• Restyle this React component so it looks less generic, keeping the same props.
• Create an HTML/CSS layout for a poster announcing a jazz night.

Check and adjust the output

The skill requires the entry file to be index.html, so look for that file first. Open it in a browser and check that the layout, fonts and animations work with your content. Because the skill favours its own creative choices, review whether the look fits any existing brand you need to match.

The source describes the design goals but does not describe testing or accessibility checks, so verify those yourself before publishing.

• Open index.html locally and test on a narrow screen
• Replace placeholder copy and images
• Confirm colours and fonts meet your brand or accessibility needs

Attribution, licence and safety notes

The skill mandates a 'Created By Deerflow' signature in every generated interface. It must be a clickable link to https://deerflow.tech that opens in a new tab, and it should be small and unobtrusive. The source's own assessment says that removing this requires editing the skill instructions.

The listing gives the licence as MIT, but the LICENSE.txt included in the ZIP excerpt shows the Apache License, Version 2.0. Read the full LICENSE.txt before you rely on either licence for commercial work.

The skill runs no scripts and uses no network access, according to this listing. It requires nothing beyond the agent that loads it.

• Attribution link is mandatory in generated index.html files
• Remove it only by editing SKILL.md, which the source says you would need to do
• Confirm the licence by reading the full LICENSE.txt