design-principles by srbhr/resume-matcher
npx skills add https://github.com/srbhr/resume-matcher --skill design-principles何时调用： 创建新组件、修改样式或构建新页面时。何时跳过： 后端工作、API 变更、纯逻辑变更时。
请阅读 docs/agent/design/ 目录下的完整设计规范：
| 名称 | 十六进制值 | 用途 |
|---|---|---|
| 画布色 | #F0F0E8 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
| 背景 |
| 墨色 | #000000 | 文字、边框 |
| 超链接蓝 | #1D4ED8 | 主要操作 |
| 信号绿 | #15803D | 成功 |
| 警示橙 | #F97316 | 警告 |
| 警示红 | #DC2626 | 危险 |
| 钢灰色 | #4B5563 | 次要文字 |
font-serif → 标题
font-mono → 标签、元数据（大写，字间距更宽）
font-sans → 正文文字
// 按钮：直角，硬阴影，按压效果
<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">
// 卡片：硬阴影，无圆角
<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000]">
// 标签：等宽字体，大写
<label className="font-mono text-sm uppercase tracking-wider">
<div className="w-3 h-3 bg-green-700" /> // 就绪
<div className="w-3 h-3 bg-amber-500" /> // 警告
<div className="w-3 h-3 bg-red-600" /> // 错误
<div className="w-3 h-3 bg-blue-700" /> // 活跃
rounded-*（除了 rounded-none）仅用于仪表板/设置/空状态：
<span className="font-mono text-xs uppercase">[ 状态：就绪 ]</span>
请勿在简历相关组件上使用复古元素。
rounded-noneshadow-[Xpx_Xpx_0px_0px_#000000])每周安装量
91
代码仓库
GitHub 星标数
26.5K
首次出现
2026年1月22日
安全审计
安装于
gemini-cli75
codex72
opencode72
github-copilot68
cursor60
claude-code58
Invoke when: Creating new components, modifying styles, or building new pages. Skip when: Backend work, API changes, logic-only changes.
Read the full design specs in docs/agent/design/:
| Name | Hex | Usage |
|---|---|---|
| Canvas | #F0F0E8 | Background |
| Ink | #000000 | Text, borders |
| Hyper Blue | #1D4ED8 | Primary actions |
| Signal Green | #15803D | Success |
| Alert Orange | #F97316 | Warning |
| Alert Red | #DC2626 | Danger |
| Steel Grey | #4B5563 | Secondary text |
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-* (except rounded-none)For dashboard/settings/empty states ONLY:
<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>
DO NOT use retro elements on resume components.
rounded-none on all componentsshadow-[Xpx_Xpx_0px_0px_#000000])Weekly Installs
91
Repository
GitHub Stars
26.5K
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli75
codex72
opencode72
github-copilot68
cursor60
claude-code58
前端设计技能指南：避免AI垃圾美学，打造独特生产级界面
49,900 周安装