← 返回 Skills 市场
card
作者
Kostja Zhang
· GitHub ↗
· v1.1.1
· MIT-0
196
总下载
0
收藏
0
当前安装
2
版本数
在 OpenClaw 中安装
/install card-components
功能描述
When the user wants to design, optimize, or audit card layouts for content display. Also use when the user mentions "card layout," "card component," "card gr...
使用说明 (SKILL.md)
Components: Card Layout
Guides card layout design for scannable, responsive content display. Cards are self-contained containers that group related content; used in grids for blog posts, products, templates, tools, features, galleries, and integrations.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
Card Anatomy
| Element | Purpose |
|---|---|
| Container | Border, background, shadow; consistent padding |
| Image / Thumbnail | Visual anchor; consistent aspect ratio (1:1, 4:3 common) |
| Title | Clear; keyword-rich where relevant |
| Description / Metadata | Supporting text; date, author, category |
| CTA | Action button or link; "View," "Use," "Connect," etc. |
Principle: One card = one topic. Keep each card focused for scannability.
Card Types by Use Case
| Type | Typical Elements | Page Skill |
|---|---|---|
| Product card | Image, name, price, CTA (Add to cart, View) | products-page-generator |
| Template card | Thumbnail, name, short description, "Use" or "Preview" CTA | template-page-generator |
| Tool card | Name, one-line benefit, CTA to tool page | tools-page-generator |
| Feature card | Name, benefit, optional screenshot | features-page-generator |
| Gallery / Showcase item | Thumbnail, title, creator, link | showcase-page-generator |
| Integration card | Logo, name, short description, "Connect" or "Install" | integrations-page-generator |
| Blog / Article card | Cover image, title, excerpt, date, author | blog-page-generator, article-page-generator |
| Resource card | Thumbnail, title, format (guide, webinar), CTA | resources-page-generator |
Layout & Responsiveness
- Grid: CSS Grid
repeat(auto-fill, minmax())or Flexbox; columns adapt to viewport - Mobile: Single column on small screens; 2–4 columns on desktop
- Consistency: Same padding, spacing, and aspect ratios across cards
- Hover: Subtle elevation (shadow, translate-y); avoid scale that causes layout shift (CLS)
Design Principles
| Principle | Practice |
|---|---|
| Visual hierarchy | Title > description > CTA; clear flow |
| Scannability | Minimal text; benefit-led copy |
| Consistency | Same structure across all cards in a grid |
| Action clarity | One primary CTA per card; avoid choice overload |
SEO & Schema
- Cards themselves: No specific schema; layout is UI
- Content in cards: Use appropriate schema for the page (Product, Article, ItemList, etc.); see schema-markup
- Images: Alt text on thumbnails; see image-optimization
- Links: Descriptive anchor text; internal linking; see internal-links
Grid vs List vs Masonry vs Carousel
| Layout | Best for | Skill |
|---|---|---|
| Grid | Visual content (products, templates, gallery); equal emphasis | grid |
| List | Text-heavy (blog index, docs); compact; scan by title | list |
| Masonry | Varying heights; image gallery, portfolio | masonry |
| Carousel | Limited space; testimonials, logos, featured rotation | carousel |
Related Skills
- products-page-generator: Product cards, grid layout, category pages
- template-page-generator: Template cards, gallery structure
- tools-page-generator: Tool cards, toolkit hub
- features-page-generator: Feature grid/list
- showcase-page-generator: Gallery grid, per-item format
- integrations-page-generator: Catalog grid, integration cards
- category-page-generator: Product grid, consistent layout
- grid: Grid layout for card display; when to use grid
- list: List layout; cards in list format
- masonry: Masonry for varying-height cards (gallery)
- carousel: Carousel for card slides (testimonials, featured)
- hero-generator: Hero vs card—hero is single above-fold; cards are repeated units
- brand-visual-generator: Typography, spacing, visual consistency
- image-optimization: Card thumbnail optimization, alt text, LCP
安全使用建议
This skill is internally coherent and low-risk: it only provides design guidance and asks for no permissions or installs. However, the skill's source/homepage is not provided—if you care about provenance, prefer skills from known authors or repositories. As with any skill, avoid pasting sensitive data into prompts when using it.
功能分析
Type: OpenClaw Skill
Name: card-components
Version: 1.1.1
The skill bundle consists of documentation and behavioral guidelines for an AI agent to assist in designing UI card components. It contains no executable code, external dependencies, or malicious instructions, focusing entirely on layout principles and design best practices within SKILL.md.
能力评估
Purpose & Capability
Name, description, and SKILL.md consistently describe a UI design helper for card layouts; required capabilities (none) are proportional to the stated purpose.
Instruction Scope
SKILL.md contains guidance and recommendations for card anatomy, layout, responsiveness, SEO, and related skills. It does not instruct the agent to read files, access environment variables, call external endpoints, or perform unrelated system actions.
Install Mechanism
No install spec and no code files — instruction-only skill with no downloads or writes to disk.
Credentials
Requires no environment variables, credentials, or config paths; the requested scope is minimal and appropriate for a design guidance skill.
Persistence & Privilege
always is false, the skill does not request permanent presence or elevated privileges and does not modify other skills or system configuration.
如何使用
- 确保已安装 OpenClaw（本地或 Docker 部署）
- 在对话框中输入安装命令：
/install card-components - 安装完成后，直接呼叫该 Skill 的名称或使用
/card-components触发 - 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
版本历史
v1.1.1
Batch: trust-badges through grid
v1.1.0
Automated batch sync
元数据
常见问题
card 是什么？
When the user wants to design, optimize, or audit card layouts for content display. Also use when the user mentions "card layout," "card component," "card gr... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 196 次。
如何安装 card？
在 OpenClaw 或 Claude Code 对话框中运行命令「/install card-components」即可一键安装，无需额外配置。
card 是免费的吗？
是的，card 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。
card 支持哪些平台？
card 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。
谁开发了 card？
由 Kostja Zhang（@kostja94）开发并维护，当前版本 v1.1.1。
推荐 Skills