apple-bento-grid
为AI编程助手生成苹果风格Bento网格可视化卡片的技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：apple-bento-grid。 它的用途是：为AI编程助手生成苹果风格Bento网格可视化卡片的技能。 完整的 Skill 内容见：https://321skill.com/skills/apple-bento-grid/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'使用 /apple-bento-grid 为我的开源项目创建一个可视化卡片，展示它有1.2万颗星、500个Fork和最近6个月的贡献者增长趋势。'，它会自动推荐浅色主题和包含条形图的布局，询问你是否添加项目Logo，并生成一个独立的HTML文件。你还可以要求它：'再生成一个垂直版本的，用于Twitter分享。'
介绍
这个技能解决了开发者和内容创作者需要快速制作精美、专业的可视化卡片，但缺乏设计工具或技能的痛点。它允许用户仅通过自然语言描述数据，即可自动生成具有苹果设计美学的Bento网格布局HTML文件，无需手动编写CSS或使用设计软件。
使用时，只需在支持的AI编程助手（如Claude Code、Cursor）中，通过/apple-bento-grid命令描述你想要可视化的内容，例如项目数据、个人成就或产品指标。技能会自动分析你的描述，选择合适的主题（浅色/深色）、布局模板和卡片类型，并引导你添加Logo等素材，最终输出一个独立的HTML文件。
它非常适合前端开发、全栈开发、产品经理、内容创作者和营销专员等角色。这些用户经常需要制作数据看板、项目展示、社交媒体素材或个人作品集，但希望将精力集中在内容本身而非设计实现上。
建议在描述数据时，可以尝试不同的格式（如“制作一个深色主题的垂直社交卡片”），技能会根据关键词灵活调整。生成的HTML文件是独立的，可以轻松嵌入网页或使用内置的Playwright脚本导出为高清PNG图片，方便在社交媒体或演示文稿中使用。
核心特点
与同类生成静态图表的技能不同，它专注于产出具有苹果设计语言（如特定色系、留白、渐变边框）的、可直接用于演示或社交媒体的完整视觉卡片，且输出为自包含的HTML，支持一键截图导出，设计感更强、交付物更完整。
注意事项
不适合需要高度自定义交互效果（如复杂动画、动态数据绑定）或非卡片式布局的可视化场景。
常见问题
支持哪些AI助手使用？
支持遵循Agent Skills标准的助手，如Claude Code、Cursor，也支持通过npx命令安装到其他兼容环境。
生成的卡片可以导出为图片吗？
可以，技能生成的HTML文件内置了Playwright脚本，可运行以导出2倍Retina质量的PNG图片。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/apple-bento-grid/raw/index.md 读取 apple-bento-grid 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/apple-bento-grid/raw/index.md（查看排版版本）