mcpField
I
impeccable-design-polish

impeccable-design-polish

github.com/nexu-io设计与 UI104.6k2.6k 次安装今天更新
代码仓库

关于 impeccable-design-polish

impeccable-design-polish 是用于打磨现有设计成果的技能,面向需要改进层级、可用性、响应式表现和无障碍性的设计与开发流程。它要求先检查当前页面,再围绕用户原意做少量重点修改,而不是从头重做。

主要功能

  1. 01审查层级、间距与排版
  2. 02评估设计一致性
  3. 03直接修改现有作品
  4. 04添加克制且有用的动效
  5. 05修复移动端与可访问性问题
  6. 06为展示和分享进行视觉检查

适用场景

  1. 01检查页面并找出优先修复的问题
  2. 02在保留原意的前提下打磨现有设计
  3. 03修复移动端溢出、对比度或缺失状态
  4. 04分享前完成最终视觉检查

安装

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

$npx skills add https://github.com/nexu-io/open-design --skill impeccable-design-polish

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

详细介绍

精细打磨设计

将此技能用作现有设计的生成后优化步骤。不要从头开始重做项目;应让当前成果更精致、更易用,更接近设计师愿意交付的作品。

后续模式

  • 审查:找出层级、间距、颜色、字体、交互状态、响应式设计和无障碍方面影响最大的问题。
  • 评析:说明哪些地方显得普通、设计过度、设计不足或不一致。
  • 打磨:直接编辑成果,在保留用户意图的同时,优先改进最重要的问题。
  • 添加动画:仅在有助于反馈或叙事时,添加克制且实用的动效。
  • 加固:修复移动端溢出、文本裁切、对比度问题、缺失状态、失效链接和脆弱的布局假设。
  • 上线准备:为展示或分享做好准备,包括最终视觉质检和明确的后续步骤。

操作规则

  1. 编辑前先检查当前 HTML/页面。不要只凭提示内容猜测。
  2. 除非用户明确要求修改,否则保留现有内容、品牌和场景。
  3. 优先进行少量但果断的修复,避免大范围的表面改动。
  4. 消除常见的 AI 痕迹:
    • 没有产品理由的紫蓝色发光渐变
    • 千篇一律的三卡片功能区
    • 到处都是尺寸过大的圆角卡片
    • 空洞的营销形容词
    • 不一致的间距和字体比例
    • 无助于理解的装饰效果
  5. 保持无障碍:焦点状态、对比度、语义化控件、易读文本,以及减少动态效果时的备用方案。
  6. 完成后,让成果处于更完善、可运行的状态,而不只是列出批评意见。

最佳搭配

  • 搭配 design-taste-frontend 或 gpt-taste,以获得更有力、避免设计套路的改版。
  • 搭配 emilkowalski-motion 或 GSAP 技能,专门打磨动效。
  • 当成果需要真实视觉素材而非仅用 CSS 装饰时,搭配图像/视频技能。

评论

支持 Markdown