mcpField
F
frontend-design

frontend-design

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

关于 frontend-design

frontend-design 是用于构建界面的技能，提供八种明确的审美方向。它通过 CSS token 约束设计，并要求屏幕文案传达真实信息，而非装饰性占位内容。

主要功能

  1. 01选择八种审美方向之一
  2. 02使用固定的 CSS token 集
  3. 03使组件遵循所选方向
  4. 04确保屏幕文案传达有效信息
  5. 05避免虚构内容和字形图标

适用场景

  1. 01按明确的视觉风格构建 UI
  2. 02让组件保持设计 token 一致
  3. 03用有意义的内容替换装饰性占位文案

安装

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

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

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

附带文件stub.yaml

详细介绍

frontend-design

目录占位条目 — 完整技能：Ilm-Alan/frontend-design

决策树

  1. 是否已安装完整技能？

    • 全局：f=~/.agents/skills/frontend-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • 项目：f=.agents/skills/frontend-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 技能已安装为 frontend-design，调用它并继续
    • pointer → 转到第 2 步

  2. 检测作用范围，然后安装：

    [ -e ~/.agents/skills/frontend-design ] && echo "global" || echo "project"

    全局：

    npx skills add Ilm-Alan/frontend-design --skill frontend-design -g -y

    项目：

    npx skills add Ilm-Alan/frontend-design --skill frontend-design -y

    Claude Code： 发送以 ! 开头的命令作为聊天消息，即可在不退出对话的情况下运行。

注意事项

  • 许可证： MIT
  • 名称冲突： frontend-design 也是由 anthropics-skills 编写的（其安装版本或目录占位条目）；同时安装两者会覆盖先安装的版本。

安装后调用

  • 技能名称：frontend-design
  • 触发短语："aesthetic anchor"、"brutalist design"、"swiss design"、"themed UI"、"frontend-design"

功能

提供八种命名的美学锚点，每种都由一组固定的 CSS 令牌定义，涵盖表面、排版、强调色和结构。该技能会在编码前确定设计方向和差异点，然后构建严格遵循所选锚点令牌的组件；混合风格（例如“带有粗野主义边缘的瑞士风格”）在设计上不予采用。第二条规则约束内容：屏幕上的每个字符串都必须指明真实信息，因此禁止虚构的遥测数据、凑数的等宽大写标签、替代标准 UI 文案的主题化文本，以及 Unicode 字符图标。这样一来，设计系统就是约束，而非建议。

Anthropic 同名技能（属于 anthropics-skills）也会安装到同一个 frontend-design 目录，因此两者只能保留一个。

不适用场景

  • 需要同时支持 React、Vue 和 Svelte 等多个技术栈时（使用 ui-ux-pro-max）
  • 主要交付内容是动画或视频时（使用 remotion）
  • 尚未选定具体美学方向且需要先探索时（使用 design-consultation）

评论

支持 Markdown