Guide · Agent skill
How to use the Soft Premium Web Prototype agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The web-prototype-taste-soft skill is an agent skill that tells an AI coding agent to build web prototypes in one strict premium style: soft silver or cream backgrounds, heavy display type, double-bezel cards and gentle spring-like motion. This guide explains what the skill changes, how to install it from the ZIP on this page, how to trigger it with plain requests, and what to check before you use it. By the end you will be able to get a consistent premium landing-page mockup from your agent without writing the design rules yourself.
Soft Premium Web Prototypenexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the web-prototype-taste-soft ZIP from this page. It contains SKILL.md and example.html.
- 2Unzip into a skills folder. Extract the folder into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project for project-only use.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Make a premium brief. Describe the page and use a phrase like Apple-like, calm SaaS or premium consumer so the agent knows the finish you want.
- 5Check the output. Compare the result with the required components and pre-flight checklist, and with example.html.
What the skill makes the agent do
An agent skill is a folder with a SKILL.md file that gives an AI agent extra instructions for a specific kind of task. When this skill is installed and the agent is asked for a premium web prototype, it follows a fixed visual style instead of its default look.
The style uses warm silver-grey or cream backgrounds (for example #F2F2F0 or #FDFBF7, not pure white), heavy display typography, rounded 'double-bezel' cards, pill buttons with a trailing arrow inside its own circle, subtle ambient gradients and smooth spring-like animations. The skill also bans certain choices, including Inter, Roboto, Helvetica and Open Sans, generic 1px gray borders, heavy drop shadows and pure black.
- Canvas: silver-grey or warm cream, never pure white
- Type: heavy display headings (weight 700 or higher) with tight letter-spacing
- Cards: an outer shell with an inner core and concentric corner radii
- Buttons: full pills with a button-in-button arrow
- Motion: custom cubic-bezier easing or spring physics, with no linear or ease-in-out transitions
Install the Soft Premium skill
Download the ZIP for this skill from this page. The skill's files are SKILL.md and example.html. Unzip the folder so that SKILL.md ends up inside a folder named web-prototype-taste-soft.
For a personal install, place that folder in ~/.claude/skills/. For a single project, place it in the project's .claude/skills/ folder so it only applies to that project.
Alternatively, if you use the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal install: ~/.claude/skills/web-prototype-taste-soft/
- Project install: .claude/skills/web-prototype-taste-soft/ inside your project
- Claude apps: Settings → Capabilities → Skills → upload
~/.claude/skills/web-prototype-taste-soft/SKILL.mdHow to trigger the skill with natural requests
You do not need a special command. The skill is meant to apply when your brief asks for a premium finish. The source names several phrases that signal this look: 'Apple-like', 'Linear-tier', 'premium consumer', 'calm SaaS' and '$150k agency' finish.
Say what the page is for, who it is for, and the finish you want. Mentioning the skill by name is a clear way to make sure it is used, but the descriptive phrases are usually enough.
- Build an Apple-like landing page prototype for a note-taking app.
- Make a calm SaaS homepage mockup for a pitch deck, using the web-prototype-taste-soft skill.
- Create a premium consumer product page with a hero, feature bento grid and closing band.
- Prototype a $150k agency style marketing site for a finance tool.
What the agent should produce
When the skill applies, the source describes a required set of page sections: a floating glass pill navbar, an asymmetric hero with a large display headline and two CTAs, a bento grid using double-bezel cards, a feature row, a slow marquee strip of customer logos, a closing band on a dark inverted surface, and a monospace footer.
The skill also includes a pre-flight checklist, such as a minimum section padding of py-24, using min-h-[100dvh] instead of 100vh for the hero, and collapsing to a single column under 768px. Check the output against this list. The included example.html shows a finished template of the look, which you can open in a browser to compare with what the agent builds.
- Floating pill navbar with backdrop blur and a hairline ring
- Asymmetric hero with eyebrow tag, body lede and two CTAs
- Bento grid with at least one wide card and one tall card
- Marquee logo strip that pauses on hover
- Mobile layout that collapses to one column under 768px
Safety notes: scripts and network
According to the skill's listing, it requires nothing beyond the agent itself, does not run scripts and does not use the network. It consists of instructions and an example HTML file.
Because it is only instructions, the main risk is design rather than system access. Its rules are strict and will override a different brand style if you ask for one, so review the output before using it in a real brand project.
- No scripts are included or run.
- No network access is required.
- Licence: Apache-2.0.
- Read the example.html and SKILL.md files yourself before installing, as you would with any skill.
What people use it for
- Pitching a product idea with a calm, premium landing-page mockup
- Building a marketing homepage prototype that a front-end developer can refine
- Creating a consistent demo site for a SaaS concept in an hour rather than a full design cycle
- Showing stakeholders what a premium consumer product page could look like
Frequently asked questions
Is the Soft Premium Web Prototype skill free?
The skill is licensed under Apache-2.0, as stated on this page. Check the licence text in the download for the full terms before using it commercially.
What do I need to use this skill?
The listing says it requires nothing beyond the agent itself. It does not run scripts and does not use the network, and it is delivered as SKILL.md and example.html.
Where do I put the skill files?
Put the unzipped folder in ~/.claude/skills/ for personal use or in .claude/skills/ in a project. In the Claude apps, you can instead upload it under Settings, Capabilities, Skills.
The agent ignored the skill. What should I check?
Confirm that the folder contains SKILL.md and is in the right location, and that the folder name is web-prototype-taste-soft. Then make the brief more specific, for example by naming the premium finish you want.
Can I use this skill for a brand with its own style?
It is not a good fit. The rules are opinionated and include strict bans on fonts, shadows and borders, so they would override a different brand style.
Is this skill suitable for dense dashboards or accessibility-critical apps?
Probably not. The listing warns that heavy blur, slow motion and low-contrast soft surfaces may hurt usability in those interfaces, so choose a different approach for them.
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
This skill suits designers and front-end developers who want a consistent, calm premium landing-page prototype quickly, especially for a pitch or homepage mockup. Pick something else if your project needs its own brand style, or if it is a dense data tool or an accessibility-critical interface.
Download the skill