Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Web Prototype — Soft Premium · nexu-io | DecimalAI

frontendby nexu-io

Web Prototype — Soft Premium

nexu-io/web-prototype-taste-soft

Source nexu-io/open-design ↗License Apache-2.0

Apple-tier soft web prototype. Silver/cream canvas, double-bezel cards, button-in-button CTAs, generous squircle radii, spring motion, ambient mesh. Distilled from Leonxlnx/taste-skill `soft-skill` + sections 4–8 of `taste-skill`.

SkillScore72Maintained

Automatic

Frontend / UI pack

Last verified 8/28/2026

What it changes

Passed 18 of 25 test cases with the skill, and 9 of 25 without it.

Without skill36%

With skill72%

Checks it passed that the model alone missed

Sets display heading line-height to 0.96
Uses p-1.5 padding on outer card shell elements
Sets display heading font weight to at least 700

and 11 more in the full report

9 fixed9 passed either way7 still failing0 broke

Pass-rate lift: +36 pp
Tokens: +43%
Agent turns: 0%
Response time: +4%

Model gemini-3.6-flashMeasured 8/28/2026v118 of 25 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/nexu-io-web-prototype-taste-soft/SKILL.md https://app.decimal.ai/s/nexu-io-web-prototype-taste-soft/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add nexu-io-web-prototype-taste-soft, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/nexu-io-web-prototype-taste-soft/ and pins it in .decimal/skills.lock

decimalai skills add nexu-io-web-prototype-taste-soft

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/nexu-io-web-prototype-taste-soft/SKILL.md https://app.decimal.ai/s/nexu-io-web-prototype-taste-soft/SKILL.md

Raw file: /s/nexu-io-web-prototype-taste-soft/SKILL.md ↗ · machine-readable summary at /s/nexu-io-web-prototype-taste-soft.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 9 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 9

Prompt

Build an HTML/CSS snippet for a hero title. Standard Webflow defaults use static 64px font size with default line heights. Write the inline style or Tailwind arbitrary properties for the primary hero header specifying exact clamp sizing, tight line height, and negative letter spacing.

What was checked, without and with the skill
Checked	Without skill	With skill
Sets display heading font size using clamp(48px, 7vw, 96px)	Missed	Passed
Sets display heading line-height to 0.96	Missed	Passed
Sets display heading letter-spacing to -0.035em	Passed	Passed

case-09 · gemini-3.6-flash · 8/28/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md58 linessingle file

Web Prototype — Soft Premium

For briefs that ask for "Apple-like", "Linear-tier", "premium consumer", "calm SaaS", or "$150k agency" finish. The aesthetic is soft, weighty, and obsessive about nested architecture.

Source

Distilled from Leonxlnx/taste-skill — skills/soft-skill/SKILL.md ("Vanguard UI Architect") with the haptic micro-aesthetics, double-bezel architecture, and motion choreography rules. See example.html in this directory for a fully-realized template.

Hard rules

Canvas: silver-grey or warm cream (#F2F2F0 or #FDFBF7). Not pure white.
Type pairing: display in Geist / Plus Jakarta Sans / Cabinet Grotesk at heavy weight, body in the same family, monospace meta in Geist Mono.
Display: clamp(48px, 7vw, 96px), letter-spacing: -0.035em, line-height: 0.96. Heavy weight (700+).
Squircle radii: border-radius: 28px–40px (rounded-[2rem] to rounded-[2.5rem]) on major surfaces.
Double-bezel mandatory: every important card is a wrapper (p-1.5, hairline border, soft outer shadow) containing an inner core with its own background and a concentric smaller radius (e.g., outer 2rem, inner calc(2rem - 0.375rem)).
CTA = button-in-button: primary CTAs are full pills (rounded-full px-6 py-3); the trailing arrow lives inside its own circular wrapper flush-right.
Ambient depth: one slow-drifting radial mesh blob behind hero, opacity ≤ 0.18, pointer-events: none, fixed.
Eyebrow tag above each section header: pill, uppercase mono, letter-spacing: 0.2em, text-[10px].

Banned

Inter, Roboto, Helvetica, Open Sans.
Generic 1px solid gray borders (use border-black/5 / ring-1 ring-black/5).
shadow-md, shadow-lg, hard drop shadows. Only diffuse, wide-spread, low-opacity (0 20px 40px -15px rgba(0,0,0,0.05)).
Edge-to-edge sticky navbars glued to the top. Use a floating glass pill (mt-6 mx-auto w-max rounded-full).
Linear or ease-in-out transitions. Use cubic-bezier(0.32, 0.72, 0, 1) or spring physics.
h-screen (use min-h-[100dvh]).
Animating width / height / top / left. Only transform and opacity.
Pure black #000. Use Zinc-950 / Off-Black.

Required components

Floating-pill navbar with backdrop-blur-2xl.
Asymmetric hero: massive heavy display, eyebrow tag, body lede max-w-[52ch], two CTAs (primary pill with button-in-button arrow + ghost).
Bento grid using the double-bezel pattern; at least one wide card and one tall card.
Feature row with z-axis cascade or split image module.
Marquee strip of customer logos, slow infinite translation (-100% / 20s), pause on hover.
Closing band on a soft inverted surface (deep zinc / espresso).
Footer: monospace meta, hairline above.

Track record

Benchmark

18 / 25

test cases passed, vs 9 / 25 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/8/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

nexu-io / open-design

design-templates/web-prototype-taste-soft/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/8/2026Version v1

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

nexu-io/web-prototype-taste-editorialEditorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`.Close match+50 pp pass-rate lift

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

Web Prototype — Soft Premium

Source

Hard rules

Banned

Required components

Track record

Benchmark

Adoption

SkillSafety

Source

Other skills for the same job

Related skills