AI导哈

设计与多媒体

finesse-ui

mouse-lin/finesse-skill

Build and refine high-craft web interfaces: brand sites, product dashboards and workflows, AI workbenches, commerce, H5/mobile screens, and individual components. Route by purpose, preserve project identity, and audit visual quality, accessibility and motion. Supports Apple-inspired / 苹果风 design through editorial, app and spatial modes with runnable card studies. Use for landing pages, portfolios, dashboards, admin panels, settings, agent consoles, product pages, checkout, mobile app UI, design-system extraction, redesign, typography, color, layout, animation, drag/swipe/sheet interactions and anti-generic iteration. Includes targeted audit, bolder, quieter, soul, diverge, animate, depth, densify, init and document workflows. Excludes backend-only tasks.

  • 1069 次安装
  • 899 星标
  • 收录于

安装命令

npx skills add https://github.com/mouse-lin/finesse-skill --skill finesse-ui

SKILL.md

finesse — Technically Spectacular · Soul-Distinct · Never Cheap

finesse builds two kinds of interface and routes by register (§0):

  • brand — design IS the product: landing pages, brand sites, launches, portfolios, hero pages. Optimize for spectacle + soul + first impression — a real visual engine, an opinionated personality.
  • product — design SERVES the product: dashboards, admin panels, analytics, data tables, app shells, settings. Optimize for clarity + density + usability — and still never cheap.

The through-line is identical: high craft, zero AI-slop. What applies to both is the universal craft floor (tinted neutrals, no #fff/#000, translucent/hairline borders, tinted shadows, contrast floors), the cheapness blacklist (§6), and the pre-flight (§8). What forks is the substrate above that floor and the middle: brand lays the §3 brand substrate (design-dna.md — grain, vignette, display type) and reaches for a hero engine (§4); product lays its own substrate (product-ui.md §0 — surfaces, cards, KPI tiles, density) and reaches for a component system + data viz. A dashboard is a different design language, not a brand page with charts — it does not inherit grain / vignette / giant hero type / dark-default / a hero engine.

Two more registers sit alongside them, and they work differently from each other. commerce (PDP/PLP/cart/checkout) is a hybrid — route it to brand or product by what the specific page is doing. h5 (phone-only screens: app UI, 活动页, mobile PDP, report H5) is a container: it fixes the frame, the safe areas, the thumb hierarchy, and the OS furniture, then wraps one of the other three for the content grammar underneath. A mobile PDP is h5 + commerce; an app dashboard screen is h5 + product. h5 never replaces a content register — it wraps one.

Every rule below is contextual. Nothing fires automatically. Read the brief, set the register, then pull only what fits. A skill that produces the same page for every brief has failed.

Apple design language (optional)

For Apple style / 苹果风, read references/apple-design.md before choosing the substrate or persona. Keep the existing register, add design-language=apple and choose apple-mode=editorial|app|spatial. Its scoped overrides take precedence over conflicting aesthetic defaults below, including pure-black/white bans, mandatory grain/vignette, extreme leading and forced persona/engine rotation. Functional and accessibility gates still apply. Component requests retain component scope. Editorial recipes and seven runnable studies are indexed in references/apple-patterns.md.

How to use this skill