关于 fstack-design
fstack-design 是面向现有项目 UI 开发的审查与调整技能。它依据项目已有的设计系统检查界面，并在实施修正前征求批准。
主要功能
- 01检查样式、设计令牌和现有组件
- 02找出偏离设计系统之处
- 03标记常见视觉不一致
- 04建议复用现有令牌或模式
- 05按组件逐步实施已批准的修正
适用场景
- 01审查风格不一致的新页面
- 02让组件符合现有样式
- 03整理 Agent 修改后的界面
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/fstack-design确认已加载。
详细介绍
/fstack-design
Agent 会写出设计垃圾：随机的渐变、五种字号、脱离色板的颜色、从不重复的间距。这个技能让 UI 遵循项目已有的样式，并以朴素的设计常识清理其余部分。
它执行的规则是：首先匹配已有内容。 新 UI 应该看起来像是它本来就属于这里，而不是从另一个应用粘贴过来的。
何时使用
- 新增或变更的 UI 看起来不对劲、千篇一律，或与其余部分不一致。
- Agent 刚构建了一个页面，而它感觉很垃圾。
- 你对某个页面、组件或整个 UI 调用
/fstack-design。
步骤
- 在动任何东西之前先了解现有设计系统。阅读样式表、token、主题，以及几个做得不错的现有组件。记下真实的色板、字号层级、间距层级、圆角、阴影，以及已在使用的组件模式。
- 对照两方面审查目标 UI：
- 现有系统 —— 它在哪里自行发明了颜色、尺寸、间距或组件，而不是复用已有内容？
- 朴素的设计常识 —— 层级、对齐、一致的间距、克制。标出垃圾设计的迹象：没有理由的渐变、过多字号、不一致的内边距、随机的阴影、用 emoji 当图标、脱离色板的一次性颜色、冗余的包装 div。
- 生成一份简短的问题清单。每一项包括：哪里不对劲，以及它应当改用哪个现有 token 或模式。
- 停下来询问要应用哪些。
- 修复已批准的项目，一次一个页面或组件，复用现有 token 和类——绝不要发明新的，除非用户同意该系统确实缺少某些东西。展示 diff。
禁止
- 当项目已有合适的颜色、字体、间距值或组件时，发明新的。
- 重新设计。这只是在对齐和清理；它不是重新构想产品。
- 为了“修复”问题而添加 UI 框架或组件库。
- 未经批准就应用更改。
示例
用户：
/fstack-design新的设置页面看起来不对劲Agent：“先阅读设计系统。关于设置页面的问题：
- 保存按钮使用了
#3b82f6—— 应用的主色是--color-accent。使用该 token。- 这里有三种标题字号；应用其余部分使用两种（
--text-lg、--text-base）。去掉中间那种。- 卡片内边距是
18px—— 其他所有卡片都使用--space-4（16px）。与之一致。- 渐变标题背景 —— 应用中没有其他任何地方使用渐变。改用纯色表面颜色。
- 标签页里用了 emoji 图标；应用使用
src/icons中的图标集。替换它们。全部修复，还是挑选？我会一次做一个部分并展示 diff。”
评论
支持 Markdown