Pular para o conteúdo
← Back to Skalablog

Published article

Claude Design + Seedance 2.5: AI Notion Graphics

ClaudeNotionAnthropic

AI Notion graphics stay consistent when a locked design system sits underneath two different generators. In the workflow shown by the Skai Generated channel, Claude Design writes the visual rulebook, then Seedance 2.5 handles the shots that need real weight, and every render references the same frames so nothing drifts between styles.

The two-tool split that keeps AI Notion graphics consistent

AI Notion graphics can be split across two tools when a fixed design system governs both: Claude Design handles fast, flat typography and overlays, while Seedance 2.5 animates static frames that need physics and overshoot. The shared rulebook is what stops one scene looking like a different channel from the next.

The workflow comes from a seven-minute walkthrough published on 14 September 2026 by the Skai Generated YouTube channel. Its thesis is narrow and testable: the tool swap is invisible only because the design system already exists before either generator is used. Without that, the two outputs would read as separate visual languages.

The channel's own framing of the problem is that generated graphics reveal themselves in predictable ways: text pops up, a gradient drifts behind it for no reason, and nothing matches the scene before it. The design system is the proposed fix, not the tools themselves.

This article describes the process as demonstrated on that channel and points to the first-party documentation for both tools where a step needs verification. It does not reproduce the videos, and the render descriptions below are the presenter's own account of what appeared.

Building the design system in Claude Design

The design system is created inside Claude Design, the design workspace in Claude, Anthropic AI assistant. The presenter opened the design system view, pressed the plus icon, and described the target as a premium graphics system for a modern AI and technology YouTube channel.

Two constraints were set before anything was generated. A file containing the typeface was uploaded and the tutor was told to use it as the primary typeface. Screenshots from videos the channel had already made were added as references, so the tool had concrete examples of the intended look instead of interpreting a written brief alone.

The outputs that came back covered typography, spacing, colours and shapes. The video puts the elapsed time at around five minutes, which matters less than the artefact: one stored description of the channel's visual identity that later prompts point back to rather than restate.

Claude design and styling features are documented by Anthropic its help centre, including Claude design and styling support, so the exact interface may differ from the version shown in the recording. Treat the named buttons as a description of one session rather than a stable menu map.

Creating the simple scenes without leaving Claude

Simple scenes stay inside Claude Design, using the tool's animate template for full-screen text, lower thirds and quick explainers. The presenter describes this tier as the graphics that need clean controlled movement rather than weight, physics or overshoot.

The first render is a full-screen kinetic typography scene built around one line: AI is changing how we create. The instruction was to build the animation around the typography itself, with the words assembling into a full-screen composition and following the design system exactly, with nothing invented outside it.

The second scene continues directly from that first clip rather than starting fresh. Three labels land one after another, a small blue indicator appears between them, and the layout reorganises into a faster connected workflow. The dark navy background and blue accents stay fixed between the two clips so there is no visual break.

The third scene adds three UI-style cards entering from different directions and settling into a grid, then a blue pulse travelling through all three. The instruction was to keep it flat and editorial instead of 3D. All three renders reportedly matched with no visible seam.

Where the animate template stops working

The animate template has a ceiling: the presenter describes it as built for clean, controlled movement rather than anything carrying real weight, overshoot or physicality. That limitation is the trigger for the second half of the workflow, not a defect.

Anything past that ceiling leaves Claude a static frame. The frame is exported, opened in the video generator, and animated there, with the locked design system supplying the visual rules so the result still belongs to the same channel.

The video is explicit that this is a division of labour rather than a ranking. Claude is described as fast and consistent but safe on Notion; the video generator is described as willing to commit to physicality but dependent on a reference frame that already defines the look.

Animating the heavier shots in Seedance 2.5

The heavier shots are exported as static frames and animated in Seedance 2.5, the video generation model family from ByteDance's Seed team. In the recording the model is selected inside a third-party video generator rather than used through ByteDance's own interface.

The first shot starts from a reference frame showing one idea above many outputs. The prompt holds on the first line, then has outputs rise into position with a subtle weight shift before a thin blue line draws itself out from the centre. The instructions were deliberately restrictive: no 3D, no particles, and leave the typography alone.

The settings for that render were a 16:9 aspect ratio and a 7-second duration. The presenter's description of the result is that it had presence, which is a subjective judgement rather than a measurement.

The exact syntax, duration limits, resolution options and reference-frame behaviour of Seedance 2.5 belong to the official model documentation, and a third-party generator can expose a different set of controls from the vendor's own interface.

Two reference images and a second-by-second transition

The second advanced render is an 8-second transition between two frames, with both reference images supplied to the model and the timing broken down second by second. The second frame reads AI is changing how we create with a small subtitle underneath.

The sequence was specified shot by shot: the composition clears off screen completely, then the new headline builds in piece by piece, with the top line, then the bold line, then the blue rule, then the subtitle each occupying its own window of time.

One instruction deserves attention because it targets a specific failure mode. A crossfade or morph between the two images was explicitly disallowed, on the grounds that blending two frames reads as an unedited AI transition rather than a directed sequence.

For a first-time viewer the distinction is worth testing directly: generate the same pair of frames twice, once with a crossfade instruction and once with the sequential build described above, and compare the two results before deciding whether the extra prompt detail earns its effort.

Why the same words move differently in each tool

The third advanced render rebuilds the idea-create-edit sequence that was already made in Claude, this time with overshoot, Notion blur and slight tracking movement on the letters. Same words, same layout, different physical behaviour.

The sequence is specified in staging terms: idea moves in and settles at centre, slides left as create enters the centre position, then create slides over as edit lands on the right until all three sit in their final positions. The presenter describes the result as carrying more weight than the Claude version and moving like a product launch video rather than a slide deck.

Both versions came from the same design system, which is why they can sit next to each other in a timeline. The comparison below compares tool roles, not tools in the abstract.

Figma, Claude Design, Seedance 2.5: what each layer does

Tool choice here is about role rather than quality. Figma is the established interface design tool from Figma, used by design teams for UI and prototyping. Claude Design and Seedance 2.5 sit on top of a written rulebook rather than replacing that kind of tool.

The table separates what is documented by each vendor from what the recording demonstrates in one workflow.

FAQ

  • What is the difference between Claude Design and Seedance 2.5 for Notion graphics? Claude Design handles fast, flat typography, lower thirds and explainers using its animate template. Seedance 2.5 animates exported static frames that need weight, overshoot and physical detail. The two are used together, not as substitutes.
  • Do you need a design system before generating AI graphics? In this workflow, yes, and the video treats it as the load-bearing part. The design system locks typography, spacing, colours and shapes so both tools work from a fixed rulebook, which is what keeps successive scenes visually consistent.
  • Why not animate everything inside one tool? The presenter states that Claude animate template is built for clean controlled movement and stops being useful for shots needing weight or overshoot, while Seedance 2.5 depends on a reference frame that already defines the look. Neither tool covers the whole range alone.
  • How long is a Seedance 2.5 render in this workflow? The examples used a 7-second single-composition shot and an 8-second transition between two reference images, both at 16:9. These are the durations chosen for one specific set of renders, not fixed values.

What to verify before copying this workflow

Three things need checking against current documentation rather than a seven-minute video published on 14 September 2026. First, the controls: the video shows a third-party generator with its own model menu, and the vendor interface may expose different settings.

Second, the model lifecycle. Video generation models are released, superseded and retired quickly, so confirm that the exact version described here is still available before planning around it. The presenter references Seedance 2.5 through the video generator's model selector, not a direct vendor API.

Third, the layer split. This workflow animates text-led graphics and overlays. It does not cover interface design, deliverables such as banners or title cards that never move, or version control on a design system that several people edit.

The honest verdict in the video is that neither tool reaches the result alone. The design system is what makes the handoff between them invisible, and that is the part worth building first.

Source video