Communitygithub.com

vinay-v-7/design-studio

统一设计系统,用于构建和审查干净、独特、非模板化的界面:网站、落地页、产品 UI、仪表盘、表单、Web 和原生应用屏幕、HTML 幻灯片及图表。当用户要求设计、构建、重构、重新样式化、打磨、批评、审计或吐槽 UI;选择配色方案、字体搭配或风格;认为某些内容看起来过于通用、模板化或像 AI 生成;想要 HTML 格式的演示文稿/幻灯片;或需要架构图、流程图、时序图、ER 图、时间线图或其他图表时使用。它融合了品味导向的艺术指导、无可挑剔的工艺命令、ui-ux-pro-max 数据库、AI 模式审查、前端幻灯片与精美 HTML 模板,以及图表设计,遵循一条反“Slop”原则和质量网关。

design-studio 是什么?

design-studio 是一个全面的设计系统技能,专为 AI 编码代理(如 Claude Code、Cursor、Codex 等)设计。其核心目标是在构建和审查用户界面时,确保结果干净、独特且非模板化,避免常见的“Slop”(AI 生成的通用垃圾)。该技能整合了六大模块:`taste`(艺术指导与风格库)、`impeccable`(精准的 UI 打磨命令)、`ui-ux-pro-max`(可搜索的样式与布局数据库)、`ai-design-review`(AI 驱动的 UI 审查与问题目录)、`slides`(HTML 幻灯片制作)和 `diagrams`(HTML/SVG 图表)。它通过一个集中的路由系统 (`/design-studio <route> [target]`) 工作,根据用户的意图(例如 build、app、review、slides)动态加载最相关的模块和文档,而不是一次性加载所有内容。其工作流程遵循“Brief → Direction → Build → Look → Gate → Report”的严格流程,并包含一个“质量网关”,强制要求零 P0 问题、通用性评分 ≤ 3/10,并通过多项审查扫描(如 scan.mjs、impeccable detect、taste lint)。它还支持通过钩子实现持续审查,确保跨会话的质量一致性。总而言之,这是一个为追求视觉质量的设计驱动型开发工作流而设计的“反 Slop 利器”。

兼容平台✓Claude Code~Codex CLI✓Cursor
npx skills add vinay-v-7/design-studio-skill

在你喜欢的 AI 中提问

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

文档

design-studio 是做什么的?

<studio> 是包含此 SKILL.md 的文件夹。在 Windows 上,如果 python3 缺失,请使用 python;并使用 modules/impeccable/scripts/impeccable.cmd 代替未经处理的启动器。

加载

  1. 此文件。
  2. 路线所需的守则:doctrine/workflow.md、doctrine/principles.md、doctrine/gate.md;doctrine/conflicts.md 当模块之间存在分歧时。
  3. 仅加载下方路由到的 MODULE.md 文件,以及它们指向的引用。

绝不加载每个模块。供应商提供的 MODULE.md 文件不是独立的技能。

优先级

  1. 用户的明确指示和真实品牌资产
  2. 项目的 DESIGN.md / PRODUCT.md
  3. design-studio 的守则
  4. 活动模块的规则
  5. ui-ux-pro-max 数据库的建议——输入,而非决策;每个建议都必须通过“Slop”门槛

路由

/design-studio <route> [target]。如果没有指定路由,则根据请求推断。

意图 / 参数加载备注
build — 落地页、营销页、作品集、公共页面modules/taste/MODULE.md + modules/impeccable/MODULE.md (persuade)ui-ux-pro-max 仅用于技术栈指南
app — 仪表盘、设置、表单、产品 UI、原生屏幕impeccable (operate) + taste references/app-screens.mdui-ux-pro-max 技术栈 + UX 指南
direction — 配色方案、字体、风格优先使用 taste 库;其次搜索 modules/ui-ux-pro-max/MODULE.md 并进行 Slop 过滤写入 DESIGN.md
review / audit / roastmodules/ai-design-review/MODULE.md及其报告格式下方扫描器;去重为 ID
polish bolder quieter typeset colorize animate harden clarify distill delight adapt onboard optimize layout overdrive shape init document extract critique audit live generateimpeccable 命令参考pin/unpin 禁用
slides / deck / presentationmodules/slides/MODULE.mdtemplate-library/ 作为最后手段;.pptx → pptx 技能
diagram (+ import mermaid|drawio|excalidraw, export)modules/diagrams/MODULE.md + commands/
应用中的图表如果安装了 dataviz 技能则使用,否则使用 ui-ux-pro-max 图表领域
长篇文案使用 ai-design-review 的文案提示;如果安装了 unslop 技能则使用
hooks on|off|statusimpeccable reference/hooks.md下方钩子策略

工作流程

简要 (PRODUCT.md) → 方向 (DESIGN.md) → 构建 → 审视 → 网关 (Gate) → 报告。详情:doctrine/workflow.md。

Taste 的工作文件保留在 .taste-skill/ 中。将选定的方向总结到 DESIGN.md 中,以便每个模块只读取一个文件。

网关 (Gate)

完成条件:已检查发布尺寸;相关扫描器已运行;零个 P0;每个 P1 都有简要说明的正当理由;新 UI 的通用性评分 ≤ 3/10;SD1–SD5 通过;无虚构内容;应用 UI 具有空/加载/错误状态;报告列出了运行的层级。完整表格:doctrine/gate.md。

审查扫描器(去重到目录 ID):

node <studio>/modules/ai-design-review/scripts/scan.mjs <target> --json
<studio>/modules/impeccable/scripts/impeccable detect <target>
node <studio>/modules/taste/scripts/lint.mjs <target>

Windows 下的 detect:<studio>\modules\impeccable\scripts\impeccable.cmd detect <target>。

钩子策略

默认关闭。绝不静默启用。

在真实项目的 build 或 app 路由开始时,运行:

<studio>/modules/impeccable/scripts/impeccable hooks status

提议用户选择加入,用一句话说明原因,当 满足以下任一条件时:任务将涉及 ≥3 个 UI 文件或跨越多轮对话;审查发现 ≥2 个机械性的 P0/P1 问题(对比度、渐变文本、发光、溢出、设计系统漂移);用户要求持续强制执行。

说明:通过 .claude/settings.local.json(Claude Code)或 .cursor/hooks.json(Cursor)进行每次编辑扫描。Cursor 仅获得每次编辑检查,无 Stop 深度扫描。指向 <studio>/modules/impeccable/scripts/impeccable。

尊重 .impeccable/config.local.json 中的 hook.consent。在该项目中不再询问。

如果用户接受:impeccable hooks on。如果用户拒绝:hooks off 并且不再询问。

环境

需求使用者如果缺失
Node 18+scan.mjs跳过扫描器,并说明原因
Node 22+taste draw / lint / inspect跳过 taste 脚本
Python 3ui-ux-pro-max, diagram verify-geometry跳过那些功能
Chrome / Edgetaste inspect, impeccable URL detect跳过视觉浏览器层级
Playwright幻灯片 PDF 导出跳过 PDF
python-pptxPPT 导入跳过导入

模块地图

路径角色
modules/taste/艺术指导 (draw.mjs), lint/inspect
modules/impeccable/工艺命令, detect, hooks
modules/ui-ux-pro-max/可搜索的样式 / 配色方案 / 技术栈
modules/ai-design-review/问题目录, 扫描, 审查报告
modules/slides/HTML 幻灯片;template-library/ 是实现参考
modules/diagrams/HTML/SVG 图表

相关技能