naqsh 是做什么的?
v0.6。<skill> 表示此技能的基础目录。脚本需要 Node ≥ 22 和本地的 Chrome/Edge;无需额外安装。
1. 路由
在执行任何操作之前,用一行明确说明界面类型和模式。
| 界面类型 | 信号词 | 参考文档 |
|---|---|---|
page | 落地页、作品集、营销、产品、单页 | references/page.md |
app | ERP、管理后台、仪表盘、表格、表单、设置、CRUD | references/app.md |
| 模式 | 修改代码? | 输出 |
|---|---|---|
build | 是,新UI | UI + DESIGN.md |
redesign | 是;保留行为、数据和文案 | UI + DESIGN.md |
audit | 否 | 按文件:行排列的发现与修复建议排名 |
运行检查前,始终阅读 references/rules.md。如果无人能回答问题,请自行决定并记录原因。
2. 上下文
- 技术栈、样式方案、现有Token、字体及其加载方式、主题切换(及其 localStorage key)、国际化(+ locale key)、路由、构建命令。
- 哪些内容可以更改,哪些绝对不能更改(其他页面、共享组件、业务逻辑)。
- 本地化:如果任何语言使用西里尔字母,每个选定的字体都必须覆盖它。
3. 基线
对当前状态运行两项检查并保留输出:这是报告的“之前”状态,通常能暴露出真正的错误(字体从未加载、对比度、溢出)。
node <skill>/scripts/lint.mjs <projectRoot>
node <skill>/scripts/inspect.mjs http://localhost:PORT --surface <surface> --routes ... --locales ... --themes ...
audit 模式:从此时起遵循 references/audit.md 并停止。不要编辑项目文件。
4. 清单
- 主题: 仅此产品或人员独有的 8–12 项内容(名称、地点、真实数字、真实工作)。
- 素材: 对每个视觉插槽标记为
real、picture(可诚实获取来源)或absent。 绝不捏造证据:不使用假标志、假证言、假指标或假截图。 - 受众与任务: 谁在看,他们必须先做什么或学什么。
5. 方向(发牌,品味驱动)
node <skill>/scripts/deal.mjs --surface <page|app> --options 3 --project <projectRoot>
该脚本会根据用户的 品味档案(~/.naqsh/taste.json,可在项目中通过 <project>/.naqsh/taste.json 覆盖)和近期选择对设计库进行评分,并从不同风格家族中发出 3 个方向。
- 如果用户在场,展示这三个方向(构思、字体、调色板、主视觉),并让他们选择。否则,为用户内容选择最合适的方案,并说明理由。
deal.mjs --pick <id>会打印完整的设计方案(章节、动效、字体导入、亮/暗模式Token)并记录选择。 根据该方案进行构建:其字体、调色板和主视觉是约束条件。根据实际内容调整尺寸和章节;仅在书面说明理由的情况下才能偏离(例如缺少素材)。page:同时阅读references/page.md。app:同时阅读references/app.md;该方案中的system块决定了外壳、密度、KPI、表格、状态和图表样式。
需求简报 vs 品味。 需求简报中的形容词(“宁静”、“简约”、“专业”)描述的是任务,而非外观。应通过清晰度、密度和动效上的克制来满足这些需求,而不是选择一个品味档案所避免的方向。永远不要仅仅因为一个方向比简报中的形容词更大胆就放弃它;如果简报和品味真正冲突,为品味选择,并在 DESIGN.md 中注明。
品味反馈。 当用户表示喜欢或不喜欢某个结果时,更新 ~/.naqsh/taste.json(boldness 1–5,temperature warm|cool|neutral|any,typeStyles,likes,avoid,notes),并告知他们。仅适用于一个界面的偏好放在其 page 或 app 块中,这会覆盖通用键。
6. 最低标准(绝不豁免;脚本会检查大部分内容)
- 每个语言环境中的 i18n 文本均可见;不创作文案。
- 字体加载并覆盖每个语言环境的文字;最长语言环境的文本在 375 像素宽度下能显示。
- 字体
@import在@import "tailwindcss"之上;元素样式位于@layer base内部。 - 没有水平页面滚动;使用
overflow-x: clip,而不是hidden/100vw。 - 每个主题下对比度 ≥ 4.5:1(大号文本 3:1);焦点可见;可点击目标 ≥ 24 像素(推荐 44)。
- 尊重
prefers-reduced-motion;没有transition: all;仅对 transform/opacity 进行动画。 - 新 Token 的作用域应限定,以免未触及的页面发生变化。
7. AI生成UI特征(准则:仅当发牌方案允许时才能豁免)
默认的 Tailwind indigo/violet;发光、玻璃态、极光斑点、轨道图标、闪光按钮、渐变文字;每个标题上方的跟踪大写眉毛标题;一致的圆角+阴影卡片网格;包含圆形指标的主视觉区域;同一个屏幕中重复的名称或标题。粗体比例、强烈色彩和衬线/无衬线对比并非特征——过于保守同样是失败:如果结果看起来像模板,请加大方案构思的力度。
8. 构建循环
- Token(作用域限定)→ 主屏幕 / 主视觉 → 其余部分。
- 每个步骤之后:运行
lint。主屏幕之后:构建、预览、仅对该路由运行inspect(最宽 + 最窄宽度,第一个语言环境,两个主题)。最后:运行完整矩阵。每次打开截图并查看。修复、重复——第一次完整通过后最多 3 轮。仅读取你更改的文件;保持交互简短。 - 细节检查: 阅读
references/components.md;每个控件都按此构建(没有未豁免的native-control),标志性时刻存在。运行inspect ... --details并打开<out>/details/中的每个裁剪图;修复直到每个细节在 2x 下看起来都是经过刻意设计的。 - 当细节检查完成且构建结果为 0 个最低标准 FAIL 时,编写
DESIGN.md(草稿),并在新的上下文——Agent 工具,subagent_type: "naqsh:naqsh-reviewer"——中启动审核员,并提供:项目根目录、界面类型、模式、方向 ID、<skill>路径、截图文件夹(包含details/)、预览 URL 和 inspect 标志。应用其floor、idea和fidelity修复(其他修复由你自行判断),重新运行检查。进行一轮审核;只有在判决为rework时才进行第二轮。如果没有 Agent 工具可用,在重新阅读截图后,根据agents/naqsh-reviewer.md自行进行审核。 - 以 0 个最低标准 FAIL、每个特征已修复或豁免、以及项目构建通过来结束。停止预览服务器。
9. 报告
在项目根目录(或用户指定的位置)编写 DESIGN.md:发出的选项和选择、构思说明、Token、字体、关键决策、标志性时刻、检查的前后计数、豁免及其原因、自行判断的检查、待办事项。最后询问用户喜欢和不喜欢什么,以便改进品味档案。