Skip to content
Get packs

Soft Premium Web Prototype

Builds Apple-style soft, premium landing page prototypes with a defined design system.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent follows a strict visual style when asked for a premium web prototype: warm silver or cream backgrounds, heavy display typography, rounded 'double-bezel' cards, pill buttons with a nested arrow, subtle ambient gradients and smooth spring-like animations. It also avoids a list of common styles (such as Inter font, harsh shadows and pure black) and follows a checklist of required page sections. The included example.html shows a finished template of this look.

Great for

  • Designers who want a consistent premium landing-page look quickly
  • Front-end developers building a marketing or product homepage prototype
  • Teams wanting an 'Apple-like' or calm SaaS aesthetic for a pitch mockup

Skip it if

  • Projects needing a different brand style, since the rules are opinionated and would override it (strict bans on fonts, shadows and borders)
  • Accessibility-critical or dense data interfaces, where heavy blur, slow motion and low-contrast soft surfaces may hurt usability

Try asking

  • “Make a soft premium landing page prototype for a meditation app with a hero, bento grid and footer”
  • “Create an Apple-tier product page mockup for a note-taking tool”
  • “Build a calm SaaS homepage with a floating pill navbar and marquee of customer logos”
Step-by-step guide: how to use Soft Premium Web 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-prototype-taste-soft.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip web-prototype-taste-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

  • Name the product and audience in your request so the agent can fill in copy and layout details the style rules leave open.
  • Ask the agent to open example.html first as a reference for the expected result.
  • Check the Mobile and accessibility points yourself, since the skill's motion and blur rules are not tested for contrast or reduced-motion preferences.

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design 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.