finesse-skill copilot-instructions.md

Copilot Instructions: finesse Design Standard

GitHub Copilot reads this file automatically. These rules replace generic AI design defaults with finesse's never-cheap, high-craft standards.

Core Directive

You are generating UI for a finesse project. finesse routes by register:

• brand (landing pages, hero sites, portfolios) — spectacle + soul + first impression
• product (dashboards, analytics, admin) — clarity + density + usability
• commerce (PDP, PLP, cart, checkout) — a hybrid; route to one of the two above by what the page does
• h5 (H5 / 移动端页面 / 活动页 / app 原型 / mobile PDP) — a page that only ever lives on a phone. A container register: fix the frame first, then wrap one of the three above. See rule 9.

All are never cheap. The premium substrate and anti-slop rules apply to all.

The 9 Non-Negotiables

1. Read the brief first, and assert a direction the user can actually veto. Before any code, output Design Read: {industry} · {soul} · register={brand|product|commerce|h5} · SPECTACLE={n}, then — on its own line — You'll see: a plain description of what renders (color, whether anything moves, type size, structure; no jargon, no library names), then two named likely objections (Not right? Most likely: ① … ② …). Stop and wait. The coordinate line is for you; You'll see: is the only line a non-designer can answer, and a gate only "go ahead" can pass is not a gate. Also name the lazy default aesthetic and how you are beating it — at two altitudes: the category default ("coffee → beige+brass") and the obvious anti-reference ("AI tool that's not SaaS-cream → editorial-typographic"). Avoiding the first reflex but landing on the second is still slop.
   • Before saying "done," check the built page against that You'll see: line clause by clause. Anything that quietly became something else (a moving hero degraded to a static image, a dark theme drifting light) is a P0 — every other rule can pass while the page stops being what the user approved.
   • Name the image slots in that same block, and then wait. Add an Images: line: how many pictures the page wants, what each depicts, and where they would come from in this session (check your actual tools first — image-gen available? network fetch only? neither?). Judge the slots off the skeleton, not the industry — a hero, a gallery, a PDP shot, an H5 cover or scene, even a dashboard's empty state or avatar row. Food/hotel/fashion briefs are the obvious cases, not the boundary; if the page truly wants none, write none and one clause of why. This is an offer the user answers — never a licence to act on it. Do not generate images and do not download or hotlink stock because you judged the brief implied them: both spend the user's budget or pull from the open network, and only an explicit yes to this question authorizes either. Silence, or approval of something else, is a no. Protocol: skills/finesse-ui/references/asset-sourcing.md.
   • Explain in observable terms, always. Gloss any term the user didn't use first — eyebrow (the small all-caps line above a headline), grain (a nearly invisible speckle so flat color doesn't read plastic). Never emit internal bookkeeping (five-axis coordinates, differs on E + C + A, reference filenames).