dsh-aesthete-agent:把前端配色从「凭感觉」变成「凭检查」

前言

在 DeepSeek Harness(DSH)里做页面或组件时,配色往往靠模型「语感」或人工微调:好看与否难复现,对比度、色盲可读性、是否显得「AI 味」也缺少统一验收标准。社区插件 dsh-aesthete-agent 把上游 aesthete-agent(前端美学引擎)以 DSH 原生插件形式接入:118 块实证色板按语域选板,对比度、色盲模拟、AI 味检测、五维评分四道机械检查,检查不过不交付。引擎在本机用 Python 标准库运行,零联网、零 API 密钥;维护者为 docsor1212,许可证 MIT。目录分类为模型推理,与「本地推理式美学决策」的定位一致。

这是什么

dsh-aesthete-agent 是 aesthete-agent 的 DSH 原生插件。它解决的是:如何把配色与前端美学决策变成可重复、可验收的流程,而不是每次对话重新猜一套颜色。

与「直接让模型写 CSS 变量」相比,插件提供 17 个原生工具和 7 条斜杠命令,把选板、构图、验收、向客户解释「为什么这样配」串成 README 建议的工作流;自然语言即可触发,例如「给这个页面配色打个分」「要素雅耐看的,出三个方向对比」。

上游引擎与技能本体见 docsor1212/aesthete-agent(MIT);在线演示见 https://docsor.cn/aesthete/。

核心能力

实证色库与语域选板

  • 118 块实证色板,按语域(素雅、大气、鲜艳、科技感、国风水墨等)选板。
  • aesthete_match:按自然语言需求在库中选板并识别语域。
  • aesthete_directions:跨语域方向对比,整页渲染并排,差异可辨,并回传选择句供后续继续。

四道机械检查

README 将验收概括为四道检查:对比度、色盲模拟、AI 味检测、五维评分。对应工具包括:

工具 作用
aesthete_report 四道检查一键验收,PASS/FAIL 裁决
aesthete_matrix 全对对比度矩阵与最佳文字/底色配对
aesthete_blind 红绿蓝三型色盲模拟与碰撞风险
aesthete_score 五维评分卡(/20)与修复建议
aesthete_evidence 页面证据卷宗:四闸与静态审计合成验收记录

构图、令牌与图表

  • aesthete_recipes:14 条可组合的表现力技法,整页设计前建议先取。
  • aesthete_scaffold / aesthete_scene:整页骨架或 showcase 级单场景;aesthete_tokens 输出语义设计令牌(CSS+JSON),强调图形/文字双档与墨色自动调墨。
  • aesthete_visualize:色板套入 10 类真实 UI 场景做渲染自审。
  • aesthete_chartpal:图表用色三型派生(分类/顺序/发散),含色盲区分度验证。
  • aesthete_typescale:CJK 友好模块字阶(12px 下限、行高配对、tabular-nums)。

体检、对账与叙事

  • aesthete_audit:对已有页面做机械体检,漂移/渐变/对比问题带可执行修复值。
  • aesthete_qc:渲染对账,用截图与声明令牌核对大底真伪与板外入侵(宿主具备浏览器工具时,工作流建议在交付前使用)。
  • aesthete_narrate:把实测数字转成双语说明,数字可溯源。

斜杠命令(7 条)

/aesthete-status(自检+台账)、/aesthete-report、/aesthete-match、/aesthete-score、/aesthete-directions、/aesthete-tokens、/aesthete-audit。

安装与运行环境

插件以 npm 包形式发布,当前资料中的版本为 0.11.0;package.json 要求 Node >= 22、dsh 0.2.1-rc.2。美学引擎需要本机 Python 3.8+(纯标准库,无额外 pip 依赖说明于 README)。

Web 配置下安装:

dsh plugin --profile web add github:docsor1212/dsh-aesthete-agent

无头环境把 --profile web 换成 --profile headless。

安装前请自行审查仓库源码与 MIT 许可证。插件在当前 dsh 进程权限下运行;README 安全声明写明:零联网、仅子进程调用本机 python3/python 执行捆绑脚本、不读凭据,写盘范围主要为当前工作目录(如 tokens.css、chartpal.html、*.narration.md、*.evidence.json 等)。

典型工作流

README 建议按四步使用,下面按顺序说明。

  1. 选板:用 aesthete_match 描述需求,或用 aesthete_directions 出跨语域对比页,用户点名后按回传句继续。
  2. 构图:aesthete_recipes 取技法并组合 3~5 条;快速起点可用 aesthete_scaffold / aesthete_scene,令牌接线用 aesthete_tokens。
  3. 验收:交付前跑 aesthete_report / aesthete_evidence;宿主有浏览器工具时对截图跑 aesthete_qc,PASS 再交付。
  4. 转述:向客户解释配色理由时,用 aesthete_narrate 生成双语、可溯源的数字说明。

适用场景与注意

适合:需要在 DSH 智能体工作流里做前端配色与美学验收的开发者;重视 WCAG 对比度、色盲可读性,并希望减少「AI 通用紫渐变」类审美漂移的团队。

注意:

  • DSH 社区插件目录(如 SkillHub)是独立站点,与 DeepSeek / 幻方无官方从属关系;安装命令必须以仓库 README 为准,勿凭插件名自行拼接。
  • 零联网指引擎运行时不发起网络请求;安装插件本身仍依赖你现有的 DSH / GitHub 插件拉取方式。
  • 验收以机械闸门为准:FAIL 时应按工具给出的修复建议或矩阵结果改色,而不是忽略报告直接交付。

结尾

dsh-aesthete-agent 把 aesthete-agent 的实证色库与四道机械检查搬进 DSH,让配色决策可检查、可留痕、可本地完成。进一步了解可访问插件目录页与 GitHub 仓库:

  • 目录页:https://www.skillhub.cn/plugins/docsor1212/dsh-aesthete-agent
  • GitHub:https://github.com/docsor1212/dsh-aesthete-agent
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜