|Docs
Open App ↗

Creating Cards & Card Series

In the Studio editor, paste text or an article link and press Generate — the AI builds a background image + promo copy and shows it as a finished card. You can edit the card directly on the canvas and download it as a PNG or share it straight to social media.

💡 Who is this for? Anyone who needs an image to post a product or announcement on Instagram, Facebook, or YouTube but doesn't have time to wrangle design tools. Just paste your text, a card appears, and you only need to touch up the copy you don't like.

🖼️ Screen capture Editor (/studio/edit) three-pane layout — left: edit panel (Text/Image/Shape tabs) / center: page list + canvas / right: Pictor (bottom-right chat-bubble button when collapsed) 📍 studio.tflowx.com/studio · save path images/studio/editor-overview.png


Creating cards & card series in Studio — a quick overview

1. Choose a creation mode — Single card vs. Card series

At the top of the left panel, first pick what you want to create.

ModeDescriptionResult
Single cardA one-page promo card1 card
Card seriesA series of connected slidesMultiple cards (deck) + one shared post caption

Card series is covered in detail in 6. Creating card series (multiple slides) below. Sections 1–5 of this document apply to both modes.


2. Source input — Tell the AI what to make

This is the step where you give the AI its ingredients. Text alone works, but adding a link, image guide, or reference photo makes the result more refined.

Source content (text)

Paste a news article, post, or organized text into the Source content text box.

Paste a news article, post, or organized text. The AI pulls out the key message to build the card copy and background.

  • Even if the text is long, the AI automatically summarizes and reflects the key points.
  • If you're not sure what to put in, press Fill example to populate a sample sentence that fits the selected template.

🔗 URL input (article link)

Press URL input to open the link entry field.

  1. Paste the article address into the Paste an article link (https://...) field. (Only one link.)
  2. Press Generate and the AI automatically reads the article body and incorporates it.
  3. You can generate from the link alone even if the text above is empty.
  4. On success, "Reflected N characters from the link body" appears at the top.

ℹ️ If the link can't be read, the notice "Couldn't read the link body. Please paste it as text." appears. In that case, copy the article content directly and paste it into Source content.

Image guide (optional)

A field where you describe the background image you want in natural language.

Freely describe the image you want. Example: A male and female owner shaking hands while signing a contract

  • Leave it blank and the AI decides the background on its own from the article content.
  • Fill it in and the AI refines your sentence to match the article context and generates the image.

Reference photo (optional) + Variation amount

Use this when you want to build a new background based on a photo you already have.

  1. Upload a photo with Upload photo.
  2. Use the Variation amount slider to decide how much of the original to keep.
    • Small (left) = keep the original almost as-is
    • Large (right) = draw fresh, using only the mood as reference
  3. If you don't need it, remove the photo with Remove.

ℹ️ Reference photos (img2img) only work with certain generation engines. In an unsupported environment, after generating you'll see the notice "The reference photo wasn't reflected — the current generation engine is configured without reference photo (img2img) support." In this case, contact your administrator.

🖼️ Screen capture Left source input panel — Source content · URL input toggle · Image guide · Reference photo + Variation amount slider 📍 studio.tflowx.com/studio · save path images/studio/source-input.png


3. Generation options

In the Generation options panel (collapsible), choose the card's dimensions, mood, and layout. This is where you set the channel and aspect ratio you will post to, the image style, one of the six layouts, and the brand text printed on the card.

Channel · Ratio

Choose the channel and aspect ratio where you'll post the image. Changing the ratio changes the card size, and the text position follows automatically (applied instantly, without regenerating).

Channel · RatioUseResolution
Instagram/Facebook feed · 1:1Square feed1080×1080
Instagram feed portrait · 4:5Portrait feed (larger exposure)1080×1350
Instagram/Meta Story/Reels · 9:16Full-screen vertical for Stories/Reels1080×1920
YouTube thumbnail/landscape · 16:9YouTube thumbnail/landscape banner1920×1080

Image style

Set the mood of the background image. Even with the same content, the result changes with the style.

StyleFeel
Graphic (abstract)Clean abstract background focused on gradients and shapes
Photo (realistic)Cinematic scene that looks like a real photo
IllustrationFlat vector editorial illustration
3D renderSoft 3D-rendered texture

Layouts (6 types)

Choose the card's layout (position of the title and supporting copy). Each template shows a thumbnail preview of its arrangement. You can freely switch to a different template even after generating, and the background and copy are preserved.

TemplateUse
News · Bottom emphasisNews articles/press releases → headline large at the bottom
Insight · TopA short key claim at the top
Statistic · Big numberA number to highlight, large in the center (e.g., "30%")
Quote · Customer storyCustomer testimonial/quote + source
Feature intro · CTAFeature/benefit intro + call-to-action button
Product promo · StoryProduct name/selling points (9:16 portrait, for sellers)

🖼️ Screen capture Generation options panel — 4 channel/ratio types · 4 image styles · 6 template thumbnails 📍 studio.tflowx.com/studio · save path images/studio/options-panel.png


Brand text (optional)

The company or brand name in the top-left of every card. Set it in Create → More options — a show/hide checkbox plus the text. Leave it empty or unchecked and no brand text is added. Your last-used text is remembered, and you can also set the default on the Settings page.

4. AI auto-generation — What happens

When you press Generate, the job is queued and a progress bar appears. Behind the scenes it proceeds in order like this.

  1. Copywriting — The AI writes the headline, supporting copy, image prompt, and a draft post caption.
  2. Background generation — It draws the background image to match the chosen style and ratio.
  3. Text placement — It lays the copy over the template to complete the card.

When it's done, the card appears on the center canvas, and the post caption below is filled with a draft.

ℹ️ If you see a MOCK tag at the top, it's demo/development mode where the backend isn't connected, and a placeholder image is shown instead of the real AI output. It doesn't appear in the production environment.


5. Editing on the canvas

The center canvas is an editing screen that shows exactly what you'll get (what you see is what you export). It appears scaled down on screen, but on export it's saved at the original resolution in the table above (e.g., 1080×1080).

Select · Move · Resize

  • Click an element (text/image/shape) to select it — the left edit panel switches to that type's tab (Text/Image/Shape) with its properties.
  • Drag to move its position.
  • Use the corner handles that appear after selecting to adjust size and rotation.

Zoom · Pan

For detail work, scale the canvas up. Use the zoom bar at the bottom-left of the canvas.

ActionHow
Zoom in / out+ / − on the zoom bar, or Ctrl/Cmd + wheel (zooms toward the pointer)
Fit to screenClick the percentage on the zoom bar (Ctrl/Cmd + 0)
Actual size (100%)1:1 on the zoom bar
PanHold Space and drag, or drag with the middle mouse button

ℹ️ Zoom only changes how big it looks — the card content and export resolution are unaffected.

Shortcuts

ActionShortcut
Paste image from clipboardCtrl/Cmd + V
Delete selected elementDelete or Backspace
UndoCtrl/Cmd + Z
RedoShift + Z or Ctrl + Y
Zoom in / out / fitCtrl/Cmd + + / / 0
PanSpace + drag
Temporarily disable snappingHold Alt (⌥) while dragging

ℹ️ Undo/redo remembers up to 30 steps.

Left edit panel — Text / Image / Shape tabs

Adding elements and editing properties both live in the left panel. Selecting an element on the canvas switches to its tab automatically.

TabContents
TextAdd text box + properties of the selected text (font, size, color, align, keyword emphasis)
ImageUpload image · Background image (preview + replace) · Elements (your objects and tool results — click to insert; Objects opens the library) · properties of the selected image (crop, etc.)
ShapeInsert 8 shapes (rectangle, rounded, circle, triangle, diamond, line, arrow, block arrow) + properties of the selected shape (fill, opacity, corner radius, layer)

Undo/redo live in the top bar.

Position / Size panel

When you select an element, you can enter X, Y, width, height, and rotation values directly as numbers in the Position / Size panel.

ℹ️ For text, the height (H) is set automatically based on the font size, so the H input field is disabled.

Text properties (including keyword emphasis)

When you select text, the Text properties panel opens. (Before selecting, it shows "Select text on the canvas".)

  • Content — Edit the text directly
  • Font — Pretendard / Noto Sans KR / system-ui / Georgia
  • Weight — Regular to Black
  • Size · Color · Alignment

Keyword emphasis — You can emphasize just certain words in the text with a different color, size, weight, or font.

  1. Double-click the text to enter edit mode.
  2. Drag to select the word(s) to emphasize.
  3. Adjust keyword size / keyword weight / keyword font and color, and it applies only to that portion.

ℹ️ If you press emphasis without selecting a word, the notice "Double-click the text and select the word to emphasize." appears.

Image properties (crop, etc.)

When you select an image element, the Image properties panel opens.

ItemDescription
CropDrag/resize the crop frame on the canvas, then Apply (cancelable)
OpacityAdjust image transparency
FlipFlip horizontally / vertically
LayerChange order forward / backward
ReplaceSwap for a different image
DeleteRemove the image

🖼️ Screen capture Right editing panel — Text properties (keyword emphasis) / Image properties (crop) / Position & Size 📍 studio.tflowx.com/studio · save path images/studio/property-panels.png


6. Creating card series (multiple slides)

Generating in Card series mode creates a series of connected slides. The AI first proposes an outline, which you refine in the card series composition dialog — subheadings, body text, and order — and once generation finishes the pages are listed vertically so you can edit them one at a time.

Card series composition dialog

When you press Generate, the AI first creates an outline (composition draft), and the Card series composition dialog opens.

The AI composed it into N slides. Refine the subtitles and body, reorder them, then generate.

  • Review and edit each card's subtitle and body.
  • Add slides with Add card, and reorder or delete them.
  • Once you've refined everything, press Generate N slides and the cards are created all at once.

Page list (vertical)

When generation finishes, the center area lists the pages vertically like a document. The page you're editing shows as a live canvas; the rest are thumbnails.

  • Click a thumbnail to switch editing to that page in place.
  • Drag the ⠿ grip in a page's header row to reorder; the buttons next to it duplicate/delete.
  • Add page at the bottom — choose blank card (instant; fill background and text yourself) or generate with AI (enter a subtitle).
  • Generating/failed status shows on each page.

ℹ️ If some cards are slow to generate, the notice "Some cards were delayed/interrupted. Please refresh from the Library in a moment or try again." appears.

🖼️ Screen capture Card series composition dialog + vertical page list (grip · duplicate · delete · add page) 📍 studio.tflowx.com/studio · save path images/studio/deck-outline-storyboard.png


7. Save · Export · Share

Save, export, and share from the toolbar at the top of the canvas.

ButtonAction
Start overStart from scratch. Unsaved changes are lost, so a confirmation dialog appears
SaveStore the current work in the Library (saves edit details as-is)
Export PNGDownload the card as a PNG at original resolution
ShareShare straight to social media

Save

Press Save and your work is stored in the Library with its edit state intact, and "Saved" appears. It remains even after you close and reopen the window (see 9. Library).

Export PNG / Export all

  • Single card: Download one card as a PNG with Export PNG.
  • Card series: Download all cards at once, in order, with Export all. (While in progress: "Exporting N slides…")

Share

Press Share and on mobile the system share sheet opens with the image (JPEG), and the post caption is copied to the clipboard. At this point "Caption copied too — paste it in the app" appears.

ℹ️ On desktop and other browsers that don't support direct sharing, the image is downloaded and the caption is copied: "This browser doesn't support direct sharing, so it was downloaded. You can post it via the share sheet on mobile."

🖼️ Screen capture Canvas top toolbar — Start over · Save · Export PNG · Share · Undo/Redo 📍 studio.tflowx.com/studio · save path images/studio/toolbar.png


8. Post caption

The post caption field below the canvas is the text (caption) to post alongside on social media.

  • When you generate a card, the AI fills in a draft body + hashtags.
  • You can edit it directly, and the character count is shown as "N characters".
  • Use Copy to put the caption on the clipboard and paste it into your social app.

ℹ️ For card series, there is one shared post caption for the whole deck.


9. Library

Everything you create — cards, images, videos — is stored in the Library screen on the rail. Since items are persisted in the DB, they remain even after you close and reopen the window. Organize them with folders (up to 2 levels) and drag cards onto folders to move them. Clicking opens cards/series in the editor, images/objects in a viewer, and videos in a playback modal.

StatusDisplay
Completed cardThumbnail → click to reopen on the canvas
Completed videoOpen video (new tab)
Generating"Generating…" (auto-refreshes about every 4 seconds)
Failed"Failed"
  • You can delete each item with Delete (confirmation dialog).
  • Results from Image Tools (background removal, etc.) can't be placed directly on the canvas, so opening the item shows a modal viewer where you can add it to the current card with Insert into card.

🖼️ Screen capture Library screen — folder tree on the left + grid (completed/generating/failed statuses) 📍 studio.tflowx.com/studio · save path images/studio/my-jobs.png


💡 Troubleshooting (FAQ)

Q. Can I create one with just a link and no text? A. Yes. Put only the article link in URL input and press Generate — the AI automatically reads the body and builds the card. Source content can be left blank.

Q. If I change the ratio (e.g., 1:1 → 9:16), do I have to regenerate? A. No. Changing the channel/ratio only changes the canvas size without regenerating, and the text position follows automatically. You can also change the template after generating, and the background and copy are preserved.

Q. I want to change the color of just one word in the text. A. Double-click the text → drag to select the word to emphasize → adjust keyword size, weight, font, and color, and only that part is emphasized.

Q. My card disappeared. A. Check the Library screen on the rail. Saved work remains even after you close the window. Note, however, that Start over resets the current unsaved work, so be careful.