메뉴
Audit or define a design system for a frontend codebase. Use when the user asks to梳理设计系统, 统一组件风格, 做 UI audit, 收敛 token, 规范 typography/spacing/color, 盘点组件变体, or wants a concrete report on visual inconsistency and design debt.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Implement or review accessible interactive UI patterns such as dialogs, tabs, comboboxes, disclosures, keyboard navigation, and focus management. Use when the user asks for modal, tab, dropdown, command menu, searchable select, accordion, or accessibility fixes in frontend components.
Redesign dashboards, admin panels, workbenches, analytics screens, sidebars, result panels, or multi-column product pages. Use when the user asks to 重做 dashboard, 改版工作台, 优化后台视觉, 做更高级的仪表盘, 重构结果面板, or wants a more polished product UI before full feature work.
Design or refactor dense product UI such as dashboards, tables, result panels, sidebars, filter bars, watchlists, compare views, or multi-panel workbenches. Use when the user asks for dashboard/table/workbench/result-panel/watchlist/filter UX, or when a page has too much data and needs clearer scanability and hierarchy.
Redesign or polish frontend UI in this repo. Use when the user asks to beautify pages/components, redesign dashboards or workbenches, improve layout/hierarchy/visual polish/motion/branding, or says "改好看", "重设计", "优化界面", "做一个 landing page / dashboard / 工作台". Ground decisions in the bundled online design-pattern references instead of generic AI styling.
Verify frontend behavior locally with browser-based checks. Use when the user asks to test pages, reproduce UI bugs, verify interactions, inspect screenshots, check responsive regressions, or validate flows after frontend changes in this repo.
Create visually strong marketing or landing pages, hero sections, pricing pages, feature pages, launch pages, or concept mockups. Use when the user asks for 落地页, 官网首页, hero 区, 定价页, 产品介绍页, 宣传页, 视觉稿, 高保真页面, or wants a page that feels more branded and memorable than a standard SaaS layout.
| name | design-system-audit |
| description | Audit or define a design system for a frontend codebase. Use when the user asks to梳理设计系统, 统一组件风格, 做 UI audit, 收敛 token, 规范 typography/spacing/color, 盘点组件变体, or wants a concrete report on visual inconsistency and design debt. |
这个技能用于“查问题”和“立规则”。目标不是直接重画所有页面，而是识别视觉与交互系统的断裂点，给出一套可执行的统一方案。
references/design-system-audit-patterns.md