Selected work, one day only

One npm token puts your private design system inside v0

Vercel's v0 now reads NPM_TOKEN or NPM_RC from a project's environment and installs private packages, so the pages it generates can be built from the components your team already ships. Plus Chrome 153's declarative camera and microphone elements, WebMCP in mcp-handler, and skills that live in Notion.

Fig. 1. The private registry, the token, and the page that gets built from it.

Today's art direction

The Studio Index

A design studio's site on pale citron: a commission panel for the masthead, project-sheet rows, a two-column work list, and cyanotype plates.

Today's news is about a team's own design system reaching the tool that generates its pages, so the page is built the way a design-systems studio would present its work. The masthead is a commission panel, the boxed summary a client sees beside a project image: number, date, reading time, and the one real button on the page. Every section opens with a project-sheet row, a job code and discipline on the left, the title in the middle, the count of deliverables on the right, and the items inside run as a work list with the title in a Bodoni column and the description in a Hanken Grotesk column beside it. Under it all sits an untextured field of cool citron, the ink is Prussian blue, the accent is vermilion, and the plates are cyanotypes, the studio's blueprint medium, so the diagram of the day's story is printed in the same blue as the type.

Commission panel
Project-sheet row
Work list
Cyanotype plate
Brief document
Citron field
Bodoni over Hanken

ADD 132 / 01 Tooling

The system that never left the building

1 deliverable

v0 installs private packages now, and the model never sees the keyVercel changelog, 18 September

Set NPM_TOKEN for a private package on the public registry, or NPM_RC for scoped and custom registries such as GitHub Packages and Artifactory, as a shared environment variable on Vercel, and v0 will install from them when it builds. Credentials can be marked sensitive, and Vercel says v0 never exposes them to the model or writes them to the sandbox filesystem. The integration status shows under Settings and Integrations in v0, and the variables can be scoped to Development or Preview.

The design consequence is the reason this leads a thin day. Until now, a team with a real component library either published it publicly or watched v0 rebuild every button from shadcn defaults. With the registry reachable, the prompt can say use our Button and our PageShell and the generated page inherits the tokens, the spacing scale, and the accessibility work that already shipped, instead of approximating them.

Credentials can be marked sensitive, and v0 never exposes them to the model or writes them to the sandbox filesystem.
Vercel changelog, 18 September 2026

ADD 132 / 02 Technique

Two things the browser now draws for you

2 deliverables

Chrome 153 ships camera and microphone as HTML elementsChrome for Developers, 8 September

Chrome 153 adds declarative camera and microphone elements. Each renders its own capture control, drawn and locked down by the browser, and the permission prompt only fires after a real click, following the earlier usermedia element. For a designer, that is one more capture control you no longer fake in CSS, and one less custom permission flow to design around.

WebMCP lands in Vercel's mcp-handler behind one script tagVercel changelog, 18 September

WebMCP is the proposed standard for a page to expose tools to the agent running in the visitor's browser, and mcp-handler 2.2 now supports it experimentally. A site adds a script tag pointing at its MCP endpoint and registers tools in a small config, and calls are proxied back to the server as the signed-in user, with no separate OAuth dance. If your site already has an MCP server, its tools can now sit in the page the same way a form does.

ADD 132 / 03 Workflow

Skills that live where the team writes

1 deliverable

The skills CLI installs agent skills straight from NotionVercel changelog, 17 September

Version 1.7 of the skills CLI can add a skill from a Notion page or database, using Notion's permissions to decide who may pull it. A design team's house rules, the ones that already live in a Notion page about spacing, tone, and component usage, can now be the skill an agent loads before it builds, with no Git repository in between.

Borrow this pattern

The project-sheet row

Open every section of a studio, agency, or portfolio page with the same one-line sheet: a job code on the left, the discipline next to it, the section title in the middle, and a count of what is inside on the right. It is a case-study index turned into a section marker, and it lets a visitor scan the whole page as a list of work before reading any of it.

Use it where a page is really a list of separate pieces: a services page, an archive, a changelog, a course syllabus. Keep it honest by making the count real (it must change when an item is added) and the code derivable (issue, section, nothing invented), and by keeping the row to one line of monospace with the title as the only serif, so it reads as a label and never competes with the work below it.

Cyanotype in white on Prussian blue: one interface card with two text bars and a button, and a small key resting beside it — Fig. 2. One component and the key that lets the tool use it.

StudioArt Direction Daily

ProjectADD 132, The Studio Index

Works inBeaver Builder AI, v0, Lovable

Prompt Lab

Hand this brief to a page-generation tool and it should return today's art direction as a working studio or agency landing page. It targets Beaver Builder AI, v0, Lovable, Bolt, Claude Code, and similar tools.

Build a one-page website for a small design-systems studio. Page archetype: a portfolio/studio site with a hero, a selected-work list, one process section, a project brief, and a footer. Do not build a generic template; follow this structure exactly.

Ground and palette: a flat pale cool citron background #ECF0CE with no texture, gradient, or pattern. Panels are a lighter citron #F5F7E1 with a 1px Prussian blue hairline border at 30 percent opacity. All text is Prussian blue #163A5C. The single accent is vermilion #E2452A, used only for the count numbers, link hover, and the button hover. Small muted labels use #55645B. Never use pure black, neon, glow, or gradients.

Type: Bodoni Moda (Google Fonts) for the headline at 64 to 74px with tight line height (1.02), for section titles at 30px, for work-item titles at 26px, and italic 400 for one pullquote. Hanken Grotesk for all body copy at 19px with line height 1.7, maximum 68 characters per line, never justified. DM Mono at 13.5px, uppercase, letter spacing 0.06em, for labels, codes, dates, and the nav. Load real hosted fonts; do not fall back to system fonts.

Nav: a single row, studio name on the left in Bodoni, three text links on the right in DM Mono uppercase. One hairline below.

Hero: a one-line DM Mono kicker, then the headline in Bodoni spanning the full width (maximum 18 characters per line), then a 22px Hanken deck under it, maximum 58 characters per line. Below the deck, a two-column row (2fr / 1fr, 28px gap). Left: a framed image plate, a panel with 14px padding holding a cyanotype-style diagram image (white line drawing on deep Prussian blue) and a DM Mono caption. Right: the commission panel, a bordered panel holding a small uppercase label "Commission", a very large Bodoni number (the project or issue number, 78px), then a definition list of five label/value rows separated by hairlines (date, duration, studio, idiom, deliverables), and at the bottom one full-width button, Prussian blue fill with citron text in DM Mono uppercase, that turns vermilion on hover and links to the brief. This panel is the only call to action on the page.

Sections: three work sections. Each opens with a project-sheet row: a 2px Prussian blue top rule, then one line in DM Mono uppercase laid out as a four-column grid (120px code such as "ADD 132 / 01", 150px discipline such as "Tooling", the section title in Bodoni 30px, and a right-aligned count such as "2 deliverables" with the number in vermilion). Inside each section, items are a work list: each item is a two-column grid (1fr / 2fr) separated by hairlines, the item title in Bodoni 26px on the left with a DM Mono source-and-date line under it, and one or two paragraphs of Hanken body on the right with one inline link.

Between the first and second sections, one pullquote: Bodoni italic at 34px, maximum 30 characters per line, with hairlines above and below and a DM Mono attribution line.

Process section: a 2px top rule, a small label "Borrow this pattern", a Bodoni 30px title, two paragraphs, and a square framed image plate on the right (320px column) with a caption.

Brief section: a bordered citron panel with a letterhead row (three DM Mono label/value cells: studio, project, works in) separated by a hairline from the body, which holds a Bodoni title and a white monospace document block with a hairline border and 3px radius.

Footer: a hairline-bounded previous/index/next row in DM Mono, then a short colophon in 15.5px muted text.

Rules: hover states on every link and the button with 150ms easing and a prefers-reduced-motion guard; no card shadows anywhere; radius at most 4px; no accent left-border stripes; no icon chips or dot separators; no fake search fields or toggles; the counts in the project-sheet rows must equal the real number of items; images carry no legible text; all small text meets WCAG AA on its actual background.

Field note

Who keeps the reference shelf

Eric Bailey published a short argument today that CSS-Tricks could be a co-op: a corporation deprioritises infrastructure that is not central to its strategy, while a cooperative can exist to preserve it. On a day when the news is about wiring a private component library into a generation tool, it is worth noticing that the public library every one of those tools learned CSS from is still owned by a hosting company.

Credits

Sources

v0 now reads npm credentials from shared environment variables (Vercel changelog, 18 September 2026)
New in Chrome 153 (Chrome for Developers, 8 September 2026)
WebMCP support now available in mcp-handler (Vercel changelog, 18 September 2026)
The skills CLI now supports Notion hosted skills (Vercel changelog, 17 September 2026)
CSS-Tricks could be a co-op (Eric Bailey, 18 September 2026)
Beaver Builder AI (publisher's product, listed in the Prompt Lab)