Role and Routing
This skill is not a card type but an image planning auxiliary skill. It is used in AI news card news to increase the stopping power of the first screen and the article's uniqueness.
Application order:
hyperframes-card-newsto determine the overall card structure.- With this skill, translate news facts into image concepts and A/B/C drafts.
- For actual implementation, follow
hyperframes-card-news-work-photo-coverorhyperframes-card-news-work-image-feature. overview.htmlSelect the final image from the reduced thumbnail and the detail screen.
Allowed data-skillremain only the following four: photo-cover, video-cover, stat, image-feature . Do not create new values such as fomo, hook, fomo-image .
Goal
A good cover shows at least two of the following three within one second even if the text is hidden.
- Who or what the news is about
- What change, conflict, or opportunity has arisen
- Why you should see it now
어두운 방 + 노트북 + 홀로그램 + 평범한 로봇Do not use images that could be attached to any AI article, such as .
Fact-Checking First
The tension of the image must not come before the facts of the article.
- Before publication, cross-check key claims and figures with at least two reliable sources.
- For expressions whose status can change, such as launch, free, termination, security incident, acquisition, and price, verify the date and scope.
- Do not assert unverified damage, fear, completed acquisition, or service termination through images.
- If a visual metaphor could be misunderstood as an actual event photo, mark the card or caption with
AI 생성 이미지,연출 이미지,개념도.
1-Second Hook Formula
인지 가능한 단일 주인공 + 기사 고유의 사물 + 한 가지 위기/욕망 + 짧은 사실형 헤드라인
Essential Principles
- One protagonist: Prioritize one of a face, product, smartphone, service screen, animal, or huge number.
- One metaphor: Use only one device that makes the event immediately understandable, such as a door, gate, vending machine, race, maze, safe, wave, or crack.
- One tension: Choose one of recency, loss, scarcity, competition, or social proof.
- Two or three colors: Based on black or dark navy, use only one warning color and one secondary color.
- Text margin: Based on 4:5, leave the top 65-70% for the image and the bottom 30-35% for the dark title area.
- Mobile crop: Ensure the protagonist's face, product, or hands are not covered by the bottom headline.
Turning News Types into Visual Metaphors
| News type | Recommended protagonist | Recommended metaphor | FOMO signal |
|---|---|---|---|
| New product/launch | Product, UI, founder | Opening door, spotlight, public stage | Just unveiled, available now |
| Pricing, free, limits | Product, card, usage meter | Payment gate, vending machine, safe, receipt | Free, additional payment, deadline |
| Performance, benchmarks | Model, chip, person | Race, podium, maze escape, dashboard | First place, surpassing humans, gap |
| Security, privacy | Screen, account, data | Broken glass, hand reaching through the screen, open lock | Opt out, leak, check immediately |
| Acquisition, investment, partnership | People, both companies' products | Handshake, giant badges juxtaposed, bridge | Huge sum, official, exclusive |
| Use cases, viral | Output, user | Before-and-after change, production line, portal | Time saved, comments and user count |
Image asset priority
- Download official product images, screenshots, and real photos with clear usage permissionand use them locally in
assets/. - Edited images manually compositing real photos and official logos.
- AI-generated editorial images that translate the article's facts into a single metaphor.
- Use generic stock images only when they can secure the article's unique objects and main subject.
For real people and actual events, prioritize official photos or clearly poster-style collages rather than recreating them with AI as fake on-site photos. Do not leave logos, numbers, Korean text, or product names to the image model; composite them accurately in HTML/CSS.
Generative prompt assembly formula
4:5 vertical editorial technology-news poster.
[뉴스 사건]을 [한 가지 시각적 은유]로 표현한다.
[단일 주인공]이 [명확한 행동/감정]을 보이고,
[기사 고유의 사물]이 크게 보인다.
[카메라 구도와 렌즈], [조명],
black/deep navy background with [경고색] and [보조색],
high-contrast realistic editorial composite,
subtle halftone and magazine texture.
Main subject fills the upper 70 percent.
Leave a clean dark gradient in the lower 30 percent for headline.
No text, no letters, no numbers, no logo, no watermark,
no illegible UI, no clutter, no extra fingers, no distorted face.
The prompt must include 주인공, 은유, 감정/행동, 구도, 조명, 색, 제목 여백, 제외 조건, and do not simply list only cinematic, futuristic, AI technology.
A/B/C draft rules
Create the same event in the three directions below.
- A Fact-centered: The product, screen, and official assets are the main subject. Trust and understanding come first.
- B Person-centered: Convey loss or desire through one person's expression and action.
- C Metaphor-centered: Visualize the event with impossible scenes such as gates, races, safes, and cracks.
Filename example:
assets/cover-a-fact.jpg
assets/cover-b-person.jpg
assets/cover-c-metaphor.jpg
Final selection criteria:
- Is the main subject visible in a 3-column feed thumbnail around 320px
- Even if the text is hidden, can the article topic or event direction be read
- Is it not a generic image that could be used as-is for other AI articles
- Are there no generation errors in hands, faces, UI, text, or logos
- Does the main subject not conflict with the headline area
Delete unused drafts if not needed, and record the source and whether it was generated for adopted assets in topics/<주제>/assets/ or production notes.
Separating the roles of copy and images
- The image the event and emotionshows.
- The headline verified facts and a curiosity gapcreates.
- Numbers, prices, dates, and product names are written as HTML text, not in generated images.
방금,무료,최초,종료,인간 추월is used only when it is a fact.- The cover does not explain the entire conclusion, but it must not make it mistaken for a different event.
Final check
-
hyperframes-card-newsapplied together with the actual card type skill - 새
data-skilldoes not create a type - confirmed the key facts and dates with two or more sources
- one protagonist, one metaphor, one tension per card
- avoided generic AI workshop, robot, and hologram images
- accurately composited logos, numbers, and Hangul in HTML/CSS
- checked the bottom 30-35% title margin and mobile crop
- compared A/B/C and made the final choice at reduced thumbnail size
- marked AI-generated and staged images so they are not mistaken for real photos