justesse 是做什么的?
将简短说明、仓库或视觉参考转化为连贯的生产 UI。将品味视为在约束条件中的语境性判断,而非偏爱的框架、美学或组件配方。
这是一种声明式的、仅作参考的能力。其设计推理、规则和验收标准必须独立于执行它的模型、代理运行时、命令行工具、供应商和托管环境。特定于运行时的发现可能会暴露此目录,但它不得改变技能的语义,也不得为其工作流程所必需。
锁定操作模式
在做出设计决策之前,选择一个主要模式。在设计解读中声明它,并且不要静默地切换模式。如果两种模式意味着实质性不同的交付物,而请求没有解决它们,则提出一个集中的问题。任务可以指定一个次要模式,但主要模式控制工作流程和验收标准。
| 模式 | 主要成果 | 所需参考 |
|---|---|---|
| 营销/转化 | 传达价值并推动受众采取一项可衡量的行动 | marketing-surfaces.md |
| 产品/任务 | 帮助用户理解状态并完成重复性工作,包括仪表板 | product-and-transaction.md |
| 事务流 | 安全且可恢复地完成一个重要或多步骤操作 | product-and-transaction.md |
| 重新设计:保留 | 在保留可识别品牌和产品合约的前提下提高质量 | redesign-preservation.md |
| 重新设计:大改 | 建立新的视觉语言,同时保留未经批准更改的合约 | redesign-preservation.md |
| 参考转代码 | 将提供的视觉证据转化为目标项目的原生实现 | reference-to-code.md |
| 视觉审查 | 诊断层级、一致性、可用性、响应式和生产风险 | interface-quality.md |
| 阅读/文档 | 通过文档、指南、文章、帮助或变更日志帮助读者理解某些内容 | reading-surfaces.md |
| 体验/展示 | 让访客沉浸在作品集、画廊或展览作品中,同时界面退居幕后 | experience-surfaces.md |
| 图像概念 | 定义或产生服务于界面的美术指导 | image-concepts.md |
| 数据可视化 | 将度量、比较、分布、关系和不确定性转化为可检查的证据 | data-visualization.md |
| 高层决策备忘录 | 将有边界的证据转化为面向决策者的、以结论为主导的演示 | decision-memo.md |
选择主要模式后,单独设置配置文件。此技能提供了配置文件机制,但没有配置文件。只有当 personal:<name> 标志在请求或项目说明中明确出现时,才激活它。绝不要根据人名、工件类型或此技能的可用性来推断它。没有该标志时,保持视觉语言、语调、调色板、材质和表面颜色为品牌中性;浅色纸画布不是默认设置。
激活的标志会打开一个必需的声明,而不是授予一个视觉系统。在配置文件下做出任何设计决策之前,必须获得 profile-declaration.md 中所有十个字段的具体答案,并且永远不要通过推断,或从另一个配置文件、此技能的示例或其 harness fixtures 中借用值来填充未回答的字段。每个问题都要附上一个工作示例,并使用该字段自身的答案形式来提问;空泛的问题会返回一种形式需要度量的情绪。
核心工作流程
- 检查后再提议。 读取相关的项目文件、代表性屏幕和组件、包和构建配置、设计令牌、数据形状、路由、测试以及提供的参考。识别哪些是真实的,哪些是推断的,哪些是未知的。
- 构建简报。 阅读 brief-and-direction.md。记录受众、用户任务、业务目标、内容和品牌证据、约束条件、主要模式以及成功信号。在实施之前列举每个请求的交付物。倾向于一种可辩护的解释,而不是趋势的拼贴。
- 声明设计解读。 在一个紧凑的陈述中,说明模式、受众、产品任务、视觉方向、密度和动态度量。区分决策与假设。
- 保护产品合约。 保留现有的框架、包管理器、组件约定、设计系统、数据和 API 合约、状态语义、路由、表单、分析、同意与法律行为、可访问性、SEO、内容含义、测试和性能预算,除非用户明确授权更改。大改模式并不是破坏它们的许可。
- 原生实现。 重用已安装的依赖项和已建立的原语。在项目自身的框架和样式模型中表达方向。不要仅仅因为此技能提到了某种视觉可能性,就引入 React、Tailwind、GSAP、另一个设计系统、深色模式、某种字体或任何依赖项。
- 解决整个状态空间。 设计响应式布局以及适用的加载、空、部分、错误、成功、禁用、权限、离线、验证和破坏性操作状态。对于仪表板和流程,保护数据的可读性、任务连续性和恢复能力。
- 分批渲染和验证。 首先完整构建。然后,如果预览工具存在,在同一轮中批量检查代表性窄和宽视口以及真实的内容极端情况,比较层级、阅读顺序、溢出、对比度、焦点、交互反馈和合约保留。在这一轮显示的内容中批量修复所有问题,最多再进行一轮确认即可,并停止打磨:无休止的自我 QA 循环会白白消耗预算,而界限涵盖了整个周期、截图、缺陷扫描、微编辑和重建。如果没有相应的构建、测试和视觉证据,就不要声称一个模型已为生产准备就绪。
- 预检交付。 阅读 production-preflight.md,修复适用的失败,交叉检查每个请求的交付物,并报告无法运行的检查。
参考路由
仅加载活动模式所需的内容;每个参考在此处直接链接。
- 始终阅读 brief-and-direction.md、interface-quality.md 和 production-preflight.md。
- 对于营销、活动、编辑转化、定价、发布或其他获客界面,阅读 marketing-surfaces.md。
- 对于文档、指南、文章、帮助、变更日志以及以理解为目标的较长形式页面,阅读 reading-surfaces.md。
- 对于作品集、画廊、展示以及作品本身主导的展览页面,阅读 experience-surfaces.md。
- 对于应用程序 UI、仪表板、数据密集的工作区、表单、结账、上手流程、设置和多步骤流程,阅读 product-and-transaction.md。
- 每当界面包含 KPI、图表、分析图形、指标比较、数字表格或日期/期间显示时,阅读 data-visualization.md。
- 每当现有界面发生变化时,无论是在保留还是大改模式下,阅读 redesign-preservation.md。
- 当截图、模型、网站或其他视觉示例作为实现输入时,阅读 reference-to-code.md。
- 仅当图像是简报的一部分或图像概念是选定模式时,阅读 image-concepts.md。
- 当简报缺乏视觉词汇或需要区分竞争方向时,阅读 style-lenses.md。
- 最后,并且仅当界面质量检查通过后,才阅读 finishing.md,用于交付级别的完善和判断几乎相同的候选者;完善永远不能替代层级、真实性和状态。
- 仅当被检查的项目已经使用 React、Next.js 或 Tailwind,或者用户明确授权为全新项目使用该技术栈时,才阅读 react-next-tailwind.md;它不是便携式默认设置。
- 对于高层备忘录、决策演示板或任何以结论为主导的幻灯片序列,阅读 decision-memo.md。
- 当交付物是可编辑的演示文件而不是页面时,在布置第一张幻灯片之前,阅读 pptx-safe-html.md。
- 当同一个世界观必须贯穿仪表板、创作着陆页、案例研究、报告和演示时,阅读 surface-translation.md。
- 当存在确切的
personal:<name>标志时,首先阅读 profile-activation.md 和 profile-declaration.md,然后在声明完成后阅读 profile-data-semantics.md。否则不要加载或应用它们。 - 仅当运行受控的配置文件比较、阴性对照、盲审或晋升决策时,阅读 profile-calibration.md。
- 仅用于归属、审计、重新分发或上游比较时,阅读 upstream-provenance.md。
不要递归加载 references 中不相关的文件。
条件能力
仅在可用、被授权且必要时,使用图像生成、图像搜索或浏览。对于图像工作,优先使用现有仓库资产,然后是用户提供的资产,最后才是授权工具。否则,提供特定的概念简报或清晰标记的占位符,而不要声称它是最终作品。仅对真正缺失的外部资产或依赖项使用占位符;指定每个占位符的尺寸、角色和下一步替换方案。不要捏造产品截图、客户、指标、标志或代言。
仅当动效有助于阐明层级、反馈、连续性或叙事时,才使用动效。优先使用项目现有的机制和最轻量的适当技术。在没有动效的情况下保留内容,尊重减少动效偏好,避免滚动捕捉,并清理观察者、监听器和时间线。动效库是条件性的实现选择,从来不是必需项。仅当原生 CSS 过渡不再足够,且工作需要分层编排、滚动叙事或专用动效引擎时,才升级到 motion-patterns.md。
交付合约
交付已实现或审查过的界面,同时包含模式和设计解读、已保留和有意更改的合约、验证证据以及任何占位符或未解决的风险。对于仅审查的请求,按用户影响优先排序发现,并引用受影响的屏幕或组件;除非被要求,否则不要修改项目。