Create editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
Create editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography.
metadata
{"author":"Infocard Generator is powered by Markdown Viewer — the best multi-platform Markdown extension (Chrome/Edge/Firefox/VS Code) with diagrams, formulas, and one-click Word export. Learn more at https://docu.md"}
Infocard Generator
Quick Start: Analyze content (density × structure × mood) → Auto-sense tone for color palette → Pick a layout skeleton → Embed HTML directly in Markdown with <style scoped>.
Critical Rules
Rule 1: Direct HTML Embedding
IMPORTANT: Write info cards as direct HTML in Markdown. NEVER use code blocks (```html). The HTML should be embedded directly in the document without any fencing.
Rule 2: No Empty Lines in HTML Structure
CRITICAL: Do NOT add any empty lines within the HTML info card structure. Keep the entire HTML block continuous to prevent parsing errors.
Rule 3: Content Analysis Before Layout
REQUIRED: Analyze content along three dimensions before designing:
Density (determines breathing rhythm):
Density
Content Volume
Visual Treatment
Low
≤ 50 words core
"Big-character" composition. One oversized element dominates. Generous whitespace.
Medium
50–200 words
Hero + supporting panels. 2–3 main blocks with clear hierarchy.
High
200+ words
Asymmetric multi-column grids. Primary/secondary/supporting blocks. Never equal-weight tiles.
Structure (determines layout geometry):
Structure
Signal
Layout Pattern
Single point
One core concept
One anchor element dominates, rest recedes
Contrast
A vs B, old vs new
Split panel, two poles
Hierarchy
Layers build on each other
Stacked modules, pyramid
Flow
Sequential steps
Vertical cascade, numbered items
Radial
Core + derivatives
Hub with surrounding panels
Parallel
Multiple equal concepts
Asymmetric grid (never equal columns)
Mood (determines color temperature):
Mood
Visual Feel
Reflective
More whitespace, serif-heavy, lower contrast
Sharp
Strong contrast, bold type, vivid accent
Warm
Earth tones, rounded feel, gentle rhythm
Technical
Monospace accents, grid-like density
Rule 4: Tone Sensing
REQUIRED: Auto-select color palette based on content topic. Scan content keywords and match the closest tone:
Content Tone
Background
Accent
Trigger Keywords
Philosophical
#FAF8F4
#7C6853
cognition, thinking, meaning, philosophy, essence
Technical
#F5F7FA
#3D5A80
architecture, algorithm, system, API, code
Literary
#FBF9F1
#6B4E3D
story, narrative, writing, poetry, character
Scientific
#F4F8F6
#2D6A4F
experiment, data, research, paper, discovery
Business
#F4F3F0
#2D6A4F
market, strategy, growth, finance, investment
Creative
#F6F3F2
#B8432F
design, art, aesthetics, inspiration, creation
Default
#FAFAF8
#4A4A4A
When no clear match — prefer default over wrong match
When a style template is explicitly chosen, its colors take precedence over tone sensing. Use tone sensing as the default when no style is specified.
Rule 5: Title Protection
If the user provides a title explicitly, use it as-is for the main headline. Put editorial interpretation into subtitle, summary, or side modules. Do not silently rewrite the user's title.
Rule 6: Typography Hierarchy
Maintain a clear type scale and use it consistently:
Body text: 14px–16px, weight 400, line-height 1.6–1.7
Meta / tags / captions: 11px–13px, weight 500–700, uppercase with letter-spacing
Body text color: never pure black — use #1a1a1a, #333, or #4a4a4a
Rule 7: Visual Weight Distribution
At least one module should feel visually heavier than the others. Avoid making every panel use the exact same treatment. Differentiate through scale, background tone, typographic weight, or accent rules.
Rule 8: Taste Rules (Anti-AI Checklist)
Before finalizing any card, check against these common AI-generated visual patterns:
Layout:
No centered hero — Do not default-center titles. Prefer left-aligned or asymmetric
No equal-width tiles — Three equal columns side by side is the #1 AI signature. Use 2fr 1fr, asymmetric grids, or staggered layouts
No uniform panels — At least one panel must differ in scale, weight, or treatment
Typography:
No pure black#000000 — Use off-black (#1a1a1a, #2d2a26) or warm/cool dark
No oversized-only hierarchy — Build hierarchy with weight and color, not just font-size scaling
Color:
Max 1 accent color, saturation < 80%
No neon gradients — No purple-blue AI glow, no gradient-filled headlines
Consistent temperature — Do not mix warm gray and cool gray in one card
Content:
No filler data — Avoid 99.99%, 50%, 1234567. Use organic numbers (47.2%, 3.8M)
No AI phrasing — Avoid "empower", "seamless", "unleash", "next-generation"
Spacing:
Padding and margins must be mathematically precise, no awkward gaps
Adjacent elements must be visually aligned
Style Examples
Choose a visual family first, then pick the specific template inside that family. This keeps the library broad without forcing a flat 29-style scan every time.
Style Families
Warm Editorial and Storytelling
Use when the card should feel reflective, human, narrative, or culturally textured.
Audit summaries, control reviews, security posture checks, compliance tracking
Narrative and Stakeholder Updates
Use when the content is about people, teams, customers, or partner motion.
Primitive note: org-update, customer-story, and partner-brief now share a lightweight card-brief-* outer rhythm. Keep news-bulletin separate unless the structure is actually about relationship or stakeholder motion rather than headline cadence.
Prefer existing family primitives before inventing new class names. Current aligned layout families include card-doc-*, card-kpi-*, card-sequence-*, card-tile-*, card-map-*, card-compare-*, card-review-*, card-topic-*, and card-brief-*.
When a new layout clearly belongs to one of those families, vary geometry and modifiers first. Do not create a parallel primitive vocabulary for the same role.
Explicit special cases remain intentionally separate: quote-card, terminal-window, news-bulletin, and the strongest identity-driven style themes such as deep-night and glassmorphism.
If a layout or style only shares mood and not structure, document the family relationship in prose rather than forcing additional primitive convergence.
Design Principles
Space and Breathing Room
Card padding: 32px–48px from edges
Module gaps: 16px–24px
Title area must have generous line-height (1.1–1.3) and clear separation from body
Never crowd content against card edges
Visual Accents
Use 4px–6px thick rules as section dividers or accent borders
Use subtle tinted backgrounds (rgba(0,0,0,0.03) or style-specific tints) for secondary panels
Accent colors should be restrained: one highlight color used for rules, tags, or key numbers
Optional: 4% noise overlay for paper texture (see style templates)
Content Rhythm
High-density cards: group into overview → core judgment → supporting modules → conclusion
Ranking content: asymmetric hero + structured list (avoid equal tiles)
