Guide · Agent skill
How to use the Brutalist Web Prototype agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Brutalist Web Prototype skill (web-proto-brutalist) is a style template that tells an AI agent to build web page mockups in a stark, Swiss industrial-print look. This guide explains what the skill changes, how to install it from a ZIP or the Claude apps, how to ask for output that uses it, and where it is a poor fit. By the end you will be able to produce a brutalist prototype and know what to check before you use it.
Brutalist Web Prototypenexu-io/html-anything · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the web-proto-brutalist skill ZIP from the page where you found this guide.
- 2Choose an install location. Pick ~/.claude/skills/ for personal use or the .claude/skills/ folder of a specific project.
- 3Unzip the skill. Unzip the file so the skill folder contains SKILL.md and example.html.
- 4Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 5Ask for a prototype. Request a landing page or prototype in plain language and specify the brutalist or Swiss industrial style.
- 6Review the result. Compare the output with example.html and refine copy, spacing or accent colour as needed.
What the skill makes the agent do
The skill is a set of instructions in a file called SKILL.md, plus an example.html file that shows the intended result. When the skill is active, the agent applies a fixed visual language to the web pages it builds instead of its default styling.
The look includes a newsprint-coloured canvas, hairline grid dividers, monolithic black grotesque headings, oversized numbers that bleed to the edge of the viewport, a hazard-red accent, ASCII-style box-drawing decorations and minimal numbered sections. The stated intent is a harsh, authoritative feel rather than a soft or friendly one.
- Newsprint background with thin grid lines
- Heavy black sans-serif headings
- Very large numerals that run to the viewport edge
- Red warning-style accents
- Box-drawing characters such as ┌─┘ as decoration
- Numbered sections using simple numerals
Install the skill from a ZIP file
Download the ZIP of the skill from the page where you found this guide. Unzip it into one of two places depending on how you want to use it: your personal skills folder, or a specific project's skills folder.
For a personal install, unzip into ~/.claude/skills/. For a single project, unzip into the .claude/skills/ folder inside that project. After unzipping, the skill folder should contain SKILL.md and example.html.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project folder
- Expected files: SKILL.md and example.html
~/.claude/skills/Install the skill in the Claude apps
If you use the Claude apps rather than a local folder, you can upload the skill through the settings. Open Settings, go to Capabilities, then choose Skills and add the skill from the ZIP.
Use the app route if you do not want to manage folders yourself. The result should be the same skill being available to the agent.
- Open Settings
- Go to Capabilities
- Select Skills and upload the skill
How to trigger the skill with a natural request
You do not need special command syntax. Ask the agent for a web page or prototype in plain language and say that you want the brutalist or Swiss industrial style. The assessment for this skill states that asking for a landing page or prototype produces output in this visual language rather than a generic default.
Name the subject clearly, such as a product landing page, an event page or a concept screen. Mention that it is for a desktop layout if that matters, since the skill carries a desktop 1440 aspect hint.
- Make a landing page prototype for a bicycle repair service in a brutalist style.
- Build a Swiss-style desktop concept page for a design conference, with large numbers for the schedule.
- Create a throwaway prototype of a pricing page in the brutalist industrial look.
Check and refine the output
Open the generated HTML in a browser and compare it with example.html, which shows the intended result. If the output looks like a generic page, restate that you want the brutalist skill applied and the Swiss industrial-print style.
Treat the first result as a concept. Adjust copy, spacing and colour in the HTML directly, or ask the agent for specific changes such as a different accent colour or fewer decorative characters.
- Compare the result with example.html
- Restate the style request if the output looks generic
- Ask for targeted edits to copy, spacing or accent colour
What the skill needs and its safety notes
The skill lists no requirements. It does not run scripts and does not use the network, so it is only instructions and an example file. It contains no executable code to review beyond what it says in its text.
The style itself is the main limit. It is designed to feel harsh and unfriendly, and it is not tuned for accessibility or brand guidelines. Review any output before using it for a production site.
- Requirements: none listed
- Runs scripts: no
- Uses network: no
- Not tuned for strict accessibility or brand rules
What people use it for
- Concept landing pages for a design studio that want a bold editorial look
- Throwaway prototypes that test whether a brutalist direction suits a brand
- Front-end experiments exploring industrial or editorial visual styles
- Mockups for an event or exhibition page with oversized numerals
Frequently asked questions
How do I install the web-proto-brutalist skill?
Download the ZIP from the page where you found this guide and unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ inside a project. In the Claude apps, you can instead go to Settings, then Capabilities, then Skills, and upload it.
What do I need to run this skill?
The skill lists no requirements. It does not run scripts and does not use the network, so it works as a set of instructions for your agent.
Is the Brutalist Web Prototype skill free to use?
The skill is licensed under Apache-2.0. Read the licence text for the full terms before reusing or redistributing it.
Why does the agent output not look brutalist?
The agent may not have applied the skill. Confirm the skill folder is in the right location, or the upload succeeded, and ask explicitly for the brutalist or Swiss industrial-print style in your request.
Can I use this for a production website?
The style is not tuned for strict accessibility or brand guidelines, and it is intentionally harsh. Use it for concepts and prototypes, and review any output carefully before it goes live.
What is a better choice for a soft or friendly brand look?
This skill is aimed at a stark, authoritative feel, so it is a poor fit for soft or friendly brands. Choose a different style template for those projects.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a designer or front-end developer who wants a bold, authoritative Swiss-style concept or a quick throwaway prototype. Pick a different approach if you need a soft, friendly or highly accessible brand look, or if the output must meet strict guidelines without manual review.
Download the skill