agentleFS
YardonYanYardonYan/ui-design-skills/SKILL.md

ui-design-skills

Skill0 starsChanged yesterdayApache-2.0View on GitHub

当用户说要做某个产品、页面、界面、图标、配色或前端效果,却没有指明该用哪个技能时,用这个入口按意图自动匹配本仓库里的技能。用户只需要描述想做什么,由你判断该读哪一份 SKILL.md。适用于 Vibe Coding 场景下的一句话需求、产品原型、页面整改与界面验收。也负责在使用者找外部组件库、灵感站、UI 提示词库,或想借外部设计经验提升质感、动效、可访问性时,按 docs/resource-routing.md 按需加载 references 下的索引与快照,默认一律不加载。产出是 Word / PDF / PPT 文件、后端接口、数据分析或纯运维任务时不走这份。关键词:做个产品、做个网页、做个 App、设计图标、前端 UI、界面、找灵感、找组件库、UI 技能、设计质感、vibe coding、自动匹配、不知道用哪个技能。

The file

Files
SKILL.md

UI Design Skills 总入口

这是整个仓库的入口,不是某一个具体技能。使用者把仓库交给 AI 之后,AI 先读这份文件,再按意图去读 skills/ 下该读的那几份 SKILL.md。

一条硬规则

使用者不需要知道技能名,也不需要先查目录。

不要要求对方报出某个技能名,不要让用户在一堆技能里做选择,不要因为对方没说清楚用哪个技能就停下来。使用者只负责说清楚想做什么产品、给谁用、大概什么样子;选哪个技能是本文件要解决的问题。

同样,默认不加载 references/resources/ 下的资源索引。只有使用者明确要找外部资源或找灵感时,才按 docs/resource-routing.md 读命中的一份分类文件。整合技能属于 skills/ 下的正式技能,按常规流程匹配即可。

四步流程

  1. 从描述里抽取意图信号,最多四个维度:产物是什么、载体是什么、处在哪个阶段、有什么约束。字段说明见 docs/intent-routing.md。
  2. 按 docs/intent-routing.md 的映射表落到六类之一,选 1 个主技能,必要时加 1 到 2 个辅助技能。跨类需求按最终产物定主技能,另一类只作参考。
  3. 读这些技能的 SKILL.md,需要模板与规则时再读同目录的 references/、templates/。不要一次把 72 个技能全灌进上下文。
  4. 交付产物,并用一句话说明匹配了哪几个技能、为什么。不要长篇解释路由过程。

常见意图的快捷映射

使用者大概会这么说主技能常一起用
我要做个产品官网、落地页、首页saas-landingweb-design-guidelines
我要给 SaaS 做定价页、套餐页pricing-pagesaas-landing
我要做个 FAQ 或文档站faq-page、docs-pageweb-design-guidelines
我要做个管理后台、订单系统、CRM 页面enterprise-adminadmin-form-schema、admin-ia-patterns
把字段整理成能校验的表单admin-form-schemaenterprise-admin
我要看数据的看板、仪表盘dashboardlive-dashboard
我要做个 App 界面、手机上的一屏mobile-appmobile-design-spec
查 iOS、Android、小程序的尺寸mobile-design-spec无
我要做个 AI 助手、聊天界面、带审批的对话assistant-uiai-chat-patterns
列全对话界面要处理的状态ai-chat-patternsassistant-ui
我要一套图标、几个功能图标icon-systemspotkit
我要插图、空状态图spotkiticon-system
我要给产品定配色、深浅两套flexoki-paletteweb-design-guidelines
这个界面一眼 AI 味,帮我改unslopreview-animations
帮我审一下界面规范和可访问性web-design-guidelinesfrontend-spec
把设计图、截图变成代码image-to-codeweb-clone
复刻一个站web-cloneimage-to-code
出单文件报告、HTML 转 PDFhtml-skill-effectiveness、html-to-pdf无

完整映射、冲突裁决与兜底路径在 docs/intent-routing.md;按人类口语排的索引在 ROUTER.md;按做界面六段主线排的地图在 docs/skill-map.md。

外部资源与整合技能

仓库共 72 个技能,其中 5 个是把外部技能内容改编后正式纳入的,另有一份按需查的资源索引。

部分路径是什么什么时候用
整合技能skills/foundations/design-vocabulary、art-direction、a11y-rules、motion-craft、motion-prompts提升质感、艺术方向、可访问性、动效、提示词写法
资源索引references/resources/共具 9 类资源索引,37 条仓库链接 + 103 条站点找组件库、灵感站、配色工具、UI 提示词库、模板

整合技能是正式技能,按 docs/intent-routing.md 的常规流程匹配,有统一命名的 SKILL.md,可安装、可路由、可校验。资源索引只是网址清单,默认不读;只有出现找、有没有、参考、灵感这类信号才打开,一次最多读一份分类文件,规则见 docs/resource-routing.md。

归属与许可统一登记在 THIRD-PARTY.md。本库已有的 hallmark、ui-ux-pro-max、frontend-design、emil-design-eng 与 84 家 DESIGN.md 语料不重复收。

兜底

情况怎么做
描述太模糊,判断不出产物最多问 2 个澄清问题,只问产物是什么、给谁用;不要连环追问
完全没命中任何映射先用 oil-ui 定方向;网页类接 saas-landing,后台类接 enterprise-admin,再按反馈收敛
同时像网页又像后台按最终产物定主技能;管理端走 enterprise-admin,营销页走 saas-landing
需要多个技能协作顺序是:定方向 → 定结构或状态 → 出稿 → 配素材 → 验收,不要反过来
使用者给了字段清单只用给出的字段,不臆造资料里没有的字段
涉及外部服务或联网检索查询词里不带内部系统名与内部实体信息,用抽象描述
使用者主动点名了某个技能尊重指定,但仍先读该技能的 SKILL.md 确认边界
使用者要找资源或参考按 docs/resource-routing.md 只读命中的一份;分不清要网址还是要做法时,问自己这一句即可
使用者只是问有哪些资源只读 references/resources/INDEX.md 给分类概览,不要展开全部链接

边界

  • 本入口只做意图判断与路由,不替代具体技能的规则。落地代码、模板、素材都在被选中的技能目录里。
  • 产出是 Word、PDF、PPT 这类文件,或后端接口、数据分析、运维任务时,不在本仓库范围内,直接说明不适用即可。
  • 不确定时宁可少选技能,也不要一次加载一堆;选错了按使用者反馈换一个即可。

许可

本文件属仓库自有内容,Apache-2.0,见 LICENSE。第三方内容按 THIRD-PARTY.md 各自条款使用。

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.