mcpField
D
design-principles

design-principles

github.com/srbhr设计与 UI29.0k92 次安装1 天前更新
代码仓库

关于 design-principles

用于创建或修改界面组件与页面的设计技能，规定瑞士国际主义风格的设计规则。内容涵盖限定配色、字体、组件样式及应避免的设计模式。

主要功能

  1. 01瑞士风格配色方案
  2. 02衬线、等宽与无衬线字体用途
  3. 03直角边缘与硬阴影
  4. 04组件状态指示样式
  5. 05反模式检查清单

适用场景

  1. 01设计新的界面组件
  2. 02调整页面样式
  3. 03统一字体与配色
  4. 04按设计规范检查样式

安装

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

$npx skills add https://github.com/srbhr/resume-matcher --skill design-principles

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

详细介绍

瑞士国际主义风格设计

调用时机： 创建新组件、修改样式或构建新页面时。 跳过时机： 后端工作、API 变更、纯逻辑变更。

设计前

请阅读 docs/agent/design/ 中的完整设计规范：

  1. style-guide.md - 核心规则、颜色、排版、组件
  2. design-system.md - 扩展令牌、间距、阴影
  3. swiss-design-system-prompt.md - 瑞士风格 UI 的 AI 提示词

颜色

名称十六进制用途
Canvas#F0F0E8背景
Ink#000000文本、边框
Hyper Blue#1D4ED8主要操作
Signal Green#15803D成功
Alert Orange#F97316警告
Alert Red#DC2626危险
Steel Grey#4B5563次要文本

排版

font-serif  → Headers
font-mono   → Labels, metadata (uppercase, tracking-wider)
font-sans   → Body text

组件模式

// Button: Square corners, hard shadow, press effect
<button className="rounded-none border-2 border-black shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none">

// Card: Hard shadow, no rounded corners
<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000]">

// Label: Mono, uppercase
<label className="font-mono text-sm uppercase tracking-wider">

状态指示器

<div className="w-3 h-3 bg-green-700" />  // Ready
<div className="w-3 h-3 bg-amber-500" />  // Warning
<div className="w-3 h-3 bg-red-600" />    // Error
<div className="w-3 h-3 bg-blue-700" />   // Active

反模式（严禁）

  • rounded-*（rounded-none 除外）
  • 渐变或模糊阴影
  • 调色板之外的自定义颜色
  • 粉彩色或柔和色
  • 无功能的装饰性图标

复古终端元素

仅适用于仪表盘/设置/空状态页面：

<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>

请勿在简历组件中使用复古元素。

检查清单

  • 所有组件均使用 rounded-none
  • 硬阴影（shadow-[Xpx_Xpx_0px_0px_#000000]）
  • 正确的排版（衬线标题、等宽标签、无衬线正文）
  • 颜色仅来自调色板
  • 无渐变或模糊效果

评论

支持 Markdown