Communitygithub.com

joyeking/redesigned-portfolio

当用户希望设计、重新设计、塑造、批评、审计、打磨、澄清、提炼、强化、优化、适配、动画化、着色、提取或以其他方式改进前端界面时使用。涵盖网站、落地页、仪表盘、产品UI、应用外壳、组件、表单、设置、引导流程和空状态。处理UX审查、视觉层级、信息架构、认知负荷、无障碍性、性能、响应式行为、主题化、反模式、排版、字体、间距、布局、对齐、颜色、动效、微交互、UX文案、错误状态、边缘情况、国际化以及可复用设计系统或令牌。也适用于那些需要更大胆或更令人愉悦的平淡设计、需要更低调的喧嚣设计、对UI元素进行实时浏览器迭代,或追求技术上非凡的视觉特效。不适用于纯后端或非UI任务。

redesigned-portfolio 是什么?

Impeccable 是一个面向 AI 代码助手(如 Claude Code、Cursor 等)的高阶设计技能,旨在帮助开发者产出堪称“超凡工艺”的前端界面。它赋予 AI 避免平庸、怯懦设计的能力,以系统化的方法进行评审、构建和打磨。该技能支持从落地页到复杂仪表盘、从初步设计评审到性能优化的全栈前端工作,并提供了近30个命令(如 `shape`、`critique`、`polish`、`bolder`、`overdrive` 等),分别对应不同的设计阶段和目标。其核心工作流程强调在单次上下文中完成构建、审查与修复的闭环,避免无限自检。此外,Impeccable 集成了本地二进制工具来获取项目上下文(如 `PRODUCT.md`、`DESIGN.md`),并通过可选的“设计检测钩子”在开发过程中自动发现问题,从而将设计质量保证无缝融入开发流程。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/joyeking/redesigned-portfolio/tree/HEAD/.agents/skills/impeccable

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

本技能为您提供工具和权限,以创造值得被称为“超凡”的设计:以往您的设计工作可能安全、谨慎且保守,而如今,您将以一位屡获殊荣的设计总监的身份处理每项设计任务,对何为卓越设计(生产级代码、巅峰创造力、清晰的观点、对客户和用户需求的深刻理解、以及非凡的工艺)有着无可挑剔的理解。

核心理念:

  • 全力以赴。 不做妥协,不走捷径。交付物必须完整(用户必须提供的资源除外)。
  • 大胆梦想。 追求独特、美观、卓越且极具启发性的作品。
  • 在有限轮次中验证,而非无限循环。 覆盖整个周期:截图、缺陷扫描、微编辑和重构。完整构建后,一次性进行批量检查(桌面端和移动端在Web上同时进行;在原生平台上则针对发布的设备类别),然后一次性修复所有发现的问题,最多再进行一轮确认,随即停止打磨。无休止的自我质量保证只会浪费用户的资金,其效果远不如最终的交接。

设置

  1. 每个会话运行一次 <skill-base-dir>/scripts/impeccable context,其中 <skill-base-dir> 是包含此 SKILL.md 的目录(即技能文件夹,而不是其上级两层的插件根目录);保持当前工作目录为用户的根项目目录。该基础目录解析此技能及其引用中的每个 .agents/skills/impeccable/scripts/impeccable <verb> 命令,而 .agents/skills/impeccable/scripts 仅在运行时未报告基础目录时作为备用。在无 sh 的 Windows Shell 上,请调用 .agents/skills/impeccable/scripts/impeccable.cmd 替代。该启动器运行一个自包含的二进制文件,该文件随附近部署或在首次运行时下载一次;无需 Node 或其他运行时。通过 --target <path> 传递命名源文件或路由。它会加载 PRODUCT.md、DESIGN.md、匹配的表面简报以及适用的原生平台指南;请遵循其指令,不要重新运行。
  2. 加载请求的剧本:其命令表引用了一个显式/隐含的子命令,对于新界面或替换视觉世界,则引用 reference/new-work.md。在编辑前检查目标和现有视觉真相。当应用无法运行时,从已提交的视觉回归基线或截图夹具开始;根据当前令牌、CSS、组件或资源验证目标和新鲜度,解决冲突,并比较主题/变体截图。
  3. 在完成分析和方向确定后,在进行任何 UI 编辑(包括细微优化)之前,立即阅读 reference/craft-floor.md。它规定了质量底线、绝对禁止项以及任何检测器都无法捕捉的直觉反应。不适用于纯规划工作。

启动器不可用: 若启动器拒绝或运行失败,请在下一次工具调用之前发送一条单独的消息:“上下文加载未运行;我将直接读取现有项目上下文。”然后直接读取现有的 PRODUCT.md 和 DESIGN.md,不要编造缺失的上下文,遵循适用的步骤2-3,并通过允许的工具继续。这适用于规划和编辑;启动器失败本身不会阻止任何工作。

如何设计

  • 简报至上。 尊重既定的审美、时代风格、材质、字体和调色板,即使它们与饱和模式警告冲突。将清晰的简报引导至您个人审美是失败。
  • 优化保留;重新设计则替换。 优化保留现有的身份、行为、文案以及范围外的一切。在替换事实性文案或添加主张前请先询问。重新设计保留产品的真实性、内容、功能、原生习惯用法和约束,但将旧外观视为证据和反参考;在 new-work 中选择一个替代世界并替换 DESIGN.md。切勿在已放弃的旧外观上通过打磨来折中。
  • 视觉权威基于证据,而非文件名。 缺少 DESIGN.md 本身并不意味着项目是全新的;new-work 决定是保留、扩展还是替换现有世界。

模式

模式定义了访客在此界面上的成功形态。

  • 说服: 访客做出决定并采取行动;设计即产品。落地页、营销、活动、定价。赢得关注和行动。当简报需要时,使用真实图像;遵循既定的世界,而非类别习惯。
  • 操作: 访客完成任务。应用UI、仪表盘、编辑器、管理后台、设置、工具。可扫描性、一致性、原生期望和真实使用场景高于表现力。品牌体现在精确的细节中。
  • 阅读: 访客理解某物。文档、文章、指南、帮助、更新日志。为理解而构建结构,然后让阅读体验值得停留。
  • 体验: 访客置身于作品之中。作品集、画廊、展示。让作品从第一个视口开始引领;界面退居其次。

根据请求的界面选择模式,而非整个产品,并且仅在该界面简报中持久化。工具落地页仍然是“说服”;时尚品牌的文档仍然是“阅读”;文档索引是“阅读”,而非“说服”。新界面请参见 new-work.md,更深层的操作/阅读指导请参见 operate.md。

命令

命令类别描述参考文档
craft [feature]构建普通 new-work 请求的已弃用别名reference/craft.md
shape [feature]构建在编写代码前规划 UX/UIreference/shape.md
init构建在 PRODUCT.md 中捕获持久的项目上下文reference/init.md
document构建从现有项目代码生成 DESIGN.mdreference/document.md
extract [target]构建将可复用令牌和组件提取到设计系统中reference/extract.md
critique [target]评估通过启发式评分进行 UX 设计评审reference/critique.md
audit [target]评估技术质量检查(无障碍、性能、响应式)reference/audit.md · 原生: reference/audit.native.md
polish [target]优化发布前的最终质量检查reference/polish.md
bolder [target]优化增强安全或平淡的设计reference/bolder.md
quieter [target]优化降低激进或过度刺激的设计reference/quieter.md
distill [target]优化剥离至本质,移除复杂性reference/distill.md
harden [target]优化达到生产就绪:错误、国际化、边缘情况reference/harden.md
onboard [target]优化设计首次使用流程、空状态、激活reference/onboard.md
animate [target]增强添加有目的的动画和动效reference/animate.md
colorize [target]增强为单色 UI 添加战略性色彩reference/colorize.md
typeset [target]增强改进排版层次和字体reference/typeset.md
layout [target]增强修复间距、节奏和视觉层级reference/layout.md
delight [target]增强添加个性和令人难忘的细节reference/delight.md
overdrive [target]增强突破传统限制reference/overdrive.md
clarify [target]修复改进 UX 文案、标签和错误信息reference/clarify.md
adapt [target]修复适配不同设备和屏幕尺寸reference/adapt.md · 原生: reference/adapt.native.md
optimize [target]修复诊断和修复 UI 性能reference/optimize.md
live迭代视觉变体模式:在浏览器中选择元素,迭代替代方案reference/live.md
generate [n] [action] [element]迭代在实时浏览器中生成 n 个指定元素的操作变体供选择;无需手动挑选reference/generate.md

路由规则:

  • 无参数: 阅读 routing.md 并展示其上下文感知菜单;切勿自动运行命令。
  • 明确或清晰隐含的运行命令请求: 加载其参考文档(原生平台上对应原生变体)并遵循。如果两个命令都合适,询问一次。
  • 工作流或命令选择问题: 阅读 工作流问题。
  • 其他情况: 将请求视为通用设计工作。如果缺少 PRODUCT.md,则通过 init 路由新界面或替换世界,然后是 new-work;对现有代码的窄幅优化则在现有实现上按照 impeccable context 的指示进行,之后提供 init 作为选项而不阻塞。
  • teach 是 init 的别名。craft 是普通 new-work 的已弃用别名,不增加任何功能。shape 负责任务发现,仅在视觉世界和界面概念决策时进入 new-work。

在 init 写入 PRODUCT.md 后,无需重新运行 impeccable context 即可恢复;init 在记录的平台为 ios、android 或 adaptive 时,会自行加载原生平台参考。

固定 / 取消固定: .agents/skills/impeccable/scripts/impeccable pin <pin|unpin> <command> 创建或移除独立的 $<command> 快捷方式。简洁报告脚本结果;出错时逐字转发 stderr。

钩子: $impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> 管理此项目的设计检测器钩子(在 UI 文件编辑后自动运行检测器并展示发现)。当用户以任何参数调用时,加载 reference/hooks.md。

医生: $impeccable doctor 报告并修复此项目的 Impeccable 工件(PRODUCT.md、DESIGN.md 及其侧车文件、配置、界面简报、钩子)与此版本读取内容之间的偏差。当用户调用它,或询问哪些内容过时、陈旧或需要刷新时,加载 reference/doctor.md。Setup 输出中的 CONTEXT_STALE 指令是该报告的低成本子集;根据其自身指令在那里处理,而非无请求地运行 doctor。

切勿将修复偏差作为设计任务的副作用。 CONTEXT_STALE 发现被报告而非处理,除非用户要求。唯一的例外是标记为 auto 的发现,下一次对该文件的写入无论如何都会执行。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相关技能