Understand the design. Then build it in Paper.

Work at the correct level

Paper’s hover-selection update makes a normally invisible decision visible: which level of the tree receives the edit? Since June 2026, hovering highlights the top-level layer under the pointer, as in Figma. Double-clicking goes deeper, holding ⌘ reaches the innermost layer, Esc selects the parent and Enter selects the children, and ⌘ + right-click lists every layer under the pointer. A spacing change on a parent affects a relationship; a change on a child affects one object. Those are different design decisions.

Build a frame around a complete idea, then build smaller frames around its internal relationships. A page can contain a header, a content region and a footer. The content region can contain a comparison, and the comparison can contain repeated rows. These names are useful because they explain responsibility. Paper calls every new frame “Frame”, so rename it as soon as it exists by double-clicking its name on the canvas or in the layers panel. “Comparison” tells an agent and a future collaborator more than a column of identical “Frame” rows.

The layers panel lets you audit that structure at a glance. The icon beside each name gives the frame’s type: two columns for a horizontal flex frame, stacked rows for a vertical one, and dashed corners for a freeform frame whose children are placed by coordinates. Collapse all (⌥L, or right-click in the layers list) folds the tree back to its top level, and double-clicking a layer’s icon zooms the canvas to that layer. A tree that reads like an outline of the screen is a sign that the structure is sound.

Make the composition readable before decorating it

Read the canvas in three passes. First, notice the largest shapes: is there a clear primary area? Next, read only headings: do they describe a coherent sequence? Finally, inspect the small labels: can the reader tell what each number or action belongs to? These passes expose different failures. A strong overall silhouette does not compensate for a value with an ambiguous label.

Paper supports each pass. ⌘. hides every panel so the first pass sees only the canvas, and ⇧. shrinks the panels to floating pills when you still need the toolbar and the zoom level. The same thinking scales beyond one screen: pages split a file into chapters, and folders in the dashboard nest several levels deep (Marketing › Social Media › Instagram). Once the structural relationships are right, typography and color can reinforce them, and the organization still makes sense after a label grows or another row is added.

Size is a dependency

Fixed, Fit and Fill answer a simple question: what determines this dimension? A Fixed value follows the designer’s decision. Fit follows the content. Fill follows the space left in the parent. Their usefulness comes from combining them deliberately. In a menu row, the icon can keep a stable width while the label receives the remaining room; the row’s height can follow its content. Paper’s instructions for agents make the same point about repeated rows: give icons and trailing actions fixed-width slots that do not shrink, because gap alone will not line up columns from row to row.

A parent that follows its child and a child that follows its parent can create an unclear sizing relationship. When a layout behaves unexpectedly, read the size badge under the selection, which names each axis’s mode (for example “Fill 267 × Fit 317”), before nudging coordinates. Decide where the available space originates. A page establishes a content width; a row fills that width; its icon keeps its own size; its text uses the space left over. The explanation should be easy to say aloud.

Space between distributes available space among siblings. It does not know which siblings form a conceptual group. If an icon, label and trailing value must become two visual groups, nest the icon and label together first with ⇧A. The outer row can then separate the leading group from the value. This is the central move in the tutorial: correct grouping makes an alignment control produce the intended result.

Exceptions should be visible

Some objects do not belong in normal flow. A close button over the corner of a panel should not push the panel’s content aside. Paper’s example ticks Absolute position on such a button: it leaves the flow and sits on top of the content, but it keeps its default Left and Top constraints, so it drifts when the banner is resized until you pin it to the right edge. Treat that as an explicit exception, not a general way to position every item on the screen.

Paper keeps these choices inspectable. The layers panel marks rows, columns and freeform frames with different icons, and since September 2026 a flex layout written by an agent opens in the same Flex panel, ready to edit. A small, meaningful nested frame can remove several arbitrary offsets. When a row can explain where its dimensions come from, the same structure becomes easier to duplicate, adapt to a narrower surface and translate into implementation.

Build a visual grid with available tools

As of early October 2026, Paper's public roadmap lists native CSS Grid authoring as planned, not shipped. You can still design a precise visual grid with nested Flex frames: a vertical Flex stack of rows, each row a horizontal Flex frame whose children are the lanes. Grid layouts that arrive from code, such as a section captured with Snapshot, still render on the canvas, and the September 2026 release added alignment and gap support for grid elements. The shipped page may use browser Grid, Flex or a semantic table; the design principle is the same shared geometry.

Decide the lanes once, then repeat them. If each row chooses its own label width, the apparent grid drifts as soon as one label grows. Give every value lane the same Fixed width and let the label take the remaining width with Fill. Paper's instructions for agents make the same point in CSS terms: gap alone won't align columns across rows, so repeated rows need fixed-width slots that do not shrink. Use padding to keep values off the edges of their lane, and reserve larger gaps for transitions between genuinely different groups.

Once alignment supplies the order, emphasis can stay selective: a pale band behind one group, or a single accent color for the value that matters. Check the order before you add emphasis. In Paper, hold ⌥ with a layer selected to read its distances to the parent's edges, and read the size badge under the selection, which names each axis's mode, as in "Fill 387.33 × Fit 201.92". The menu under the file name toggles Layout guides (⇧G), Show pixel grid (⌘') and Snap to pixel (⇧⌘').

Test the row that makes the layout uncomfortable

A grid should be judged with a long label, an absent value and a value with an unfamiliar number of digits. These cases reveal whether the apparent order comes from the structure or from conveniently short content. An absent observation should keep its place and show an explicit missing state. Removing the cell destroys the comparison precisely where explanation is most needed.

Paper's Snapshot iteration tutorial shows why that review belongs on the canvas. An agent added a third column to a captured section: it changed the grid from repeat(2, 1fr) to three columns, duplicated a column and reported a passing checkpoint review, including that all three columns sat properly on the grid. The new column still had an empty image area, and the media frames kept a fixed height of 324 that now left too much empty space. The presenter fixed each frame by double-clicking its bottom edge to set Fit. Duplication preserves structure, but it also creates new relationships that only a look at the actual rows can confirm.

Flow and constraints solve different problems

Flex governs relationships among participating siblings. Constraints govern how a layer outside that flow responds when its parent is resized: a child of a frame without Flex, or a child with Absolute position ticked inside a Flex frame. Paper's constraints tutorial makes the distinction tangible with a corner close button and a centered modal. The close button belongs to an edge relationship; the modal belongs to a center relationship. Neither behavior is described by where it happens to sit in one screenshot.

The tutorial also distinguishes Center, Left + Right and Stretch. Center keeps the child's width and lets the space on each side change. Left + Right keeps the distance to both edges, so the child's width changes instead. Stretch scales the width and the side distances together, and Paper then shows the width as a percentage. These are different promises. For a reading panel, comfortable content dimensions usually matter more than proportional scaling.

A design can require a structural change beyond simple resizing. Two comparison columns may become labeled groups; a toolbar may wrap; a long description may move beneath its title. Paper frames at selected widths can specify those outcomes, and since August 2026 a Flex frame can also wrap its children onto new lines. The frames are design evidence for the implementation, not proof that the running application already switches correctly between them.

Use demanding content at more than one width

Compare the same content under different space conditions. Keep the wording constant while changing width, so the effect of the layout rule remains visible. In Paper, duplicate the frame and drag the copy's edge or type a new W. When an agent creates artboards through the Paper MCP, its default sizes are Desktop 1440 × 900, Tablet 768 × 1024 and Mobile 390 × 844. Then replace one short label with a longer one. If both variables change at once, it becomes difficult to tell whether an improvement came from the structure or from friendlier content.

A narrow layout also changes interaction. A persistent navigation bar occupies valuable height but keeps the user oriented; a floating control may cover the last item unless the content accounts for it. These are part of the responsive composition. The most useful review therefore follows a complete task from its entry point to its result, including the last row and the state after an action.

Typography creates hierarchy through relationships

A useful type system does more than list font sizes. It explains how a page title differs from a section heading, how a label differs from a paragraph, and how a number behaves next to its unit. Weight, line height, width and spacing all participate. Enlarging a title can establish emphasis, but reducing competing emphasis elsewhere can achieve the same clarity with less visual noise.

Compact interfaces need especially deliberate typography. Smaller text does not automatically create useful density; it can simply make weak hierarchy harder to read. Keep the primary values easy to find, give labels sufficient contrast and use restrained differences between secondary levels. Paper’s agent guide (October 2026) asks for higher contrast below 16 px and accepts text of 12 px or smaller only in dense productivity interfaces or as an all-caps effect. Variable fonts help with restraint: a weight of 560 can sit between Medium and Semibold instead of forcing a jump.

Paper’s CSS-variable tutorial imports an existing vocabulary, has an agent draw a style guide board and then checks the bindings on real layers. A specimen is valuable because it shows roles together. An action color that looks fine alone may be too similar to success; a muted label may disappear on a tinted surface. Design the relationships in a visible specimen before applying them throughout a flow.

A binding should have an intended scope

Changing a token inside a Paper file updates every layer bound to it, whether you edit it in the Theme tab or an agent calls set_tokens. Copying a theme to another file creates an independent set, so cross-file consistency requires a deliberate synchronization process. This distinction affects how you organize experiments. A separate file can protect an alternative, while a shared token inside one file can intentionally keep several screens moving together.

Detaching is the usual way a binding loses its scope. A detached fill becomes a literal value that later token edits skip, which is exactly what an agent warned about after Paper’s team recolored two elements by hand. Before you change a token, select the frame and read Selection colors in the right panel: bound colors appear as token names, stray ones as hex values, each with a usage count. Typography deserves the same discipline. A font available in Paper must also be available to the implemented product; otherwise line breaks and component heights may change even when the exported sizes are identical.

Choose an encoding that supports comparison

For values that must be compared precisely, position on a shared scale is a strong starting point. An aligned bar or dot can reveal an ordering faster than differently sized cards containing large numbers. The number remains useful as a label; the chart supplies the relationship. In Paper a bar is an ordinary frame or SVG shape, so the scale is something you set deliberately: one ratio from value to width, applied to every row.

Use a consistent scale when neighboring panels invite direct comparison. If one panel silently changes its range, identical bar lengths can represent different values. A target marker should look different from an observed amount. An uncertainty interval should look different from a decorative background band. The reader should be able to distinguish measurement, reference and qualification without memorizing an elaborate legend.

Color should carry a limited, stable responsibility. It can distinguish a scenario from a baseline or mark the selected series, but adding a unique color to every label often creates more decoding work. A mostly neutral field makes selective emphasis easier to read. Paper’s agent guide (October 2026) makes the same argument: one intense color moment is stronger than five, and secondary colors are meant for cases such as categories, complex data visualization and success, warning or error states. Store series colors as tokens so every chart keeps the same meanings.

Keep the caveat next to the claim

A synthetic example can teach a chart without pretending to be a result. Label it where the values are read, not only in a distant footer. Likewise, a conditional estimate needs its condition near the conclusion. The visual design should make the limitation part of the reading experience rather than a small-print correction to an overconfident headline.

Review the labels with the chart hidden, then the chart with its explanatory paragraph hidden; in Paper, Show / hide (⇧⌘H) on each group makes this a quick test. Each should contribute something useful. When an agent builds the chart, ask for the review Paper already expects of agents: a screenshot after each section with a verdict on spacing, typography, contrast and alignment. Add two questions of your own: is the scale shared, and does every caveat sit next to its number?

Treat generated geometry as editable material

Paper’s Quiver tutorial demonstrates a complete idea: describe the subject, style, colors and restraint, generate an SVG, then refine it by hand. The presenter hides three unwanted polygons, sets two mismatched stroke widths (0.28 and 0.99) to 1, deletes a stray path, trims sections of another and skips about five more minutes of editing. The useful distinction is between requesting a plausible starting image and accepting a finished asset. Generation solves the first problem; design judgment still solves the second.

An SVG contains shapes that can be inspected independently. In Paper, an SVG layer is a container that behaves like a frame and clips what it holds; the Path layers inside it are the editable geometry, each with its own fill and stroke. A click selects the container, a double-click selects one path, and a second double-click shows that path’s nodes. Moving a point is not the same as moving the asset. After an edit, inspect the container’s bounds: a node dragged past them is cut off at the edge.

Look at the silhouette before the details. A good small asset should remain recognizable when its internal decoration is temporarily ignored. Then inspect stroke consistency and the spaces between shapes. A cramped gap may close when the image is reduced; a thin stroke may disappear against the intended background. Generated output makes this check necessary: the tutorial’s illustration arrived as 3 polygons and about 20 separate paths with uneven strokes. The final composition, rather than the enlarged editing view, is the meaningful test.

Keep the asset and the layout independent

Use a vector for geometry that benefits from remaining editable, such as a logo or an icon. Keep ordinary interface text as text and structural regions as frames. Flattening the entire screen into an image can preserve its current appearance while discarding the relationships needed for later edits, accessibility and implementation. Choose the representation according to what must remain changeable.

In Paper, the container is the asset’s boundary. Containers that Paper creates, whether you draw with the pen or generate with Create SVG, start at 256 × 256 with Clip content on, which is rarely the size the asset will be seen at. With a path selected, dragging the container’s edges changes only the bounds, so you can tighten them around the artwork or give a clipped node room; the paths keep their size. As of September 2026, true crop, scale and resize for SVGs, boolean operations and snapping to other geometry were still roadmap items, so judge placement by eye at the real size, on the real background. The best edit often removes a distraction instead of adding another effect.

Distinguish import from invention

Normal copy and paste moves a Figma selection into Paper: ⌘C in Figma, ⌘V in Paper. Frames keep their names, sizes and structure, and images follow once you connect a Figma account that can open the file. Components, instances and variables arrive detached, masks are hidden, and effects with no CSS equivalent, such as noise, glass or gradient strokes, do not come across. HTML paste has a different boundary: only inline styles transfer, and class names and stylesheet rules are discarded. The important question is therefore not whether an import succeeded, but which decisions survived in an editable form and which now need to be restated.

An image has a different role. A screenshot is useful evidence of appearance, but its pixels do not explain the original layout hierarchy. A generated image is new material produced from a brief, rather than a record of the existing product. Place these materials on the canvas with clear purposes: reference, editable baseline, or proposed asset. Confusing those purposes makes a visually convincing file harder to trust.

Image generation benefits from a concrete composition brief: subject, materials, surface, light, palette, aspect ratio and the space reserved for nearby copy. In Paper, Create image (⇧⌘I) sends that brief to the model you pick, and selecting the result makes it context, so the next prompt changes one thing while the rest of the scene holds. This is a production method rather than a promise about a particular model’s accuracy: in Paper’s own demo, a lighting change also removed a wall. If the result must describe a real place, person or product, verify it against appropriate evidence instead of accepting plausible detail as fact.

Inspect the transfer before redesigning it

A missing image can make a captured layout look cleaner while actually making it incomplete. A substituted font can change every line break. Compare the imported baseline with the source before you start improving it, so translation errors do not become mistaken design decisions. When a capture from a local development server arrives without its images, the usual cause is cross-origin blocking. Paper’s troubleshooting page says to allow the origin https://app.paper.design in the server’s CORS settings and, on Vite 6 and later, which blocks /@fs/ paths regardless of CORS, to serve assets from public/.

Keep the three kinds of material apart on the canvas. Leave the original capture untouched and duplicate it (⌘D) for the working version. Rename generic layers: Snapshot names its frames Frame, and Figma pastes keep names such as Property 1=Variant4. Generated images are named from their prompt, and their Image fill records the model and the pixel size, which tells you whether the resolution suits the display size. Then explain each intentional difference. That creates a clear line from the product you observed to the proposal you want implemented.

Tune the relationship, not the isolated preview

Paper’s logo-animation tutorial captures a real site footer with Paper Snapshot, places a Gem Smoke version of the brand’s wordmark inside it and tunes the smoke beside the footer’s links. That is the decisive move. A dramatic mark in an empty preview can become distracting on a real page. Assess the amount of motion, the brightness of the busiest region and the contrast of nearby text together, because they compete for the same attention. In that demo the fixes were concrete: Outer glow at 0% so no smoke crossed the links, less Inner glow, and Clip content on the frame so the smoke stopped at its edge.

Change one parameter family at a time: first the input and its fit, then the palette, then the form (shape, proportion, distortion, contour), and only then motion and surface detail such as Speed and grain. Paper’s own rebuild of a reference follows this order: nearest preset, then colors sampled from the reference, then Speed, Scale, Softness and swirl. Each change has a visible cause. If several controls move together, an attractive result is hard to reproduce or refine. A habit from the same tutorials helps: push a slider to its extreme to see its range, then settle.

Some controls depend on others. The Lens Distortion reference makes Spread the master control of its color split: at 0, the other color controls do nothing. Waves’ frequency needs some amplitude, and Halftone Dots loses the image entirely at zero Contrast. An apparently inactive slider may therefore be working as specified. Keep the selected effect’s parameter reference nearby, and save the settings with the input image and final dimensions. A preset without its context is only a partial description of the result.

Separate visual atmosphere from evidence

Names such as Heatmap, Waves or Voronoi describe aesthetic shader families, not data bindings. A heat-like color treatment does not become a measured intensity map because the name sounds scientific, and Voronoi cells are not real spatial partitions. Keep decorative effects outside charts and evidence-bearing text. Give the expressive material one bounded region, such as a cover, hero or footer band, and keep the information on a stable, opaque surface beside it.

Motion also needs a quiet version in the implemented product. The shader package pauses animation when a shader leaves the viewport or its tab is hidden, but it does not react to a reduced-motion preference on its own, so keep an accepted still (speed 0 at a chosen frame) and switch to it explicitly. Record the package version with the preset: in version 0.0.81 Paper Texture was rebuilt, its old folds became crumples, its old crumples became wrinkles, contrast and fade were removed, and old seeds no longer match visually. Recheck the composition after an upgrade, not only whether the code runs.

Read before writing

A useful first request asks the agent to identify the target file and describe the selected frame’s structure without editing it. One of Paper’s tutorials opens with a question as plain as “Are we connected to the Paper MCP?”, and the agent answers with the open file, page, artboard and its size, node count and fonts, read through tools such as get_basic_info and get_selection. That small read establishes shared context. If the description refers to a different page or misses the intended component, correct the target before requesting a redesign.

Since August 2026, Paper Desktop opens files as tabs, and agents can work in any open file, including tabs in the background. That makes explicit targeting more important. Name the file (“In the Learn Section file in Paper, …”) or paste its link from Copy link (⌘L); select a frame before pressing ⌘L to link that frame instead. “The active Paper file” means the tab in front when the agent starts, so stay on it until the agent is working. A good task names the file, page or frame and the outcome in one sentence: “In the comparison frame of this file, align the existing values without changing the labels.” That sentence is a briefing pattern, not a special command syntax.

Comments make a target even more precise. Press C, click a layer and write the request; the comment stays pinned to that layer, so a short prompt such as “I left comments on this frame. Check it out and implement those changes.” gives the agent both the list and the locations. The agent can list and read comment threads and mark them resolved, but it cannot write comments; that part stays with you.

After reading, the agent can make a bounded structural or style change. Good write scope describes the smallest coherent unit that owns the problem: adjusting a row’s layout is clearer than requesting a whole-screen redesign to repair one column. For bigger transformations, Paper’s tutorials duplicate the frame first and have the agent change the copy. When the agent brings in content or values from elsewhere, such as a document, a Slack canvas or the codebase’s CSS variables, name the source and say whether the values are real or placeholders.

Make the result inspectable

Ask for the resulting frame to be inspected after the change. A tool response reports that an operation happened; the rendered frame shows whether it produced the intended design. In Paper’s Claude Code tutorial, the agent finishes by taking a screenshot of its artboard and running a review checkpoint on spacing, typography, contrast, alignment, clipping and repetition before it summarizes. Ask for the same, plus an account of anything missing or unresolved, rather than treating successful execution as proof of visual quality.

Paper shows where an agent is working: animated dots replace the file icon on its tab, a dotted pattern runs above the artboard it is editing, and its avatar joins the presence row at the top of the right panel. The agent removes the artboard marker when it finishes (the finish_working_on_nodes tool). Check the frame yourself, then close the loop: have the agent resolve the comment threads it fully addressed and leave the rest open with a reason.

The agent does not track edits you make by hand. Paper’s advice is to have it re-read the canvas before the next request. A useful handoff names the target, the changed properties and the evidence used to judge them, which gives the next collaborator, or the next session, a clear starting point. The loop also works away from the desk: with Remote Control in Claude Code, the screenshots the agent sends back are how you review from a phone.

Assign ownership at the level of possible conflict

Give each design agent a named destination file, page or artboard. Separate artboards help keep alternative layouts independent, but they do not isolate every resource. A token edited in a file changes every layer bound to it in that file. A renamed frame or an edited reference can alter the context another agent is reading. The ownership rule must therefore cover shared inputs as well as visible output regions.

Paper shows where agents work: a robot avatar joins the presence row, and animated dots mark the file's tab and the artboard being edited. It does not reserve anything. In the Conductor session a second agent restyled the frames while the first was still writing them. It worked there, with a prompt that named the frames and the exact change, but steering the first agent would have been simpler. A practical arrangement is one owner for shared tokens and one agent per artboard or file, with the others proposing token changes rather than applying them.

Code work needs its own isolation. In Conductor, each new workspace is an isolated copy of the repository on its own branch, so coding agents do not collide, while a new tab inside a workspace shares that copy. Neither separates Paper: every agent writes to the same open files through Paper Desktop. When several files are open as tabs, name the file in every prompt or paste its link, so that parallel means independent work rather than simultaneous writes to the same material.

Integrate through a design decision

Compare alternatives against the same question and the same required actions. A layout can be visually attractive while dropping a necessary control: in one Paper demonstration a variant lost its add button although the agent's own checkpoint review passed it. Review the complete flow and identify the particular traits worth retaining: one hierarchy, one navigation treatment, one useful explanation. Ask for a composed revision with those named traits instead of the ambiguous instruction to combine everything good.

That review is the point where parallel work becomes one design. Keep the alternatives on the canvas long enough to explain the decision, then mark the accepted frame by name. An implementation agent should receive that exact name, not choose among unresolved drafts. In the Conductor session the presenters pasted the title “Conductor Roadmap — 02 Network Map” into the prompt; the agent read the frame with get_screenshot and get_jsx and compared a headless screenshot of its page with the Paper frame. Later feedback stays located: comments on the canvas in Paper, or comments on diff lines in the code tool.

Ground the pattern in an existing product

The repository-to-canvas tutorial brings a music app’s existing components and tokens into Paper, explores a new section with real content and returns the chosen result to the codebase. The valuable starting point is the existing product vocabulary. Reusing it preserves familiar behavior: when the new section reached the code, its cards already opened their playlist pages, because they were the app’s own card component.

Be exact about what Paper links today. As of September 2026 the canvas has no native components: Paper announced components on the canvas as coming soon on 28 September, and its public roadmap lists components with slots as coming soon and the use of code components on the canvas as in progress. A duplicate made with ⌘D or ⌥-drag is an independent copy. What stays linked is tokens: change a token in the Theme tab and every layer bound to it in the file updates. A component rebuilt by an agent, or captured with Paper Snapshot, is a set of editable frames, not an instance.

You can still define a reliable pattern today with a canonical frame, named tokens, documented inputs and repeated specimens. Keep the canonical specimen next to demanding variants: the ordinary state, the selected state, long text and unavailable information. These variants are more useful than many nearly identical copies because they reveal the pattern’s limits. If one case needs a different structure, decide whether it is a legitimate variant or a different responsibility that deserves its own component.

Preserve meaning when you repeat

Consistency should make exceptions easier to see. A selected row must remain related to its siblings while being clearly selected. An unavailable value should preserve the comparison lane while explaining its absence. When every state adds another badge, color or panel, the pattern can become harder to read despite being technically comprehensive.

Vary one rule at a time, on a copy. In the tutorial, the agent duplicated the finished section, named the copy after its single change (For you section · Grid 112), swapped the 148-pixel covers for 112-pixel ones and reported the cost: nine covers now fit in the row, but longer bylines clip at that size. The original stayed untouched, so the comparison was fair, and the designer kept the larger cards.

Reuse the important rule, not every dimension or sentence. On the code side, the same contract becomes a component’s properties and states; on the canvas, it keeps the design explanation stable until Paper’s native components arrive. Say clearly which relationships the tool enforces (token bindings) and which the workflow maintains (copies, specimens and agent updates).