Art Direction Daily

This morning's letter

Remix a Framer template and its house rules come with it

Framer Skills are saved instructions its agent reads before it builds: your components, your styles, your CMS habits. They stay with a project when someone remixes it.

Today's art direction

The Evening Letter

A creator newsletter landing page on dark slate, where every section arrives as an email.

The page sells a subscription by showing a sample issue inline. The subscribe card doubles as the masthead, and each section opens with the header an email client would show: who sent it, when, and the subject line as the heading.

Caslon display carries the subject lines and a sturdy screen serif carries the reading; mono is kept for header keys only. One rose madder accent marks the button, the labels, and the links.

  • Subscribe card as masthead
  • Email header rows
  • Subject line as h2
  • Letter panel
  • Margin list
  • Plain-text version
From
Framer
Sent
Tue 22 Sep
To
Framer teams
Tooling
Subject

Teach the canvas your house rules

Framer Skills

Framer now lets a team save reusable instructions for its agent: how pages should be designed, how CMS content is structured, and what to check before calling a page done. You type /skills in the agent to create or update one, and it stays editable like any other project file.

The agent pulls a skill in on its own when the skill's description matches the task, so a well-named skill works without anyone remembering to ask for it.

A starter shelf of skills

Framer published example skills to copy: a design-system skill, a CMS content skill, a launch check, an accessibility check, an SEO check, and one that strips filler and stock AI phrasing from copy.

From
Framer
Sent
Tue 22 Sep
To
Template makers
Technique
Subject

Point at the parts instead of describing them

Reference, then rule

A skill can mention real parts of the project with @pages, @components, and @styles, so the instruction says "build it like the pricing page" and names the page rather than paraphrasing it. The result lands on the canvas, where you still move and fix what the agent made.

The skill travels with the remix

Skills stay with a project when someone remixes it. A template maker can now ship the guidance for adding a new page or a new CMS entry in the house style, instead of padding the template with sample pages that buyers delete on day one.

Quoted
A skill can capture how pages should be designed, how CMS content should be structured, and what the agent should check before finishing.
From Jurre Houtkamp, on the Framer blog
From
Webflow
Sent
Thu 24 Sep
To
Conf attendees
Workflow
Subject

A room full of papercuts, fixed while you watched

The Papercuts Room

At Webflow Conf 2026, attendees submitted the small frictions they put up with, voted on them, and watched product, engineering, and design teams triage the top requests and start building fixes live. Webflow's recap lists what shipped.

Why small fixes now ship

Webflow credits AI-native workflows that let more teammates put changes into production, which freed a weekly block it calls Builder Wednesday. It follows the Interactions work covered in issue 136, from the other end of the product: less spectacle, fewer extra clicks.

Borrow this pattern

Preview the product in its own form

On a newsletter landing page, skip the feature grid. Show a sample issue inline and open each section with the header the reader's email client would show: sender, date, and a subject line that serves as the heading. The page proves what arrives by being it.

Use it for
Newsletters, digest emails, changelog subscriptions, any product whose output is a message.
Keep it honest
Real senders and real dates in the header rows; no fake inbox chrome, no unread counts, no dead reply buttons.
Gouache diagram on dark slate: a blank page wireframe with a small swatch card clipped to its corner, and a rose arrow to a rearranged copy of the page still carrying the same card.

Prompt Lab

Plain-text version

Paste into Claude, v0, Lovable, Framer, Webflow, or Beaver Builder AI to build this page for a client's newsletter.

Build a single-page landing page for a creator's email newsletter. It sells a free subscription by showing a sample issue inline. Register: expressive, a quiet evening edition on a dark cool ground. It must work as a real page a client could ship.

Palette: slate ground #161C2C; panels #1E2638 and #252F46; warm off-white text #ECE5DA; muted text #B9BDCB; one rose madder accent #E4577F for the button, labels, and link underlines; a softer rose #EDA9BD for italic text; pale ochre #D8B26C for small header keys only.

Type: Libre Caslon Display for the headline and every subject line; Literata for body text at 19px, line height 1.7, lines of 60 to 70 characters; Martian Mono at 12 to 13px uppercase for header keys only (From, Sent, To, Subject); other kickers are small Literata italic. No other faces.

Layout:
1. Top bar: newsletter name left, three text links right.
2. Hero on a 3fr/2fr grid. Left: a small italic kicker, a Caslon headline of about 15 characters per line, a two-sentence deck. Right: a subscribe card that doubles as the masthead: a round accent seal holding the issue number, the newsletter name and one-line promise, three label rows (Issue, Sent, Reading time), then one filled button to subscribe and one outlined link. Use real links (RSS, a signup URL); do not fake an email input.
3. A full-width illustration under the hero with a two-part caption.
4. An "about this letter" block on the same 3fr/2fr grid: a short explanation left, a hairline list of what each issue contains right, set in the display face.
5. Sample sections as letter panels, weighted like an inbox: the lead letter on a lighter panel with a larger subject, the last one a quiet outlined brief. Each panel opens with an email header: a row of label/value pairs (From, Sent, To) with a small filled category tag at the far right, then a Subject row where the subject line is the h2. The panel body is a 3fr/2fr grid: hairline-separated items (h3 plus one or two sentences with one inline link) on the left, and on the right a recessed margin list of short named facts.
6. One italic pullquote between panels, indented to the header-key column.
7. A "borrow this" or "why subscribe" block with two label rows and a square illustration.
8. A "plain-text version" panel with a header bar for any long copy block.
9. Footer: numbered sources, previous/next links, colophon.

Components: subscribe card, header rows, subject-line h2, letter panels, margin lists, category tags with solid fills.

Guardrails: body at least 18px; WCAG AA contrast on every label against its real surface; one shadow only (the subscribe card); radius 12 to 14px on panels, 8px on buttons, 4px on tags, no pill shapes; no neon, glow, or gradients on the dark ground; no cyan on black; no accent left-border stripes; no fake inbox chrome (unread counts, star icons, dead reply buttons); hover and focus states on real links with 150ms easing and a prefers-reduced-motion guard. Illustrations: flat overhead gouache diagrams on the same slate, no legible text inside images. On mobile, stack every grid to one column and let the header rows wrap into two columns.

Field note

A skill is a style guide written for a reader who follows it literally. Brief it the way you would brief a new designer on day one, with the pages to copy named outright.

Sources

  1. Introducing Skills for the Framer Agent, Framer, 22 September 2026
  2. Framer Skills: reusable workflows for agents, Framer
  3. It's the little things that count, Webflow, 24 September 2026
  4. Who approved that bounce? In Webflow, the Interactions panel knows, Art Direction Daily issue 136