Design & Motion · leonxlnx/taste-skill

high-end-visual-design

Name: high-end-visual-design
Author: leonxlnx/taste-skill

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The entire skill is a pure prompt instruction file (single-file SKILL.md, with no scripts or assets). It compiles 'high-end design' into executable rules using a persona and absolute directives: first establishing the 'Vanguard_UI_Architect' persona with designated goals, then shutting down anti-patterns via hard-fail bans.

skills/soft-skill/SKILL.md

**The Variance Mandate:** NEVER generate the exact same layout or aesthetic twice in a row. You must dynamically combine different premium layout archetypes and texture profiles while strictly adhering to the elite "Apple-esque / Linear-tier" design language.

'NEVER…twice in a row' directly encodes anti-repetition as a hard constraint—one of the core mechanisms combating homogenised model outputs.

A negative list (ABSOLUTE ZERO) caps the baseline: if any 'AI defaults' across the five categories of typography, icons, borders/shadows, layouts, or motion appear, the output is considered an instant failure, systematically eliminating sources of a cheap aesthetic.

skills/soft-skill/SKILL.md

If your generated code includes ANY of the following, the design instantly fails: - **Banned Fonts:** Inter, Roboto, Arial, Open Sans, Helvetica. (Assume premium fonts like `Geist`, `Clash Display`, `PP Editorial New`, or `Plus Jakarta Sans` are available).

The quote reflects the original introductory directive plus the initial ban (two consecutive lines), followed by parallel bullets detailing Banned Icons/Borders/Layouts/Motion, etc. What is happening here: models inherently tend to output Inter + Lucide + gray borders + symmetrical grids; the list directly counters statistical defaults. 'Assume … are available' delegates typography decisions to the host project's assets, as the skill itself loads no fonts.

Positive generation is driven by a 'Combinatorial Mutation Engine': select one Vibe and one Layout, emphasizing context-based randomization to prevent repetitive outputs, with each layout featuring built-in mobile collapse fallback rules.

skills/soft-skill/SKILL.md

Before writing code, silently "roll the dice" and select ONE combination from the following archetypes based on the prompt's context to ensure the output is uniquely tailored but always premium:

Section 3 provides 3 vibes (Ethereal Glass / Editorial Luxury / Soft Structuralism) and 3 layouts (Asymmetrical Bento / Z-Axis Cascade / Editorial Split), stipulating that screens <768px must collapse into a single w-full column—balancing the cost of the mutation engine with mobile override rules.

Component-level aesthetics are hardcoded using concrete Tailwind utility classes: Double-Bezel (nested outer shell + inner core), Button-in-Button trailing badges, and eyebrow badges all provide class-level templates.

skills/soft-skill/SKILL.md

Never place a premium card, image, or container flatly on the background. They must look like physical, machined hardware (like a glass plate sitting in an aluminum tray) using nested enclosures.

Right below, Outer Shell / Inner Core sections outline specific implementations like p-1.5, rounded-[2rem], ring-1 ring-black/5, and inset highlights; translating 'expensive' into copyable structural syntax rather than abstract adjectives.

Motion is strictly governed by real-world physics (mass/spring): default transitions are banned in favor of uniform custom cubic-bezier curves, with scripted choreographies for navigation, buttons, and entrances (stagger, morph, magnetic hover).

skills/soft-skill/SKILL.md

Never use default transitions. All motion must simulate real-world mass and spring physics. Use custom cubic-beziers (e.g., `transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]`).

Specific choreographies like 'fluid morphing from hamburger to X' and 'full-screen glass overlay menu + staggered mask reveal for links' are detailed, while implementation remains confined to standard frontend stacks (HTML/React/Tailwind classes).

Performance guardrails stand alongside implementation discipline (transform/opacity-only, backdrop-blur restricted to fixed/sticky, z-index layering, noise layers with pointer-events-none) to prevent showmanship from dragging down mobile performance.

skills/soft-skill/SKILL.md

Never animate `top`, `left`, `width`, or `height`. Animate exclusively via `transform` and `opacity`. Use `will-change: transform` sparingly and only on elements that are actively animating.

Engineering constraints accompany the 'high-end' narrative, specifically targeting the 'looks good but lags' failure mode; Section 5C explicitly mandates that scroll listening must use IntersectionObserver or Framer Motion's whileInView, banning window scroll listeners.

Delivery concludes with an execution protocol plus an 11-item pre-output checklist matrix, ensuring uniform pixel-perfect React/Tailwind/HTML output with no generic fallbacks allowed.

skills/soft-skill/SKILL.md

**[OUTPUT]** Deliver flawless, pixel-perfect React/Tailwind/HTML code. Do not include basic, generic fallbacks.

Section 7's five-step flow (SILENT THOUGHT→SCAFFOLD→ARCHITECT→CHOREOGRAPH→OUTPUT) and Section 8's checklist enforce self-auditing before final output—a standard procedural gating technique for pure prompt skills.

2Core Capabilities

01Full definition of high-end/agency-grade design systems: typography, whitespace scale (py-24~40), shadows, card structures, and micro-interactions specified down to exact values and classes

02Hard bans on AI defaults: 18+ banned patterns across 5 categories, where any violation fails the entire output

03Vibe × Layout combinatorial mutation engine (3×3 options) + mobile collapse rules per layout

04Double-Bezel nested component syntax (outer shell + inner core dual backgrounds and border-radii)

05Physics-based motion choreography: custom cubic-bezier, fluid hamburger menu, stagger mask reveals, magnetic hover

06Performance discipline: transform/opacity-only animations, blur restricted to fixed/sticky, structured z-index layering

07Delivery gating: 11-item pre-output checklist matrix (banned patterns audit / bezel / whitespace / bezier / collapse / GPU)

3External Dependencies

Kind	Dependency / Endpoint
package	Framer Motion
package	Phosphor Light / Remix Line 图标库
package	Geist / Clash Display / PP Editorial New / Plus Jakarta Sans 字体

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt directives and rule texts without script execution or external impact

Audit Notes: Pure directive single-file skill: no script execution, no outbound network requests, no credential reading, and no file writing (generated code is written by the host agent per task, within the host's authorized scope). The only considerations are typography/library assumptions that might lead generated code to reference external links, alongside host model prompt adherence, neither of which constitutes a code-level risk.

5Second-Pass Verification

[ok] 目录资产面（含隐藏/未跟踪文件） — git ls-files + ls -A 双查：该 skill 目录仅 1 个文件 SKILL.md，无 scripts/references/模板/数据/隐藏文件，无可执行代码。
[ok] 执行类 token 扫描 — 逐文件扫描 bash/exec/child_process/curl/wget/fetch/axios/process.env/API_KEY/.env/fs./writeFile/.github 等零命中（brutalist 一处 'sans-serifs.' 单词结尾 fs. 为误报，人工复核排除）。
[ok] 引文逐条 grep -F 字节复核 — 本 JSON 所用全部 quote 均以 grep -F 在 pin commit 工作树中逐条验证存在，无 paraphrase 冒充。
[ok] 元数据与 pin 核对 — 本地 git HEAD == 任务 pin ccbc15639c97057cbfcf32ecebc38ef716e4bb37（README 显示该提交为 docs/sponsor 修订 #102，2026-08-24）；GitHub API 实查 stars=85698、MIT、pushed_at=2026-08-24T15:23:56Z。frontmatter name 与任务给定名一致。
[ok] 功能声明 vs 实际能力夸大检查 — description 声称均由 SKILL.md 正文纯 prompt 机制兑现，无脚本可调用、无越界承诺（详见本文件 how_it_works 引文）。
[ok] description『make a website feel expensive』的实现机制 — 由 Section 2 禁令 + Section 4 双 bezel/按钮嵌套 + Section 5 物理动效具体兑现；98 行全文均为该目标服务，无与声明相悖内容。
[ok] 『Framer Motion』仅作建议、非强制依赖 — 原文为『use IntersectionObserver or Framer Motion's whileInView』——二选一的或然表述，未强制引入库；output 层始终是标准 React/Tailwind/HTML。
[ok] 移动端安全：变异布局是否可能破坏响应式 — 每种布局均配 Mobile Collapse 规则且 Section 8 清单第 8 项复查 <768px 单列塌陷，风险被显式对冲。

6Verdict & Scenarios

Translates 'high-end aesthetic' into actionable, atomic rules: typography, border-radii, shadows, whitespace, and motion are fully quantified, leaving no aesthetic interpretation to the model.

Dual guardrails against homogenization: NEVER-twice hard constraint + randomized combinatorial engine, paired with built-in mobile collapse fallbacks to ensure diversity without sacrificing usability.

Balanced engineering discipline and aesthetics: GPU-safe animations, blur scope limits, and z-index layering are codified into the same specification, avoiding the 'looks good but lags' trap.

Closed-loop delivery control: 11-item pre-output review matrix + five-step execution protocol, anchored by a '$150k agency build' standard for acceptance.

Best for: Ideal for brand-new frontend deliveries requiring an explicit 'high-end/agency-grade (Apple-esque / Linear-tier aesthetic)': greenfield React/Tailwind/HTML tasks including landing pages, SaaS/AI product sites, portfolios, and brand showcases; single-file pure prompt design allows pasting directly into Claude Code, Codex, Cursor, or ChatGPT.

Not for: Not suitable for incremental refactoring of existing codebases (choose redesign-existing-projects instead; this skill lacks audit/compatibility rules); not suitable for specialized minimal editorial or industrial brutalist styles (choose minimalist-ui or industrial-brutalist-ui); not suitable for corporate environments constrained to default typography/icon systems; not suitable for users expecting built-in build or validation scripts—it only outputs code proposals and executes no tools.

Install Agent-Ready

① Verified Mirror 2026-09-09

Option A · Direct DownloadDownload high-end-visual-design.tar.gz

sha256: c04ed91fdd2f03c8…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 3cca18b368.