No. 153

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7

Monday, October 12, 2026≈ 5 min read

Question 1 of 7

Removed October 8

Lovable cut its pick-a-look step. Your prompt is the brief now.

Lovable no longer shows three design directions before the first build. It reads the look from what you wrote, and only asks about color, type, and layout when you left them open.

The screen that used to come first: pick a direction

Until last week, a visually open prompt stopped here. Try a pick.Picked. Lovable skips this screen now: name the look in your prompt, or answer its follow-up questions.

Question 2 of 7: Today's art direction

What are we building? The Get Started Flow.

A product onboarding page that asks one question per card and nothing it already knows.

The issue is laid out as the first-run flow of a site builder. A sticky progress bar replaces the masthead, every section is a question card with its own step counter, and the hero is the picker Lovable just removed. The apricot dot grid is the builder canvas the flow sits on, and the one violet is kept for state: the current step, a selected answer, the primary button.

Vocabulary

  • step counter
  • question card
  • choice tile
  • conditional follow-up
  • segmented progress
  • marker comp
  • back and next

Question 3 of 7: Tooling

What did Lovable change about the first build?

The three directions are gone

In its October 8 changelog, Lovable removed the three design directions it used to show before building a visually open-ended prompt. It now builds the look straight from your description, and still asks about color, typography, and layout when the prompt leaves the look open.

Older chats keep the direction already chosen, minus the previews. For anyone who writes prompts for clients, the practical change is where the art direction lives: in the first message, not on a screen after it.

The picker asked everyone the same question. The follow-up only asks what you skipped.

Inline text edits land in seconds

A day earlier, Lovable sped up Edit text inline in the preview toolbar: simple copy changes now apply in a few seconds. Text the app builds from data or translates still takes longer. The same builder also pulled brand kits from Canva last month, which we covered in Issue 125.

Question 4 of 7: Technique

Did your canvas effect break in Chrome 155?

Chrome's HTML-in-Canvas API lets a canvas draw real DOM and CSS, so a shader or WebGL scene can use a styled element as a texture instead of a screenshot. The team posted a list of breaking changes landing in Chrome 155, and the origin trial runs through Chrome 160.

Canvas attribute
The boolean layoutsubtree attribute becomes content set to drawable.
WebGPU
copyElementImageToTexture is renamed drawElementImageToTexture, with sourceX-style parameter names and a size object for the destination.
WebGL
texElementImage2D becomes texElementSubImage2D, which takes x and y offsets into a texture you allocate first.
2D context
drawElementImage keeps position and hit-testing in sync on its own; pass preserveElementGeometry to manage it by hand.
<!-- before Chrome 155 -->
<canvas layoutsubtree>…</canvas>

<!-- Chrome 155 and later -->
<canvas content="drawable">…</canvas>

If a hero effect from the trial stopped drawing, the rename is the first place to look.

Question 5 of 7: Workflow

Where does the written direction go in Figma?

Figma's agent left beta on October 6, and the release notes add a piece that rhymes with Lovable's change: library owners can upload markdown guideline files, and the agent reads them whenever that library is enabled.

That puts the art direction in a file the team maintains rather than a choice someone makes per session. Teammates can also watch the agent work on the canvas live. We noted the GA in passing in Issue 152 and covered the same day's naming audits in Issue 150.

Question 6 of 7: Borrow this pattern

Should a form ask about type when the brief already did?

Ask only what the brief left open. Lovable's change is a form pattern you can ship on any intake or onboarding page. Ask one yes-or-no question about whether the person already decided, and only reveal the detailed choices when they say no.

Use it on project inquiry forms, quote builders, and signup flows where most people arrive knowing half the answers. What keeps it honest: the follow-up must be optional to skip, and a decided answer must never trigger it.

Did your brief name a type style?
Then pick a type feel

Switch to Yes and the follow-up folds away. Built with :has() on the checked radio, no script.

Question 7 of 7: Prompt Lab

Want this page for a client? Copy the brief.

Works in Beaver Builder AI, Lovable, v0, Claude, and Figma Make.

Build a "get started" onboarding landing page for a website builder or any product with a setup flow (also works for agency project-inquiry pages and quote builders).

Layout: a light top nav. Under it, a sticky progress bar that doubles as the masthead: the issue or product name on the left, a row of seven segmented step links (rounded 7px rectangles with a 1.5px ink border, step number centred in mono, step 1 filled ink), and the date and reading time on the right as two plain spans with no separators. Below, one centred column about 880px wide of question cards. Each card: warm white #FFF6EF, 1.5px ink border, 16px radius, 40-48px padding, and a top row with a mono "Question N of 7" label on the left and a mini progress of seven small bars on the right, filled violet up to N. Section headings are the question, set in a rounded display face.

Hero card: one hard offset shadow (14px straight down, solid ink, no blur) and no other shadows on the page. A filled ink label, the headline at about 60px and 17ch, a 21px deck, then a fieldset of three choice tiles: real radio inputs styled as white cards with a 3:2 image, a name, and a mono sub-label. The checked tile gets a 3px violet ring. A note below the tiles changes text through :has(input:checked).

Other cards: a setup summary with a style name, an italic one-liner, a paragraph, and filled ink vocabulary labels; news items as h3 plus short paragraphs; one italic pullquote under a 2px ink rule; a two-column dt/dd facts list with mono labels; a dark code snippet; a conditional form demo (a yes/no radio question whose "no" reveals a follow-up fieldset through :has(), no script); the prompt card with a copy button. End with sources, then Back and Next buttons as the issue navigation.

Palette: saturated apricot ground #F4A98C with a dot grid (1px ink dots at 20 percent every 24px), cards #FFF6EF and #FBE7DA, deep violet-black ink #1F1640, one blue-violet accent #4B2FD0 used only for state (current step, selected answer, primary button), plum #5B3A73 for italics. Type: Fredoka 500/600 for display, Instrument Sans for body, JetBrains Mono for labels.

Images: three loose marker renderings of website directions on layout paper (quiet editorial, loud and rounded, dark technical), abstract bars only, no legible text.

Guardrails: body at least 18px with 1.7 line height and 60-70 character lines; WCAG AA on every label against its real surface; radius 7-16px, never pills; hover and focus states at 150ms with a reduced-motion guard; no gradients, no glow, no fake toggles, no left-border accent stripes. On mobile the step bar wraps the meta under the segments, cards go to 20px padding, and two-column blocks stack.

Review and finish

Field note

A form that asks only about what is still undecided respects the person filling it in, and that was true long before a builder learned to do it.

Sources

  1. Lovable changelog: Removed design directions before the first build; Faster inline text editsLovable, October 7 and 8, 2026
  2. HTML-in-Canvas updates: Iterating toward a better Web APIChrome for Developers, September 29, 2026
  3. Figma release notes: The Figma agent is generally availableFigma, October 6, 2026