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 pathimages/studio/editor-overview.png
1. Choose a creation mode — Single card vs. Card series
At the top of the left panel, first pick what you want to create.
| Mode | Description | Result |
|---|---|---|
| Single card | A one-page promo card | 1 card |
| Card series | A series of connected slides | Multiple 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.
- Paste the article address into the
Paste an article link (https://...)field. (Only one link.) - Press Generate and the AI automatically reads the article body and incorporates it.
- You can generate from the link alone even if the text above is empty.
- 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.
- Upload a photo with Upload photo.
- 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
- 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 pathimages/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 · Ratio | Use | Resolution |
|---|---|---|
| Instagram/Facebook feed · 1:1 | Square feed | 1080×1080 |
| Instagram feed portrait · 4:5 | Portrait feed (larger exposure) | 1080×1350 |
| Instagram/Meta Story/Reels · 9:16 | Full-screen vertical for Stories/Reels | 1080×1920 |
| YouTube thumbnail/landscape · 16:9 | YouTube thumbnail/landscape banner | 1920×1080 |
Image style
Set the mood of the background image. Even with the same content, the result changes with the style.
| Style | Feel |
|---|---|
| Graphic (abstract) | Clean abstract background focused on gradients and shapes |
| Photo (realistic) | Cinematic scene that looks like a real photo |
| Illustration | Flat vector editorial illustration |
| 3D render | Soft 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.
| Template | Use |
|---|---|
| News · Bottom emphasis | News articles/press releases → headline large at the bottom |
| Insight · Top | A short key claim at the top |
| Statistic · Big number | A number to highlight, large in the center (e.g., "30%") |
| Quote · Customer story | Customer testimonial/quote + source |
| Feature intro · CTA | Feature/benefit intro + call-to-action button |
| Product promo · Story | Product 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 pathimages/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.
- Copywriting — The AI writes the headline, supporting copy, image prompt, and a draft post caption.
- Background generation — It draws the background image to match the chosen style and ratio.
- 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
MOCKtag 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.
| Action | How |
|---|---|
| Zoom in / out | + / − on the zoom bar, or Ctrl/Cmd + wheel (zooms toward the pointer) |
| Fit to screen | Click the percentage on the zoom bar (Ctrl/Cmd + 0) |
| Actual size (100%) | 1:1 on the zoom bar |
| Pan | Hold 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
| Action | Shortcut |
|---|---|
| Paste image from clipboard | Ctrl/Cmd + V |
| Delete selected element | Delete or Backspace |
| Undo | Ctrl/Cmd + Z |
| Redo | Shift + Z or Ctrl + Y |
| Zoom in / out / fit | Ctrl/Cmd + + / − / 0 |
| Pan | Space + drag |
| Temporarily disable snapping | Hold 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.
| Tab | Contents |
|---|---|
| Text | Add text box + properties of the selected text (font, size, color, align, keyword emphasis) |
| Image | Upload 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.) |
| Shape | Insert 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.
- Double-click the text to enter edit mode.
- Drag to select the word(s) to emphasize.
- 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.
| Item | Description |
|---|---|
| Crop | Drag/resize the crop frame on the canvas, then Apply (cancelable) |
| Opacity | Adjust image transparency |
| Flip | Flip horizontally / vertically |
| Layer | Change order forward / backward |
| Replace | Swap for a different image |
| Delete | Remove the image |
🖼️ Screen capture Right editing panel — Text properties (keyword emphasis) / Image properties (crop) / Position & Size 📍
studio.tflowx.com/studio· save pathimages/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 pathimages/studio/deck-outline-storyboard.png
7. Save · Export · Share
Save, export, and share from the toolbar at the top of the canvas.
| Button | Action |
|---|---|
| Start over | Start from scratch. Unsaved changes are lost, so a confirmation dialog appears |
| Save | Store the current work in the Library (saves edit details as-is) |
| Export PNG | Download the card as a PNG at original resolution |
| Share | Share 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 pathimages/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.
| Status | Display |
|---|---|
| Completed card | Thumbnail → click to reopen on the canvas |
| Completed video | Open 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 pathimages/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.