mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-18 09:06:53 +03:00
Generalize air rules beyond compression
Spacing drift toward the genre's stock density runs both ways: an airy comp ships cramped and a dense comp ships loose. Reword the three air rules to bind either direction (mirroring GROUND's warmer-or-cooler form) and drop bug-specific row/cell vocabulary for element heights and paddings, covering one-off elements like CTAs. AI-assisted change (Cursor), prepared under maintainer direction. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -90,7 +90,7 @@ For `shape`, return the selected direction to [shape.md](shape.md) and stop befo
|
||||
|
||||
## 6. Build with full commitment
|
||||
|
||||
When an approved comp exists, the comp is king, and the build happens in phases. The comp is a spatial contract, not a mood board: only the user can downgrade its authority, in explicit words, and difficulty never infers a downgrade. Phase one is reproduction: rebuild the comp at its own breakpoint until a screenshot at the comp's width and height overlaps it near pixel-perfectly, materials, components, elevation, assets, and implied design language included. Exactly three concessions exist: fonts (the closest obtainable face), icons (exact match unless the user already chose an icon library), and genuine defects in the generated comp such as spelling errors. Everything else must match, and models systematically believe their HTML, CSS, and SVG recreation succeeded when it did not, so the overlap comparison is the authority, never your conviction: set the screenshot beside the freshly reopened comp image at identical dimensions after every region, never beside your memory of it, and when a region keeps losing that comparison, stop recreating it in code and produce it as a rendered asset composited into the page. The comp also outranks every written record of it: when the recorded brief or inventory commits to less than the comp shows, a softer texture, a sparser field, a sculpted plate reduced to flat CSS, correct the record upward to the comp; qualifiers like subtle, restrained, and low-contrast, and counts rounded down to a comfortable fraction, are how approved materials die between approval and build. A produced material must then survive to the screen: a texture buried under a nearly opaque color wash ships the wash, not the material, so judge every material by the screenshot beside the comp, never by the stylesheet. The page ground gets that comparison by number, not by eye: sample the build screenshot's field and set its hex against the comp value the brief records (sampled from the comp itself when the brief lacks one), and when a texture or tile paints over the base token, measure the net on-screen value, because the eye files every warm drift under the same word cream and the number is what catches it. <!-- rule:skill-ground-by-number --> Air is a quantity like density: hold the build's row heights, cell padding, and section gaps against the ratios the brief records, taking the build's numbers from the browser that captured the screenshots, where element boxes are exact, never from squinting at the capture. The tolerance is generous, because the documented failure is content packed into half the relative height the comp gave it, not a few percent of drift; a page that fits the comp's content in visibly less room is a different design however complete it is. <!-- rule:skill-air-is-a-quantity --> Only when reproduction holds does phase two begin: static regions that should live become animated or interactive, reveals and motion are added, then responsiveness across the surface's devices. Where the comp does not cover the whole surface, continue building the remainder inside the comp's recorded world and design language; a component the comp never shows inherits the recorded system's corner language, line weights, and materials, and may not introduce container styles, border weights, or chrome the comp never uses. <!-- rule:skill-comp-is-king -->
|
||||
When an approved comp exists, the comp is king, and the build happens in phases. The comp is a spatial contract, not a mood board: only the user can downgrade its authority, in explicit words, and difficulty never infers a downgrade. Phase one is reproduction: rebuild the comp at its own breakpoint until a screenshot at the comp's width and height overlaps it near pixel-perfectly, materials, components, elevation, assets, and implied design language included. Exactly three concessions exist: fonts (the closest obtainable face), icons (exact match unless the user already chose an icon library), and genuine defects in the generated comp such as spelling errors. Everything else must match, and models systematically believe their HTML, CSS, and SVG recreation succeeded when it did not, so the overlap comparison is the authority, never your conviction: set the screenshot beside the freshly reopened comp image at identical dimensions after every region, never beside your memory of it, and when a region keeps losing that comparison, stop recreating it in code and produce it as a rendered asset composited into the page. The comp also outranks every written record of it: when the recorded brief or inventory commits to less than the comp shows, a softer texture, a sparser field, a sculpted plate reduced to flat CSS, correct the record upward to the comp; qualifiers like subtle, restrained, and low-contrast, and counts rounded down to a comfortable fraction, are how approved materials die between approval and build. A produced material must then survive to the screen: a texture buried under a nearly opaque color wash ships the wash, not the material, so judge every material by the screenshot beside the comp, never by the stylesheet. The page ground gets that comparison by number, not by eye: sample the build screenshot's field and set its hex against the comp value the brief records (sampled from the comp itself when the brief lacks one), and when a texture or tile paints over the base token, measure the net on-screen value, because the eye files every warm drift under the same word cream and the number is what catches it. <!-- rule:skill-ground-by-number --> Air is a quantity like density: hold the build's element heights, paddings, and section gaps against the ratios the brief records, taking the build's numbers from the browser that captured the screenshots, where element boxes are exact, never from squinting at the capture. The tolerance is generous, because the documented failure is wholesale, content given half or double the room the comp gave it, not a few percent of drift; a page whose air visibly differs from the comp's in either direction is a different design however complete the content. <!-- rule:skill-air-is-a-quantity --> Only when reproduction holds does phase two begin: static regions that should live become animated or interactive, reveals and motion are added, then responsiveness across the surface's devices. Where the comp does not cover the whole surface, continue building the remainder inside the comp's recorded world and design language; a component the comp never shows inherits the recorded system's corner language, line weights, and materials, and may not introduce container styles, border weights, or chrome the comp never uses. <!-- rule:skill-comp-is-king -->
|
||||
|
||||
Build the assigned direction, not a safer interpretation of it. The form supplies structure, reading order, component conventions, and native motion; the product supplies every fact. Commit every atom: nav, buttons, inputs, and links are rebuilt in the form's vocabulary, and a stock component inside a committed form is a lapse. Land the first build fully committed; committing is the hard part, and the passes that follow exist to make the committed thing clear and effective, never to dilute it. In unattended work, the safe rendition is the known risk. <!-- rule:skill-commit-every-atom -->
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ After approval, record the choice where tools can find it: the approved comp's p
|
||||
|
||||
Before building, read the approved comp as a design system and record it in the brief: component grammar, corner language, line weights, elevation treatment, and the type ramp. Everything the comp does not show gets built from this record; without it the fallback is the model's stock kit of square boxes, 1px grids, bento cells, and hard shadows. Then inventory the comp's major visible ingredients in writing (a short table in the surface brief or working notes; the finish reviewer audits shipped assets against it) and choose an implementation medium for each: semantic HTML/CSS/SVG, existing project asset, generated raster, sourced raster, icon library, canvas/WebGL, or accepted omission. The same inventory names the comp's compositional commitments: navigation items and icons, headline levels and their scale relationship, signature geometry such as seams, masks, and overlaps, and each section's arrangement and density. The primary action gets its own row with its own medium: when the comp dissolves, stamps, erodes, or otherwise physically works the main CTA, that treatment is signature material on the page's most important element, and shrinking it to a border trick is the compliance-token version of commitment. An element never written down is the element the build silently drops; the direction contract's 150 words cannot carry this list, so it lives here.
|
||||
|
||||
The record is sampled, never estimated: read the comp's page **ground** and each dominant field's actual hex from its pixels (ImageMagick, Python with PIL, any pixel-reading tool on the machine) and write the values into the same record. An adjective is a direction, not a record; cream and paper cover everything from near-white to beige, and the rendition prior fills that range from the warm end. Sampled values supersede the palette chips on the decision and composition cards: those were authored before this comp existed, and a chip that disagrees with the comp's pixels is a draft the approval retired. The same record carries the comp's **air**, read as ratios rather than pixel measurements: each repeating element's height and padding as rough multiples of its own type size (a board row about three type-heights tall), and section gaps and gutters as fractions of the comp's width. Builds regress spacing toward the stock density of the element's genre, a display-scale row shipping as a cramped table row, and a ratio never written down is the ratio the build silently halves.
|
||||
The record is sampled, never estimated: read the comp's page **ground** and each dominant field's actual hex from its pixels (ImageMagick, Python with PIL, any pixel-reading tool on the machine) and write the values into the same record. An adjective is a direction, not a record; cream and paper cover everything from near-white to beige, and the rendition prior fills that range from the warm end. Sampled values supersede the palette chips on the decision and composition cards: those were authored before this comp existed, and a chip that disagrees with the comp's pixels is a draft the approval retired. The same record carries the comp's **air**, read as ratios rather than pixel measurements: the heights and paddings of key elements as rough multiples of their own type size, and section gaps and gutters as fractions of the comp's width. Builds regress spacing toward the stock density of each element's genre, an airy comp shipping cramped and a dense one shipping loose, and a ratio never written down is the ratio the build silently replaces with its default.
|
||||
|
||||
The medium column is where an approved design most often dies, so it obeys a gate: the medium is decided by what the comp region shows, never by what feels buildable in the current stack. A human figure, a product object, machinery, or any material with lighting and depth is raster whatever the stack; so is any texture by name alone: woven cloth, paper grain, fabric, leather, brushed metal need no depth argument, because a CSS gradient is not a texture medium and "layered CSS textures" is not a medium at all. Writing "silhouette" for a photographic figure, or "CSS" for a sculpted panel's finish, is not a medium choice; it is the quiet deletion of the approved design, and it is how a comp full of physical material becomes a flat page with the same section order. Style does not move this boundary: a comp region with perspective, shading, figure drawing, or dense mechanical detail is illustration however line-drawn it looks, and no build session can author illustration as vectors, so it regenerates as raster like any photograph. Authored SVG covers what a session can specify exactly (diagrams with countable elements, controls, flat shape systems) and ends where drawing skill begins; an instruction-manual world keeps its illustrations as line-art illustrations, not diagrams. Produce such regions by regenerating them cleanly, with the approved comp and its embedded prompt as the reference for a fresh render at asset resolution; never crop pixels out of the comp itself, whose effective resolution sits far below asset grade. Dropping an image-native region is a scope decision the user makes at the approval point, never a silent flattening after it. Generated imagery is a material, not a claim: evidence rules bind assertions, specs, testimonials, and photographs presented as real, never render fidelity; "no photography on hand" forbids fake proof, not an illustrated hero.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user