design

设计 skill 概览

design skill 可以把含糊的 UI 需求转化为可直接交付、带有明确审美判断的视觉输出，尤其适合问题是“把这个页面/组件做得更好看”，而不是“加新逻辑”的场景。它面向 UI Design 工作、基于截图的精修、排版整理，以及修复那些不好看、不统一、不清晰或布局别扭的视觉问题。

design skill 最适合什么时候用

当任务属于前端呈现，而不是后端行为时，就用 design：页面、组件、dashboard、营销区块、空状态，以及视觉焕新。它尤其适合用户给出截图、粗略的页面描述，或者直接抱怨界面“感觉不对劲”的情况。

design skill 的不同之处

这个 design skill 不是一个泛泛的风格提示词。它会推动你做出更明确的审美判断，要求布局和 tokens 保持一致，并避免做出那种一眼就很“默认模板”的 UI。这个 repo 还提供了很多实用防线，用来规避混用 CSS 体系、表层层级薄弱、视觉模式过度重复等常见坑。

什么时候不该用它

如果核心问题是数据流 bug、状态管理、API 问题，或者纯后端工作，就不要把 design 当作主要解决方案。若根本问题出在逻辑、路由或 schema，上这个 skill 也许能改善表现层，但不会解决根因。

如何使用 design skill

安装与阅读顺序

使用 npx skills add tw93/Waza --skill design 安装。先读 SKILL.md，然后按这个顺序查看参考文件：references/design-traps.md、references/design-reference.md、references/design-aesthetic-quality.md、references/design-tokens.md，如果界面更像 dashboard，再看 references/design-data-viz.md。这个顺序能帮助你在生成视觉方案前先识别约束。

这个 skill 需要什么输入

最好的 design 使用方式，始于具体输入：界面类型、受众、当前痛点、品牌方向，以及任何硬性约束。高质量的输入会像这样：“把这个定价页重新设计给企业买家，保留现有文案，使用克制、偏高级的调性，并避免深色主题”，而不是“让它更好看一点”。

如何提问，才能得到更好的输出

在 UI Design 场景里，要告诉 skill 哪些必须固定，哪些可以调整。把内容、目标设备、现有 design system 和具体问题都写清楚。如果你有截图，也要说明问题究竟出在层级、间距、密度、颜色、排版，还是组件一致性上。

实用工作流

先锁定方向：确认结果应该偏稳妥、偏品牌一致，还是偏探索。然后先要一个清晰的 UI 方向，拿第一版对照你的约束检查，再只针对最弱的一项做迭代。如果结果还是很泛，别只要求更多视觉元素，而是要它给出更强的审美立场。

design skill 常见问题

design 和普通 prompt 一样吗？

不一样。普通 prompt 可以描述风格，但 design skill 额外加入了可复用的指导、反模式检查，以及面向 UI 工作的输出约束。这样通常能减少“默认 prompt”式结果，并帮助模型做出更难但更关键的审美选择。

design skill 适合新手吗？

适合，只要你能描述界面和问题。不需要很深的设计术语，但需要把上下文说清楚。新手如果能提供截图、产品目标，以及哪些地方“看起来不对”，通常会得到更好的结果。

它适合 dashboard 和图表吗？

适合，但只有当界面本身偏数字密集或图表密集时，才使用 dashboard 专向的参考。对于应用外壳、卡片这类 UI Design 工作，dashboard 规则可能过于严格，反而会把布局限制得太死。

什么时候应该跳过 design？

当任务主要是后端逻辑、数据转换或基础设施时，就跳过它。若你只是想快速做个外观微调，也不需要更刻意的设计决策，同样可以不使用它。

如何提升 design skill

提供更好的 design 约束

质量提升最大的来源不是更多形容词，而是更好的约束。说明这个界面是做什么的、谁在用、哪些部分必须保留、哪些部分需要改变。相比“做得高级一点”，“让它更克制、更可信、更高效，面向金融用户”会更有用。

给出更明确的视觉反馈

如果第一版不对，要精确指出问题：层级太平、间距太松、排版太活泼，或者表层太嘈杂。design skill 最快的提升方式，是一次只修正一个维度，而不是要求整页重画。

警惕常见失败模式

最常见的错误包括：像模板一样的布局、过度装饰的区块、不一致的圆角，以及千篇一律的强调色处理。这个 repo 里的参考之所以有价值，就是因为它们会在这些模式出现在输出之前先提醒你。

用截图和示例来迭代

在 design 使用中，把输出和截图或一个已知效果不错的参考图对比，然后提出有针对性的修改请求。如果页面需要更强的 UI Design 质量，就一次只要求一个变化，比如更紧的层级、更合适的字号体系，或更有辨识度的表层系统。