Create soft, polished web prototypes with silver or cream backgrounds, nested card borders, rounded surfaces, and carefully specified motion. The skill defines page sections, buttons, navigation, and mobile layouts for a consistent visual style.
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`.
This skill creates web prototypes with soft surfaces and a calm color palette. It combines silver-gray or warm cream backgrounds with cards built from an outer frame and an inner surface, generous rounded corners, and primary buttons with an arrow inside a circular frame. It specifies a floating capsule-shaped navigation bar, a grid mixing large and small cards, a horizontally scrolling logo strip, and a footer.
Use it to explore a calm SaaS website or a website for a consumer product. It helps you consider spacing, typography, card construction, and motion during interaction together with the color palette, keeping these choices consistent throughout the prototype.
The skill sets requirements and restrictions for fonts, colors, shadows, and motion. Reveal effects use IntersectionObserver, while movement mainly uses transforms and opacity. Below a screen width of 768px, the layout becomes a single column, with rotations and overlaps removed.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.
The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.
Review the instructions the agent will receive before you install.
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.
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.
#F2F2F0 or #FDFBF7). Not pure white.clamp(48px, 7vw, 96px), letter-spacing: -0.035em, line-height: 0.96. Heavy weight (700+).border-radius: 28px–40px (rounded-[2rem] to rounded-[2.5rem]) on major surfaces.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)).rounded-full px-6 py-3); the trailing arrow lives inside its own circular wrapper flush-right.opacity ≤ 0.18, pointer-events: none, fixed.letter-spacing: 0.2em, text-[10px].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)).mt-6 mx-auto w-max rounded-full).ease-in-out transitions. Use cubic-bezier(0.32, 0.72, 0, 1) or spring physics.h-screen (use min-h-[100dvh]).width / height / top / left. Only transform and opacity.#000. Use Zinc-950 / Off-Black.max-w-[52ch], two CTAs (primary pill with button-in-button arrow + ghost).-100% / 20s), pause on hover.transition: transform 700ms cubic-bezier(0.32,0.72,0,1) minimum.0.98 on :active, inner trailing-icon circle translates (+1px, -1px) and scale(1.05).translateY(16px) blur(8px) opacity(0) → translateY(0) blur(0) opacity(1). IntersectionObserver only.transform: translateX(-50%) over 30s linear infinite, applied to a duplicated track.backdrop-blur + hairline ringpy-24min-h-[100dvh], never 100vhlinear / ease-in-outNo reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.
Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.
Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.
Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.
Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.
Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.