Skip to content
Get packs

Apple-Style Soft Prototype

Generates soft, Apple-like prototype layouts with silver/cream canvases, squircle cards and spring hover motion.

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill gives an AI agent a visual style recipe for building a web page prototype with a polished, soft look similar to Apple's product pages. It asks for a silver or cream background with a subtle ambient gradient, cards with a double rounded border and highlight, nested 'button-in-button' call-to-action buttons, and gentle spring-like bounce on hover. It is a design template rather than a tool that does anything on its own.

Great for

  • Designers who want a quick, polished landing-page or app mockup in a soft Apple-inspired style
  • Front-end developers who need a starting point for a desktop-sized (1440px) prototype

Skip it if

  • Production sites that need accessibility-audited, brand-specific design, since the skill only sets a visual mood and does not check contrast or accessibility
  • Anyone expecting it to copy Apple's actual branding or assets; it only imitates a general style

Try asking

  • “Create a desktop prototype of a product landing page in the Apple Soft style”
  • “Build a feature card section with double-bezel cards and a button-in-button call to action”
  • “Mock up a settings screen with a silver canvas and spring hover effects”
Step-by-step guide: how to use Apple-Style Soft PrototypeInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    web-proto-soft.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip web-proto-soft.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip web-proto-soft.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • State the page purpose and sections clearly so the agent can apply the layout rules to real content
  • Ask for a desktop 1440px layout explicitly, since that is the suggested aspect hint
  • Review the output for contrast and readability before sharing it, because the soft palette can look faint

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.