Structural screen design at wireframe fidelity: the grayscale kit +
viewer chrome, fidelity doctrine (idea boards -> mid-fi -> prototype),
annotation layer, eval suite (100% doctrine compliance vs 58%
baseline), and the site chapter with skill-generated examples.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- how-to-use gains the /wireframe chapter in Wren's arc (organize ->
wireframe -> articulate): Nearby's posting-mechanism idea board and
the Photo-first flow, with the annotation record quoted from the
generated notes
- The examples are real wireframes generated by the skill itself and
lifted verbatim into WireframeBoard.astro — never hand-edit; the
component and stylesheets say to regenerate and re-extract instead
- wireframe-kit.css: synced copy of the skill's design-system.css; the
kit's namespaced tokens let the site's [data-theme] theme the frames
with no JavaScript. wireframe-examples.css: the artifacts' own
per-artifact CSS plus the annotation marker restated in kit tokens
- Site-side scaffolding only in global.css: illustration scale (70%
zoom), artifact-convention plates above frames, section-header
treatment on the example headings, and guards so the site's display
font and dark-mode 300 weight never leak into wireframe content
- showcase.ts: wireframe registered under Experience Design
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Two impeccable critique passes on the presentation chrome (26 -> 29) plus
doctrine corrections, all in source and embedded verbatim by artifacts:
- Callout component (.callout neutral/accent/error — severity via glyph +
copy, never hue), gl-info glyph, .text-stack identity unit
- Review flow: plate click opens that frame in slides, grid scroll restored,
view + frame mirror into location.hash (deep-linkable), bounds clamp with
disabled arrows — never wrap
- Prototype is flow-shaped: prev steps back through visited screens, Restart
returns to the flow entry, sequential paging hidden; wired triggers join
the tab order (Enter/Space), unwired mock controls leave it; dead taps
flash a hairline acknowledgment; hovered triggers show the same ring
- Stage: frame page-centers clear of the rail; per-view sentence-case hints;
navigator groups name + position left, controls right; plates drop their
duplicate position in stage views
- Stage voice: h1 title + mono provenance line (Intent /wireframe - date -
rung); active view tab inverts; designed focus rings on all chrome
- A11y: plates are h3s, markers announce as notes, slide position is
aria-live, dark annotation indigo + stage-ink numerals clear AA
- Theme: reviewer's saved choice > authored data-theme pin > OS; swatch
leads with current mode; persisted via localStorage
- Type scale compressed from the top: 16/20 - 18/24 - 22/28 (body tiers and
the 11px floor untouched)
- Idea boards are a clean grid: no notes rail, no decision note — the board
itself is the decision record; caption tops align via subgrid
- Stage stays bare: blueprint field tried and removed
- Styleguide: spacing scale as label column + bars, scroll-spy index,
favicon, sg fixes
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Plates read screen name + position only — WIREFRAME on every plate was
chrome noise; the board title and filename already carry the stage.
The .frame-rung span and its style leave the template and viewer.css;
the done-looking-artifact defense now leans on the artifact's own
naming and saying it out loud.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Type scale drops one more point per rung: t-caption 11/16, t-small
13/20, t-body 14/20, t-heading 17/24, t-title 21/28, t-display 27/36;
the floor moves to 11px. Buttons and chips lose one padding token —
.btn sp-4 -> sp-3, .btn-sm sp-3 -> sp-2, .btn-lg sp-6 -> sp-5, .chip
sp-4 -> sp-3 — while the spacing scale itself and control heights
(32/40/48) stay untouched.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The kit's type scale was reading slightly large; every rung drops one
grid-locked step: t-caption 12/16, t-small 14/20, t-body 15/20,
t-heading 18/24, t-title 22/28, t-display 28/36. The legibility floor
moves 13px -> 12px with it — captions are the only rung at the floor.
SKILL.md scale doctrine, wren's token law, and the styleguide specimen
captions updated to match.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
In grid view a section's note rail no longer stacks below the frames:
any section with notes becomes a two-column grid — frames left, notes
right in a hairline-separated sidebar matching the slides rail
(minmax(220px, 300px), border-left, sp-6 inset). Collapses back under
the frames below 900px. SKILL.md grid doctrine and wren's annotation
layer updated to match.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The slideshow navigator moves from a centered row below the stage to
the section header line above it: section name on the left (the
section's own label hides in slides view), prev/next + bare position
on the right, one hairline row. The stage grid collapses to a single
row; viewer.js writes the section name into .slide-section and the
position indicator drops the now-adjacent section name.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The slide rail showed every note in the section regardless of which
frame was active. Now each frame's notes live in a .note-group
(data-for names the frame id) headed by a .note-frame line; markers
number per wireframe, restarting at 1 in each frame. Grid shows every
group as the section's record; slides shows only the active frame's
group (viewer.js toggles). Section-level notes — an idea board's
decision record — sit outside any group and always show.
Doctrine written into SKILL.md layer 3 + structure template (including
the marker-anchoring rule) and wren.md.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Slides view was the grid page with frames hidden: a tall mobile screen
ran past the viewport (nav below the fold) and the frame + notes floated
unstructured on the backdrop. Now the page stops scrolling and becomes
header / stage / nav:
- the active frame centers in the stage and scales DOWN to fit whole
(never up) — viewer.js computes --slide-scale per slide and on resize
- the notes rail is a bounded column with its own scroll and a hairline
rail border; below 900px it drops under the stage capped at 30vh
- prototype rides the same fitted stage, annotations hidden as before
Doctrine written into SKILL.md (slideshow/prototype view bullets:
'a frame must never run off the bottom of the screen') and wren.md.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Fidelity = scope, not abstraction: lo-fi is the idea vignette (real-UI
fragment, staged, captioned), mid-fi is the complete interactive screen,
prototype is a view
- Embedded CSS/JS blocks dropped for read-and-embed-verbatim of
references/design-system.css + viewer.css + viewer.js (new — extracted
viewer behavior incl. switch toggling)
- Layer 2 rewritten onto the kit: palette with accent + error exception,
token law, type floors, drawn glyphs, component baseline, elevation and
loading doctrine
- build.sh: copilot copies all reference files (cp *.md died on the
all-asset references dir); cursor inlines css/js assets into the parent
.mdc as fenced blocks
- wren.md wireframing section + intent routing line synced
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Step 1 of the design-system-first rebuild: skills/wireframe/references/
becomes the load-bearing home (a deliberate break from the inline-only
convention — read-and-embed, decided 2026-06-04).
- design-system.css: 4px absolute token scale (spacing 4-92, heights,
icons, radii, grid-locked type with legible floors), 5-role grayscale
ramp + Intent indigo accent (primary actions/selection) + single
semantic error exception, drawn SVG glyph set (no text-character
controls), full component baseline with real hover/focus/press/
disabled/error/loading states, switch as button[role=switch],
elevation = scrim + hairline (no glow), idea-vignette lo-fi model
(fidelity = scope: vignettes crop to one idea, wireframes are full
screens, same kit at natural size)
- viewer.css: site-language chrome, sidebar section index, slideshow/
prototype views
- styleguide.html: the acceptance-test page — every token and
component, every state, both themes; critiqued via impeccable
(27/40) and all P0-P3 findings fixed
SKILL.md does NOT consume these yet — rewiring is the next step.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Wireframes are built from native button/input/textarea/select elements,
never divs painted as controls. Inputs focus and accept typing, buttons
hover and press, chips toggle, tabs react. States live in the ramp:
hover = surface (or opacity on filled), focus = 2px secondary-ink ring,
press = border tone. Everything is real; it's just grayscale. wren
restated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Mid-fi is a grayscale version of the complete product screen, not an
enlarged thumbnail. New test: screenshot the real product, desaturate,
strip brand type — same amount of stuff in the same places. Vocabulary
gains avatars, chips, and tab/nav bars (CSS + conventions table). wren
restated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The plate floats above each frame as a separate chrome caption (canvas-
tool style) — no shared border or background, so a screen header inside
a wireframe can never be mistaken for chrome. Card styling moves to the
wireframe surface itself.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Mid-fi wireframes are realistic and detailed UI designs that show
full-size screen structure with realistic content, clear and simple
typography, and gray boxes for images. The hi-fi name is retired —
grayscale structural work is mid-fi; hi-fi conventionally implies
styled. Thumbnail ladder bullet synced to the silent-structure
vocabulary; mid-fi added to triggers. wren restated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Board title in General Sans 700 (-0.02em, lh 1.1, 20px), section labels
at the site's 14px mono treatment, notes rail on the site's small-text
leading. Wireframe content gets an explicit neutral system-ui stack —
brand typography belongs to the chrome layer, never to content. Fonts
referenced by name with system fallbacks; nothing loads from a CDN.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Stage/chrome tokens become the site's cool-tinted neutrals (#fafafc/
#18182b bg, #d8d8e4/#2a2a44 borders, #65657a/#8888a8 muted ink), 8px
card radius, chrome-fg for title and active tab. Chrome stays
monochrome — the site indigo remains exclusive to the annotation layer.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Lo-fi and full-page wireframes never share a page — they serve
different project stages. One self-contained file per rung; the lo-fi
artifact persists as the decision record (considered & rejected)
- Theme control restyled: borderless half-tone-swatch button separated
from the view-tab group — a stage-mode switch, not a view
- wren restatement kept in sync
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Prototype reworked: no hotspot overlays — a third view mode where the
wireframes themselves are the prototype; data-go lives on the real
trigger elements, annotations hide, Esc exits
- Thumbnails: pure miniature structure, no meta labels — if a zone needs
'CTA' written on it, the structure isn't communicating
- Type bumped to reading sizes throughout: wireframe scale 22-28/16-18/
15/12-13, notes rail 14px, chrome 11-14px
- wren restatement kept in sync
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Figma/pencil: ask light or dark up front; single-theme canvases use the
chosen ramp column throughout
- HTML: chrome gains a Theme toggle (initialized from OS preference);
dark ramp moves from prefers-color-scheme to body[data-theme]
- Thumbnails: ~200/120px with miniature structure in zones (text bars,
media blocks, button slabs) instead of bare labeled boxes
- Full-page: structural type scale, credible component sizing, list-row
and nav conventions
- Media placeholders: surface-filled gray blocks, crossed lines removed
- wren restatement kept in sync
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replaces the representational page-mockup glyph with the family's
geometric grammar: one screen frame, a heavy partition vector with a
terminal resolution front, hairline zone divisions and registration
points behind it, a faint unresolved dot field ahead. Chosen from six
candidates reviewed live.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The brand mark's central frame now represents /intent itself; the ring
excludes it and gains /wireframe (systems cluster, 3-6-4-3). Verified by
rendering the component on a scratch page: 16 terminals, assertion holds.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Ghaida Zahran