Communitygithub.com

ToshqulovLaziz/naqsh

设计或重新设计前端UI,使其看起来刻意设计过,而非AI生成。支持`page`(落地页、作品集、营销、产品页)和`app`(ERP、管理后台、仪表盘、表格、表单)两种界面。模式包括:构建、重新设计、审计。

naqsh 是什么?

naqsh 是一款面向开发者和AI代理的专业前端UI设计技能,旨在帮助用户将AI生成的、模板化的外观,提升为精心设计的、有品味的界面。它主要运行在Claude Code等支持技能调用的AI代理平台上,但也可作为独立工具(基于Node.js和本地Chrome/Edge)使用。该技能的核心工作流程包括:根据用户项目类型(page或app)和模式(构建新UI、重新设计现有UI、或仅审计)进行路由;通过脚本进行代码质量检查(lint)和视觉检查(inspect);利用一个基于用户品味的“发牌”机制(deal.mjs)从设计风格库中推荐三个方向供选择,并生成详细的设计方案;随后进入构建循环,逐步实现设计,并在每个步骤后自动进行检查和截图预览。naqsh 强调使用真实内容(而非虚构),并包含一套严格的“最低标准”(Floor),如字体加载、对比度、无障碍、国际化(支持拉丁和西里尔字母)等。此外,它还能从用户反馈中学习,动态更新用户的品味档案(taste.json),以不断提升后续设计推荐的匹配度。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ToshqulovLaziz/naqsh/tree/main/skills/naqsh

在你喜欢的 AI 中提问

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

文档

naqsh 是做什么的?

v0.6。<skill> 表示此技能的基础目录。脚本需要 Node ≥ 22 和本地的 Chrome/Edge;无需额外安装。

1. 路由

在执行任何操作之前,用一行明确说明界面类型和模式。

界面类型信号词参考文档
page落地页、作品集、营销、产品、单页references/page.md
appERP、管理后台、仪表盘、表格、表单、设置、CRUDreferences/app.md
模式修改代码?输出
build是,新UIUI + 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. 构建循环

  1. Token(作用域限定)→ 主屏幕 / 主视觉 → 其余部分。
  2. 每个步骤之后:运行 lint。主屏幕之后:构建、预览、仅对该路由运行 inspect(最宽 + 最窄宽度,第一个语言环境,两个主题)。最后:运行完整矩阵。每次打开截图并查看。修复、重复——第一次完整通过后最多 3 轮。仅读取你更改的文件;保持交互简短。
  3. 细节检查: 阅读 references/components.md;每个控件都按此构建(没有未豁免的 native-control),标志性时刻存在。运行 inspect ... --details 并打开 <out>/details/ 中的每个裁剪图;修复直到每个细节在 2x 下看起来都是经过刻意设计的。
  4. 当细节检查完成且构建结果为 0 个最低标准 FAIL 时,编写 DESIGN.md(草稿),并在新的上下文——Agent 工具,subagent_type: "naqsh:naqsh-reviewer" ——中启动审核员,并提供:项目根目录、界面类型、模式、方向 ID、<skill> 路径、截图文件夹(包含 details/)、预览 URL 和 inspect 标志。应用其 floor、idea 和 fidelity 修复(其他修复由你自行判断),重新运行检查。进行一轮审核;只有在判决为 rework 时才进行第二轮。如果没有 Agent 工具可用,在重新阅读截图后,根据 agents/naqsh-reviewer.md 自行进行审核。
  5. 以 0 个最低标准 FAIL、每个特征已修复或豁免、以及项目构建通过来结束。停止预览服务器。

9. 报告

在项目根目录(或用户指定的位置)编写 DESIGN.md:发出的选项和选择、构思说明、Token、字体、关键决策、标志性时刻、检查的前后计数、豁免及其原因、自行判断的检查、待办事项。最后询问用户喜欢和不喜欢什么,以便改进品味档案。

相关技能