Skill Set logo

Design Skill

Frontend-design

这是什么Skill：覆盖设计系统、配色、字体、行业场景和UX指南的专业UI/UX Skill

适用场景：快速产出设计方向和系统草案，把品牌、行业和产品类型转化成规范，检查UI 反模式，减少错位设计

推荐添加方式：在claude code 直接复制以下代码

git clone https://github.com/Ilm-Alan/frontend-design.git ~/.claude/skills/frontend-design

UI/UX Pro Max Skill

这是什么Skill：从文字需求生成react、tailwind、shadcn/ui 静态站

适合场景：用文字需求快速得到可运行原型，做官网、活动页和作品展示

Figma

Claude-code-figma

这是什么Skill：把figma 的设计节点提取成结构化信息，把figma 变成AI可以读的代码规范

适合场景：把图层、尺寸、颜色和布局交给AI，减少手动抄样式，读图层的成本，让设计交付更捷径工程规范

Claude-talk-to-figma-mcp

这是什么Skill：通过MCP和Figma插件，让AI工具读写、分析和修改Figma设计

适合场景：批量调整品牌色、字体和间距、做无障碍、层级和一致性检查、生成多端实现参考

Real-world use cases

Accessibility:"Find all text with contrast ratio <4.5:1 and suggest colors that meet WCAG AA"

Rebranding:"Change #FF6B6B to #E63946 in all primary buttons throughout the document"

Design analysis:"Analyze the visual hierarchy of this screen and suggest improvements based on design principles"

Developer handoff:"Generate the React component for 'CardProduct' including PropTypes and styles in CSS modules"

连续设计流程：

Stitchkit

这是什么skill：面向claudecode 的google stitch 工具包，串联UI生成、Figma 同步和HTML 导出

适合场景：快速生成landing、dashboard等界面、生成多套方案作为早期视觉探索

agent-skills

  • 一句话：包含 Figma、Figma Make、设计系统、UX、动效和前端实现模块的 Skills 集合。

  • 适合场景：把 Figma 语境转成开发可用信息；为 Figma Make 准备提示和校验建议；串联设计方向、token、UX 和前端落地。

awesome-claude-design

  • 一句话：收集 68 个可直接参考的 DESIGN.md 文件，用来启动设计系统探索。

  • 适合场景：参考不同品牌和行业的视觉方向；生成颜色、字体、组件和 UI kit 草案；为 AI 设计工作流准备灵感模板。

Mindrally Skills

  • 一句话：把大量 Cursor 规则转成 Claude Code Skills，包含 Figma、设计系统、UI 和 UX 规范。

  • 适合场景：增加设计系统和 UI/UX 规范约束；做可访问性、响应式和国际化检查；把规范转成更稳定的实现建议。

AI 设计工作室与技能整合

Naksha Studio

  • 一句话：面向 Claude Code 和多种 AI 编程工具的设计工作室，像一套设计团队大脑。

  • 适合场景：从需求、品牌、UX、UI 到交付闭环；做 UX audit、design score 和 visual QA；为设计负责人搭建 AI 协作流程。

tech-leads-club agent-skills

  • 一句话：Agent Skill 注册表，包含 Figma 到代码的设计实现辅助 Skill。

  • 适合场景：把 Figma 设计上下文交给 AI Agent；让设计师和工程师围绕节点协作；在多种工具中接入设计流程。