How to use the Apple-Style Soft Prototype agent skill (web-proto-soft)

What is an agent skill, and what does this one do?

An agent skill is a folder of instructions that an AI agent can load when a task matches it. This skill is a visual style recipe for a desktop-sized web page prototype, set at 1440px wide. It is a design template, not a tool that does anything on its own: it has no built-in actions beyond guiding how the agent lays out and styles the page.

The recipe asks for four things: a silver or cream canvas with an ambient mesh background, double-bezel cards with an inner and outer rounded border plus a highlight, button-in-button calls to action, and spring-style motion where hovered elements bounce slightly.

How do you install the web-proto-soft skill?

Download the ZIP file from the skill's page in this directory, then unzip it. The package contains two files: SKILL.md and example.html.

For a personal setup, unzip the folder into ~/.claude/skills/. To limit the skill to one project, unzip it into the .claude/skills/ folder inside that project.

If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.

• Personal: ~/.claude/skills/
• Single project: .claude/skills/ inside the project folder
• Claude apps: Settings → Capabilities → Skills, then upload

How do you trigger the skill with a request?

You do not need a special command. Describe a desktop landing page or app mockup and mention the soft, Apple-inspired look, and the agent can match the request to this skill. Naming the skill directly, as web-proto-soft, also works in most setups.

Be specific about the content. The skill controls the visual style, so tell the agent what the page is for, what sections it needs and what the main call to action says.

• Make a 1440px desktop landing page for a note-taking app in the soft Apple-style look, with a hero, three feature cards and a primary call-to-action button.
• Using web-proto-soft, build a product prototype page for a coffee subscription: silver background, bezel cards, and a button-in-button CTA.

What does it need, and what does it run?

The source lists no required tools or accounts. It does not run scripts and does not use the network. The package contains only the instructions in SKILL.md and an example.html file.

Because the skill only sets a visual mood, it does not check contrast, accessibility or brand rules. Review the output yourself before using it anywhere public.

• Requirements: none listed
• Runs scripts: no
• Uses network: no

What are the limits to keep in mind?

The skill imitates a general soft, Apple-inspired style. It does not copy Apple's branding, logos or assets, and it is not a production design system.

Do not use it as-is for production sites that need accessibility-audited or brand-specific design. Treat the result as a starting point for mockups and prototypes.

• It does not copy Apple's branding or assets.
• It does not check contrast or accessibility.
• It is aimed at a 1440px desktop width.

What tips help you get better results?

Open example.html from the package to see the target look before you prompt. Then ask the agent to follow that style for your own content. Check the layout at 1440px, since that is the size the skill is built for.

• Read example.html first to set expectations.
• Give the agent real copy and section names rather than placeholders.
• Ask for changes one at a time, such as the card style or the CTA, so you can see what each change does.
• Test the hover motion and text contrast yourself before sharing.