[AI]UI设计skill: designer-skills

designer-skills

“designer-skills”在 AI 辅助编程领域，特指一系列结构化指令包，目的是解决“同一 AI 在不同时间生成的界面风格不一致”这个痛点。

github

https://github.com/julianoczkowski/designer-skills

B站视频

【designer-skills】https://www.bilibili.com/video/BV1Bc7Z6zEoW?vd_source=f1bd3b5218c30adf0a002c8c937e0a27

分为7步:

梳理需求
设计简要
信息架构
设计基础要素
拆解任务
页面构建
设计评审。

效果

因为有动效，所以截图时页面排版有点问题。

安装

npx skills add julianoczkowski/designer-skills

npx 是 npm 从 5.2 版本开始自带的一个工具命令，主要用来直接运行 Node.js 包中的可执行文件。

npx skills 在cmd中依赖于@skills/cli项目，在IDE中可能是其自带全局命令。

npm view skills

skills@1.5.10 | MIT | deps: 1 | versions: 75The open agent skills ecosystemhttps://github.com/vercel-labs/skills#readmekeywords: cli, agent-skills, skills, ai-agents, aider-desk, amp, antigravity, antigravity-cli, astrbot, autohand-code, augment, bob, claude-code, openclaw, cline, codearts-agent, codebuddy, codemaker, codestudio, codex, command-code, continue, cortex, crush, cursor, deepagents, devin, dexto, droid, firebender, forgecode, gemini-cli, github-copilot, goose, hermes-agent, inference-sh, jazz, junie, iflow-cli, kilo, kimi-code-cli, kiro-cli, kode, lingma, loaf, mcpjam, mistral-vibe, moxby, mux, opencode, openhands, ona, pi, qoder, qoder-cn, qwen-code, replit, reasonix, rovodev, roo, tabnine-cli, terramind, tinycloud, trae, trae-cn, warp, windsurf, zed, zencoder, zenflow, neovate, pochi, promptscript, adal, universalbin: skills, add-skilldist.tarball: https://registry.npmmirror.com/skills/-/skills-1.5.10.tgz.shasum: 45ac8c4f8e468e6b66912a289f04fad8a616b2f4.integrity: sha512-5d9lKHeF4qcF/7LRd8h1arnPGJtRu6GxVoWyt9hh0u1RUe+UrjzXIc6PITE+HMzgqR8sZ/vJtGDi8lrOZTGS7w==.unpackedSize: 462.5 kBdependencies:yaml: ^2.8.3maintainers:- rauchg <rauchg@gmail.com>- quuu <qual1337@gmail.com>dist-tags:latest: 1.5.10              snapshot: 1.5.5-snapshot.1published 2 days ago by GitHub Actions <npm-oidc-no-reply@github.com>

安装过程

███████╗██╗  ██╗██╗██╗     ██╗     ███████╗██╔════╝██║ ██╔╝██║██║     ██║     ██╔════╝███████╗█████╔╝ ██║██║     ██║     ███████╗╚════██║██╔═██╗ ██║██║     ██║     ╚════██║███████║██║  ██╗██║███████╗███████╗███████║╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝╚══════╝T   skills|o  Source: https://github.com/julianoczkowski/designer-skills.git|o  Repository cloned|o  Found 8 skills|*  Select skills to install (space to toggle)|  [•] brief-to-tasks (Break a design brief into an ordered checklist of indepen...)|  [ ] design-brief|  [ ] design-flow|  [ ] design-review|  [ ] design-tokens|  [ ] frontend-design|  [ ] grill-me|  [ ] information-architecture—

Press  space  to select,  enter  to submit

选择安装哪个技能，这里可以选择design-flow，上下键移动,空格选择，回车提交。

 Search:│  ↑↓ move, space select, enter confirm││   ○ Tabnine CLI (.tabnine/agent/skills)│   ○ Terramind (.terramind/skills)│   ○ Tinycloud (.tinycloud/skills)│   ○ Trae (.trae/skills)│ ❯ ○ Trae CN (.trae/skills)│   ○ Windsurf (.windsurf/skills)│   ○ Zencoder (.zencoder/skills)│   ○ Zenflow (.zencoder/skills)│  ↑ 41 more  ↓ 3 more││  Selected: Amp, Antigravity, Antigravity CLI +10 more

选择编译器，本地安装Trae CN所以选择找个，这步应该是给编译器全局安装命令。

 Installation scope|  > Project (Install in current directory (committed with your project))|    Global

选择安装在项目中还是全局，此处选择安装在项目中。

*  Proceed with installation?|  > Yes /   No

询问是否继续安装，选择会下载对应技能文件。

 Installation complete|o  Installed 1 skill ----------------+|                                    ||  ✓ design-flow (copied)            ||    → .\.agents\skills\design-flow  ||    → .\.agents\skills\design-flow  ||    → .\.agents\skills\design-flow  ||    → .\.agents\skills\design-flow  ||    → .\.agents\skills\design-flow  ||    → .\.agents\skills\design-flow  ||    → .\.agents\skills\design-flow  ||    → .\.agents\skills\design-flow  ||    → .\.agents\skills\design-flow  ||    → .\.agents\skills\design-flow  ||    → .\.agents\skills\design-flow  ||    → .\.agents\skills\design-flow  ||    → .\.agents\skills\design-flow  ||                                    |+------------------------------------+|—  Done!  Review skills before use; they run with full agent permissions.