Communitygithub.com

MarioCasanovacf/justesse

Justesse:一种与模型无关的设计判断技能,具有明确的 Mario Casanova 配置文件与确定性校准。

justesse 是什么?

Justesse 是一种声明式的、仅作参考的设计能力,旨在将简短说明、仓库或视觉参考转化为连贯的生产级 UI。它将品味视为在约束条件下的语境性判断,而非偏爱某个框架、美学或组件方案。此技能的核心工作流程包括:审查现有项目文件、框架设计简报、声明设计解读、保护产品合同、原生实现、解决整个状态空间、分批验证与预检交付。它支持广泛的模式,包括营销/转化、产品/任务、事务流、两种形式的重新设计、参考转代码、视觉审查、数据可视化、体验展示等。此技能明确与模型、代理运行时、命令行工具或托管环境无关,且包含一个独特的配置文件机制,该机制默认不激活,用户需明确请求才能使用。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add MarioCasanovacf/justesse

在你喜欢的 AI 中提问

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

文档

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 中借用值来填充未回答的字段。每个问题都要附上一个工作示例,并使用该字段自身的答案形式来提问;空泛的问题会返回一种形式需要度量的情绪。

核心工作流程

  1. 检查后再提议。 读取相关的项目文件、代表性屏幕和组件、包和构建配置、设计令牌、数据形状、路由、测试以及提供的参考。识别哪些是真实的,哪些是推断的,哪些是未知的。
  2. 构建简报。 阅读 brief-and-direction.md。记录受众、用户任务、业务目标、内容和品牌证据、约束条件、主要模式以及成功信号。在实施之前列举每个请求的交付物。倾向于一种可辩护的解释,而不是趋势的拼贴。
  3. 声明设计解读。 在一个紧凑的陈述中,说明模式、受众、产品任务、视觉方向、密度和动态度量。区分决策与假设。
  4. 保护产品合约。 保留现有的框架、包管理器、组件约定、设计系统、数据和 API 合约、状态语义、路由、表单、分析、同意与法律行为、可访问性、SEO、内容含义、测试和性能预算,除非用户明确授权更改。大改模式并不是破坏它们的许可。
  5. 原生实现。 重用已安装的依赖项和已建立的原语。在项目自身的框架和样式模型中表达方向。不要仅仅因为此技能提到了某种视觉可能性,就引入 React、Tailwind、GSAP、另一个设计系统、深色模式、某种字体或任何依赖项。
  6. 解决整个状态空间。 设计响应式布局以及适用的加载、空、部分、错误、成功、禁用、权限、离线、验证和破坏性操作状态。对于仪表板和流程,保护数据的可读性、任务连续性和恢复能力。
  7. 分批渲染和验证。 首先完整构建。然后,如果预览工具存在,在同一轮中批量检查代表性窄和宽视口以及真实的内容极端情况,比较层级、阅读顺序、溢出、对比度、焦点、交互反馈和合约保留。在这一轮显示的内容中批量修复所有问题,最多再进行一轮确认即可,并停止打磨:无休止的自我 QA 循环会白白消耗预算,而界限涵盖了整个周期、截图、缺陷扫描、微编辑和重建。如果没有相应的构建、测试和视觉证据,就不要声称一个模型已为生产准备就绪。
  8. 预检交付。 阅读 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。

交付合约

交付已实现或审查过的界面,同时包含模式和设计解读、已保留和有意更改的合约、验证证据以及任何占位符或未解决的风险。对于仅审查的请求,按用户影响优先排序发现,并引用受影响的屏幕或组件;除非被要求,否则不要修改项目。

相关技能