mcpField
D
distinctive-frontend

distinctive-frontend

github.com/podo设计与 UI29589 次安装1 天前更新
代码仓库

关于 distinctive-frontend

distinctive-frontend 是一项用于生成前端组件代码的技能，面向需要明确视觉风格的 Agent。它提供四种设计系统，每种都包含字体、色彩和动画序列。

主要功能

  1. 01四种预设设计系统
  2. 02赛博朋克、粗野主义、蒸汽波与北欧极简风格
  3. 03精选字体与色彩系统
  4. 04预设交错动画序列
  5. 05生成可用于产品的组件代码

适用场景

  1. 01按指定视觉风格生成组件
  2. 02统一界面的配色与字体
  3. 03为界面添加交错动画

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill distinctive-frontend

安装后在 Claude Code 中输入/distinctive-frontend确认已加载。

附带文件stub.yaml

详细介绍

distinctive-frontend

目录条目占位内容 — 完整软件包：Koomook/claude-frontend-skills

决策树

  1. 是否已安装软件包？ 检查：你的 Agent 技能目录中是否包含 distinctive-frontend，且内容不止此占位内容。

    • 是 → 调用 distinctive-frontend 并继续
    • 否 → 转到第 2 步

  2. 你使用的是哪种 Agent？

    • Claude Code → npm install -g @bong/claude-frontend-skills
    • Cursor → npm install -g @bong/claude-frontend-skills
    • 其他 → npm install -g @bong/claude-frontend-skills，或参阅 GitHub README

安装命令

npm install -g @bong/claude-frontend-skills

安装后调用

  • 技能名称：distinctive-frontend
  • 触发短语："distinctive frontend"、"cyberpunk UI"、"brutalist frontend"、"vaporwave design"、"nordic minimalism"

功能介绍

在单个技能中打包了四套完整指定的设计系统：赛博朋克（暗色背景上的霓虹、科技感字体、故障效果）、粗野主义（高对比度、原始网格、粗体无衬线字体）、蒸汽波（柔和渐变、复古字体、合成器浪潮动效）和北欧极简主义（简洁留白、低调配色、实用无衬线字体）。每种主题都配有精选字体搭配、完整配色系统和预构建的交错动画序列。按名称选择主题后，技能会生成符合该美学风格的生产就绪组件代码。

不适用场景

  • 需要适合生产环境且风格保守的设计时（这些主题风格鲜明且偏实验性；若不进行大量调整，则不适用于企业 SaaS 或受监管行业）
  • 需要混合主题或创建混合美学风格时（每种主题都是独立且风格鲜明的）

评论

支持 Markdown