Aesthetic Web Design
系统化区分品牌与产品设计,适合需要高辨识度界面的场景。
按专业UI/UX规范为网页、界面或组件提供美学设计指导与方案。
按专业 UI/UX 标准把网页、产品界面或组件做得更美、更好用,涵盖视觉层级、排版、配色、布局、间距、动效、暗黑模式与响应式等要点。用在做网站、落地页、Web 应用、仪表盘或想提升界面品质和转化率时,无需你特意说“设计”也会介入。特别之处是把审美和可用性、商业目标结合,能同时做品牌感与产品级实用界面。
▸ 展开 SKILL.md 英文原文
Apply professional, premium UI/UX design standards when building or styling web interfaces. Use this skill when the user asks to create a website, landing page, web app, dashboard, UI component, or any visual interface — or when they ask to make something look better, more professional, or more beautiful. Covers visual hierarchy, typography, color systems, layout, spacing, motion, dark mode, responsive design, and conversion patterns. Activate even when the user doesn't say "design" — if they're building a web frontend, these standards apply.
帮我安装这个 skill:https://raw.githubusercontent.com/EliasOulkadi/shokunin/master/.pack/skills/aesthetic-web/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/EliasOulkadi/shokunin/master/.pack/skills/aesthetic-web/SKILL.md"## Register Distinction
Every design task is either **Brand** or **Product**.
| Register | Scope | Bar | Approach |
|----------|-------|-----|----------|
| Brand | Marketing, landing pages, campaign surfaces, portfolios, long-form content. Design IS the product. | Distinctiveness. Must stand out from competitors. | Full creative range. Editorial, luxury, brutalist, cinematic — any visual lane. |
| Product | App UI, admin, dashboards, developer tools. Design SERVES the product. | Earned familiarity. Users of Linear, Stripe, Vercel should trust it. | Restrained. Clean. Fast. One palette. Predictable patterns. |
Identify before designing. Priority: (1) task cue ("landing page" vs "dashboard"