设计与前端 Claude Skills — 第 3 页
Blog Image 博客视觉生成器
通过 Gemini 为博客生成、编辑并优化可发布的视觉素材。
生产级前端界面工程
帮助 AI 编码代理构建可访问、响应式且符合设计系统的生产级用户界面。
baoyu-design：本地运行 Claude Design 的 Agent Skill
将 claude.ai/design 的设计能力打包成 Agent Skill，在本地 Cursor、Claude Code 等任意文件型代理中生成自包含 HTML 的 UI 稿、原型和 PPT。
Artifacts Builder — 多组件前端 Artifact 构建套件
用 React、Tailwind CSS 和 shadcn/ui 快速搭建并打包复杂的 claude.ai HTML artifact，一键生成单文件可分享成品。
Slides Grab 图像原生幻灯片技能
在 Claude Code 或 Codex 中，以参考模板页为视觉基准，逐页生成整页栅格图片幻灯片，最忠实地还原企业模板、品牌版式与视觉密度。
Web Clone 网站复刻方法论
一套「真源码至上」的网站复刻方法论与可执行侦察脚本，避免照抄 AI 臆造代码。
Superdesign 设计技能
让编码智能体具备真正的设计判断力，告别千篇一律的 AI 风格界面，直接产出可上线的高质量 UI、演示文稿和营销图形。
HTML Anything：万物皆可变成网页
把任何文件、文件夹、网址或数据导出自动变成精美、可交互、可分享的单文件 HTML 页面，替代冗长的 Markdown 回复。
Design Auditor 设计审计技能
面向开发者与非设计师的 Claude 技能：按 19 条专业设计规则审计 Figma 文件、代码与截图，并给出可执行的改进报告。
手绘图表技能（hand-drawn-diagrams）
一句自然语言提示，即可生成手绘风格的 Excalidraw 架构图、流程图、线框图，并附带可编辑的托管链接、逐笔描摹动画和 PNG 导出。
深色主题 React 前端设计技能
为数据密集型 React 应用提供可复用的深色视觉、玻璃拟态与动效实现方案。
Frontend Design 高质感前端设计技能
让 AI 生成避开“AI 味”模板审美、可直接用于生产环境的高品质前端界面，覆盖组件、页面、海报与完整 Web 应用。
VS Code 主题与无障碍样式指南
用主题令牌构建一致、可聚焦且支持高对比度的 VS Code 界面。
前端设计审查
帮助团队审查或创建兼具设计质量、可访问性与品牌辨识度的生产级前端界面。
Hatch Pet 动画宠物工坊
把角色或品牌视觉转成可验证、可打包的 Codex 动画宠物。
Expo 原生界面设计指南
帮助 Expo 开发者构建符合 Apple 设计规范、具备原生体验的响应式界面。
Slides-Grab 卡片新闻技能
在 Claude Code / Codex 中复用 slides-grab 工作流，生成 720×720 正方形、适合 Instagram 发布的卡片新闻图片。
Slides Grab 设计技能
在 Claude Code 或 Codex 中，把已批准的幻灯片大纲直接变成高质量、可逐张迭代修改的 HTML 幻灯片，并通过对抗式设计门禁把关质量。
Figma 设计系统规则生成器
为 Figma-to-code 项目生成符合代码库约定的设计系统规则。
网页设计工程师
把网页创作从“能用”提升为精致、可交互且具有视觉辨识度的体验。
品牌套件生成技能 (Brandkit)
为 AI 提供高端品牌指南版式设计能力，打造极简、电影感、编辑级的品牌视觉板。
Anthropic 品牌风格指南技能
一套封装了 Anthropic 官方品牌色与字体规范的技能，让任何文档或产物快速套用统一的品牌视觉风格，无需人工查色值。
Slack GIF 动图创作工具包
为 Slack 生成符合大小与尺寸约束的动画 GIF，覆盖消息动图与表情动图两类场景，自动校验 64KB 严格上限。
Image Crop and Rotate 图像裁剪旋转技能
一个将图片从中心裁剪至50%并顺时针旋转90度的本地图像处理技能，配合沙箱环境全程保护隐私。